[TOC] ## 概述 需要提前聲明 ``` <script setup lang="ts"> ``` ## ref() 對簡單類型可進行類型推導 ``` // 推導出的類型：Ref<number> const year = ref(2020) // => TS Error: Type 'string' is not assignable to type 'number'. year.value = '2020' ``` 聲明 ``` // 得到的類型：Ref<string | number> const year = ref<string | number>('2020') year.value = 2020 // 成功！ ``` 如果聲明時,沒有指定默認值,會得到一個包含 undefined 的聯合類型 ``` // 推導得到的類型：Ref<number | undefined> const n = ref<number>() ``` ## reactive() reactive() 也會隱式地從它的參數中推導類型： ``` import { reactive } from 'vue' // 推導得到的類型：{ title: string } const book = reactive({ title: 'Vue 3 指引' }) ``` 要顯式地標注一個 reactive 變量的類型，我們可以使用接口： ``` import { reactive } from 'vue' interface Book { title: string year?: number } const book: Book = reactive({ title: 'Vue 3 指引' }) ``` ## computed() computed 可通過類型推導出類型 顯示聲明 ``` const double = computed<number>(() => { // 若返回值不是 number 類型則會報錯 }) ``` ## props 對比 運行時的,類型聲明 ``` <script setup lang="ts"> const props = defineProps({ foo: { type: String, required: true }, bar: Number }) props.foo // string props.bar // number | undefined </script> ``` Ts的類型聲明 方式一 ``` <script setup lang="ts"> const props = defineProps<{ foo: string bar?: number }>() </script> ``` 方式二: ``` interface Props { foo: string bar?: number } const props \= defineProps() ``` 使用 聲明試如果需要添加默認值 使用如下方式 ``` export interface Props { msg?: string labels?: string[] } const props = withDefaults(defineProps<Props>(), { msg: 'hello', labels: () => ['one', 'two'] }) ``` ## 子組件的 emits ``` <script setup lang="ts"> // 運行時 const emit = defineEmits(['change', 'update']) // 基于類型 const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>() </script> ```