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

前言

封装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>

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