Vue setup 中，类似class implements约束的替代方案。

原创已于 2023-05-15 20:02:01 修改 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java #typescript

于 2023-04-19 16:54:27 首次发布

web前端专栏收录该内容

33 篇文章

订阅专栏

文章介绍了在Vue单文件组件(SFC)中，如何使用typescript的泛型和`defineExpose`来规范组件必须包含的方法和变量。通过定义一个接口Person，约束组件导出的属性，确保每个组件都有特定的name和age属性，以及可选的getInfo方法，从而提高代码的规范性和可维护性，避免父组件调用不存在的方法问题。

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

前言

封装vue 组件时，我希望所有的组件都要有某方法，某变量。

这种需求在面向对象的class中，用 class XX implements interface 就可以实现。以此来规范每个对象的属性。

对于vue SFC 的setup语法糖中，可以使用defineExpose的泛型T，来约束组件中一定需要有的方法和值。

代码

<script lang='ts' setup>
interface Person {
    name: string,
    age: number,
    getInfo?:() => { name:string, age:number }
}
// --- 这里传入泛型，约束整个.vue 文件的导出
defineExpose<Person>({
    name: 'Jack',
    age: 10
})
</script>

可以在一定程度上规范组件代码。防止父组件调用组件内方法找不到的情况。