TypeScript 與組合式 API

邢帅杰發表於2024-04-10
TypeScriptAPI
看吧：https://cn.vuejs.org/guide/typescript/composition-api.html
為元件的 props 標註型別
<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})
props.foo // string
props.bar // number | undefined
</script>

這被稱之為“執行時宣告”，因為傳遞給 defineProps() 的引數會作為執行時的 props 選項使用。
然而，透過泛型引數來定義 props 的型別通常更直接：

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

這被稱之為“基於型別的宣告”。我們也可以將 props 的型別移入一個單獨的介面中：

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

元件傳值示例：<MyComponent :foo="fooStr" :bar="barStr" @callback="search()"></MyComponent>
若要傳入一個物件，則可以稍微改變一下：

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

元件傳值示例：<MyComponent :Info="propsObj" @callback="search()"></MyComponent>
propsObj就是interface Props 型別的例項。

複雜的 prop 型別
透過基於型別的宣告，一個 prop 可以像使用其他任何型別一樣使用一個複雜型別：

<script setup lang="ts">
interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps<{
  book: Book
}>()
</script>

對於執行時宣告，我們可以使用 PropType 工具型別：

import type { PropType } from 'vue'

const props = defineProps({
  book: Object as PropType<Book>
})

其工作方式與直接指定 props 選項基本相同：

import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  props: {
    book: Object as PropType<Book>
  }
})

相關文章