????????像 TypeScript 這樣的類型系統(tǒng)可以在編譯時通過靜態(tài)分析檢測出很多常見錯誤。這減少了生產(chǎn)環(huán)境中的運行時錯誤，也讓我們在重構(gòu)大型項目的時候更有信心。通過 IDE 中基于類型的自動補全，TypeScript 還改善了開發(fā)體驗和效率。

一、項目配置

? ? ? ? 在使用 npm create vue@lates t創(chuàng)建項目時有是否添加typescript選項。

? ? ? ? 如果沒有在創(chuàng)建項目時添加也可以用下面的命令在已有的項目中添加：

• npm install -D?typescript 最新的穩(wěn)定版本
• tsc --init生成tsconfig.json文件

? ? ? ? 在tsconfig.json配置文件中添加配置避免使用import時報錯問題：

{"compilerOptions": {/* 這里省略了其他配置*/"noImplicitAny": false,"allowJs": true,"baseUrl": "src","paths": {"@/*": ["./*"],"@": ["./"]}},// include也需要配置以下："include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"exclude": ["node_modules"]
}

二、為組件的 props 標(biāo)注類型

? ? ? ? 為子組件的屬性指定類型：

<script setup lang="ts">
const props = defineProps({foo: {type: String, required: true},bar: Number
})
</script><template>{{ foo }} - {{ bar }}
</template>

? ? ? ? 在父組件中使用：

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
import {ref} from "vue";
// 這里不是數(shù)值類型將會報錯
const number = ref(0);
</script><template><type-script foo="A" :bar="number"></type-script>
</template>

????????這被稱之為“運行時聲明”，因為傳遞給?defineProps()?的參數(shù)會作為運行時的?props?選項使用。然而，通過泛型參數(shù)來定義 props 的類型通常更直接：

<script setup lang="ts">
const props = defineProps<{foo: stringbar?: number
}>()
</script>

????????這被稱之為“基于類型的聲明”。編譯器會盡可能地嘗試根據(jù)類型參數(shù)推導(dǎo)出等價的運行時選項。在這種場景下，我們第二個例子中編譯出的運行時選項和第一個是完全一致的。

????????基于類型的聲明或者運行時聲明可以擇一使用，但是不能同時使用。我們也可以將 props 的類型移入一個單獨的接口中：

<script setup lang="ts">
interface Props {foo: stringbar?: number
}const props = defineProps<Props>()
</script>

????????這同樣適用于?Props?從另一個源文件中導(dǎo)入的情況。該功能要求 TypeScript 作為 Vue 的一個 peer dependency。

<script setup lang="ts">
import type { Props } from './foo'const props = defineProps<Props>()
</script>

1、Props 解構(gòu)默認(rèn)值

????????當(dāng)使用基于類型的聲明時，我們失去了為 props 聲明默認(rèn)值的能力。這可以通過?withDefaults?編譯器宏解決：

<script setup lang="ts">
export interface Props {msg?: stringlabels?: string[]
}// 為 Props提供默認(rèn)值
const props = withDefaults(defineProps<Props>(), {msg: 'hello',labels: () => ['one', 'two']
})
</script><template>{{ msg }} - {{ labels }}
</template>

????????這將被編譯為等效的運行時 props?default?選項。此外，withDefaults?幫助程序為默認(rèn)值提供類型檢查，并確保返回的 props 類型刪除了已聲明默認(rèn)值的屬性的可選標(biāo)志。

2、非?<script setup>?場景下

????????如果沒有使用?<script setup>，那么為了開啟 props 的類型推導(dǎo)，必須使用?defineComponent()。傳入?setup()?的 props 對象類型是從?props?選項中推導(dǎo)而來。

import { defineComponent } from 'vue'export default defineComponent({props: {message: String},setup(props) {props.message // <-- 類型：string}
})

3、復(fù)雜的 prop 類型

????????通過基于類型的聲明，一個 prop 可以像使用其他任何類型一樣使用一個復(fù)雜類型：

<script setup lang="ts">
interface Book {title: stringauthor: stringyear: number
}const props = defineProps<{book: Book
}>()
</script>

????????對于運行時聲明，我們可以使用?PropType?工具類型：

<script setup lang="ts">
import type { PropType } from 'vue'interface Book {title: stringauthor: stringyear: number
}const props = defineProps({book: Object as PropType<Book>
})
</script><template>{{ book }}
</template>

? ? ? ? 在父組件中使用：

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
import {reactive} from "vue";
// 會進(jìn)行類型檢查
const book = reactive({title: "A",author: "B",year: 2024
});
</script><template><type-script :book="book"></type-script>
</template>

三、為組件的 emits 標(biāo)注類型

????????在?<script setup>?中，emit?函數(shù)的類型標(biāo)注也可以通過運行時聲明或是類型聲明進(jìn)行：

<script setup lang="ts">
/*
// 運行時
const emit = defineEmits(['change', 'update'])// 基于選項
const emit = defineEmits({change: (id: number) => {// 返回 `true` 或 `false`// 表明驗證通過或失敗},update: (value: string) => {// 返回 `true` 或 `false`// 表明驗證通過或失敗}
})// 基于類型
const emit = defineEmits<{(e: 'change', id: number): void(e: 'update', value: string): void
}>()
*/
// 3.3+: 可選的、更簡潔的語法
const emit = defineEmits<{change: [id: number]update: [value: string]
}>()
</script><template><button @click="$emit('change',1)">按鈕1</button><button @click="$emit('update','a')">按鈕2</button>
</template>

? ? ? ? 在父組件中使用：

<script lang="ts" setup>
import TypeScript from "@/components/TypeScript.vue";
// 點擊按鈕1觸發(fā)，獲取傳遞的參數(shù)
function change(args) {console.log(args);
}
// 點擊按鈕2觸發(fā)，獲取傳遞的參數(shù)
function update(args) {console.log(args);
}</script><template><type-script @change="change" @update="update"></type-script>
</template>

????????類型參數(shù)可以是以下的一種：

1. 一個可調(diào)用的函數(shù)類型，但是寫作一個包含調(diào)用簽名的類型字面量。它將被用作返回的?emit?函數(shù)的類型。
2. 一個類型字面量，其中鍵是事件名稱，值是數(shù)組或元組類型，表示事件的附加接受參數(shù)。上面的示例使用了具名元組，因此每個參數(shù)都可以有一個顯式的名稱。

????????我們可以看到，基于類型的聲明使我們可以對所觸發(fā)事件的類型進(jìn)行更細(xì)粒度的控制。若沒有使用?<script setup>，defineComponent()?也可以根據(jù)?emits?選項推導(dǎo)暴露在 setup 上下文中的?emit?函數(shù)的類型：

import { defineComponent } from 'vue'export default defineComponent({emits: ['change'],setup(props, { emit }) {emit('change') // <-- 類型檢查 / 自動補全}
})