Vue3 + TS PropType类型验证

最新推荐文章于 2025-03-17 10:07:20 发布

星期五の夜

最新推荐文章于 2025-03-17 10:07:20 发布

阅读量7.1k

点赞数 2

分类专栏： vue3 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_43550562/article/details/125390707

版权

vue3 专栏收录该内容

7 篇文章

订阅专栏

本文讲解如何使用Vue的PropType在列组件中进行类型增强，通过ColumnProps接口确保props.list的元素类型，实现TS的类型提示和编辑时的智能辅助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

⽤⼀句简单的话来说，就是为了类型推论，让我们在使⽤属性的时候获取更丰富的类型提⽰，⽐如在这⾥我们定义了⼀个属性 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>