💗💗💗歡迎來到我的博客，你將找到有關如何使用技術解決問題的文章，也會找到某個技術的學習路線。無論你是何種職業，我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章，也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互相學習和建立一個積極的社區。謝謝你的光臨，讓我們一起踏上這個知識之旅！

🍋介紹

在Vue3中，我們不僅可以利用其強大的響應式系統和組件化開發來構建靈活的前端應用程序，還可以利用TypeScript(簡稱TS)的特性來增強代碼的可讀性、可維護性和類型安全性。在本文中，我們將深入探討Vue3中接口、泛型和自定義類型的使用，以便更好地利用這些功能來構建優秀的Vue應用

🍋接口

首先我們介紹一下接口

接口在Vue3中是一種定義對象結構的方式，它可以用來描述對象的形狀，包括屬性和方法。通過接口，我們可以明確指定組件的props、data等屬性的類型，從而在編譯時捕獲潛在的錯誤

老樣子，我們準備初始代碼

<template><div class="person">Python
</div></template><script lang="ts" setup name="Person11">let person = {id:'1515',name:'饅頭',age:22}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

上面的代碼在頁面中僅僅顯示了Python

如果我們寫代碼的時候，對于有些數據寫錯了但是又僅僅是失誤造成的，這樣是不會給我們進行錯誤提示的，這樣就需要我們使用接口了

首先我們需要創建一個文件夾并創建index.ts文件，這樣創建的好處是引入路徑更方便
接下來我們定義一個接口，目的是為了限制Person對象的具體屬性

export interface PersonInter {id:string,name:string,age:number`  let personList = [{id:'a',name:'大饅頭',age:18},{id:'b',name:'中饅頭',age:19},{id:'c',name:'小饅頭',age:20}]`}

接下來我們進行導入

  import {type PersonInter} from '@/types'

同時我們進行定義，目的是讓Person符合這個PersonInter接口

  let person:PersonInter = {id:'1515',name:'饅頭',age:22}

🍋泛型

接下來我們定義一個數組

  let personList = [{id:'a',name:'大饅頭',age:18},{id:'b',name:'中饅頭',age:19},{id:'c',name:'小饅頭',age:20}]

如果我們想要這個數組也滿足規范應該怎么做呢，下面我將展示

  let personList : Array<PersonInter>= [{id:'a',name:'大饅頭',age:18},{id:'b',name:'中饅頭',age:19},{id:'c',name:'小饅頭',age:20}]

上面的含義主要是，數組中的每一個都將滿足規則

🍋自定義類型

在index.ts中定義

  export type Persons = PersonInter[]

之后在Person.vue中進行導入即可，同時我們將之前的Array PersonInter修改為我們自定義的Persons就可以了，是不是很方便啊~~~

<template><div class="person">Python
</div></template><script lang="ts" setup name="Person11">import {type PersonInter,type Persons} from '@/types'let personList : Persons= [{id:'a',name:'大饅頭',age:18},{id:'b',name:'中饅頭',age:19},{id:'c',name:'小饅頭',age:20}]</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

🍋接口、泛型、自定義相對比

接口 vs 泛型：

接口用于描述對象的形狀，泛型用于增強代碼的靈活性。
接口在定義對象結構時更為直觀，而泛型適用于編寫通用的、適用于多種類型的代碼。

---

泛型 vs 自定義類型：

泛型用于增強代碼的靈活性，而自定義類型用于提高代碼的可讀性和類型安全性。
泛型可以用于編寫通用的代碼，而自定義類型用于定義具體的類型結構。

🍋結論

在Vue3中，接口、泛型和自定義類型是強大的工具，可以幫助我們編寫更加健壯、靈活和可維護的代碼。通過合理地使用這些功能，我們可以有效地減少錯誤，并提高代碼的質量和可讀性。因此，在開發Vue應用程序時，建議充分利用這些功能來提升開發效率和代碼質量

挑戰與創造都是很痛苦的，但是很充實。