选项式 API_为组件的 props 标注类型

选项式 API 中对 props 的类型推导需要用 defineComponent() 来包装组件。有了它，Vue 才可以通过 props 以及一些额外的选项，比如 required: true 和 default 来推导出 props 的类型

xxxxxxxxxx
<template>
    <div>
        <p>Child</p>
        <p>{{ name }}</p>
        <p>{{ id }}</p>
        <p>{{ msg }}</p>
    </div>
</template>
<script lang="ts">

import { defineComponent } from "vue"

export default defineComponent({
    props:{
        name:String,
        id:Number,
        msg:{
            type:String,
            required:true
        }
    }
})

</script>

然而，这种运行时 props 选项仅支持使用构造函数来作为一个 prop 的类型——没有办法指定多层级对象或函数签名之类的复杂类型

我们可以使用 PropType 这个工具类型来标记更复杂的 props 类型

xxxxxxxxxx
<template>
    <div>
       <p>{{ book.name }}</p>
       <p>{{ book.author }}</p>
       <p>{{ book.num }}</p>
    </div>
</template>
<script lang="ts">

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

interface iBook{
    name:string,
    author:string,
    num:number
}

export default defineComponent({
    props:{
        book:{
            type:Object as PropType<iBook>,
            required: true
        }
    }
})

</script>