Vue3 + TS PropType类型验证
vue3小知识
·
⽤⼀句简单的话来说,就是为了类型推论,让我们在使⽤属性的时候获取更丰富的类型提⽰,⽐如在这⾥我们定义了⼀个属性 list,使⽤ vue默认的 Array,只能确定它是⼀个数组类型,不能确定数组⾥⾯的每⼀项到底是什么样⼦的。你在 setup 中,看 props.list 就是⼀个any数组,但是如果使⽤PropType <ColumnProps[]> 这个时候,props.list 就变成⼀个 ColumnProps 的数组,你使⽤它的时候不论在 ts 中还是模版中都能获得类型的推断和⾃动补全等等。
Array 可以写成 Array as PropType<oneType[]>
Object 可以写成 Object as PropType<oneType>
然后你可以定义你的type oneType = {}
PropType 从vue 导入
<script lang='ts'>
import {defineComponent, PropType} from 'vue'
export interface ColumnProps{
id: string;
title: string;
avatar: string;
description: string;
}
export default defineComponent({
name:'ColumnList',
props:{
list:{
type:Array as PropType<ColumnProps[]>,
required:true
}
}
})
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)