Vue3.2 运行时类型检测和运用ts特性的编译时类型检测

在Vue3内，我们可以在script标签里的export default里添加defineProps这样可以进行一种运行时的声明。

运行时声明的写法：

defineProps会对将要传入组件的值进行类型限制，但是这个限制时在运行时候执行的。所以即使不对变异也会通过并且如果运行的时候不对并不会影响，而只是会在控制台上报一个错。

编译时类型检测——利用的是vue支持ts的特性

我们在script标签里声明lang="ts"这样就可以使用ts的特性来对props进行限制了。

我们其实是使用了ts里的泛型约束来达到这种功能的。我们都知道ts 的类型检测是在编译过程进行的所以如果类型检测不对的话，就会无法执行。

从语法上来看，其实就是对defineProps的函数的入参进行了类型限制。

我们也许会发现区别，那就是vue里面的运行时类型检测可以做到不传值的情况下赋默认值，但是ts的语法里不可以这样做，并且如果两种方法同时使用会报错！那么我们如何在使用ts编译时检测类型的方法，同时完成赋予默认值呢？

withDefault

我们这样写：

const props = withDefault(defineProps<{
    title?: string,
    // 这里是编译时判断
    time?: number,
    list: number[]
}>(),{
    title: '我是default 默认值',
    time: 2001,
})

这样就实现了。

其实withDefault是vue3里封装的一个宏指令，也就说明尤雨溪大大肯定也意识到了这个问题，所以特地为我们封装了一个方法。