在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里封装的一个宏指令，也就说明尤雨溪大大肯定也意识到了这个问题，所以特地为我们封装了一个方法。