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

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

运行时声明的写法：

<template >
    <h1>我是DefineProps-Runtime</h1>
    <h3>你好{{ name }} 现在是{{ time }} 年</h3>
</template>
<script setup>

defineProps({

    name: {
        type: String,
        required: true
    },
    time: {
        type: String,
        required: true
    }

})
</script>
<style lang="">
    
</style>

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

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

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

<template >
    <h1>我是DefineProps-Runtime</h1>
    <h3>
        你好
        <h1>{{ title }}</h1>
        现在是{{ time }} 年
    </h3>
    <li v-for="item in list" :key="item">{{ item }}</li>
</template>
<script setup lang="ts">
const props = defineProps<{
    title?: string,
    // 这里是编译时判断
    time?: number,
    list: number[]
}>()
console.log(props);
// withDefaults宏命令

// defineProps和ts的类型约束不可以同时存在
// defineProps({

//     name: {
//         type: String,
//         required: true
//     },
//     time: {
//         type: String,
//         required: true
//     }

// })
</script>

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

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

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

withDefault

我们这样写：

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

这样就实现了。

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