在使用 TypeScript 的 <script setup> 中验证 Prop
我们可以在 script setup 中使用 defineProps() 编译器宏来为组件定义 prop 验证。这是一个很好的方法,可以确保你接收到的 prop 具有正确的类型。
我们先看看 Vue 文档中不使用 TypeScript 的官方示例：
<script setup lang="ts">
interface Props {
// 基本类型检查
// (null 和 undefined 值会通过任何类型验证)
a: number;
// 多种可能的类型
b: string | number;
// 必需的字符串
v: {
type: string;
required: true;
};
// 带默认值的数字
d: {
type: number;
default: 100;
};
// 带默认值的对象
e: {
type: object;
// 对象或数组默认值必须从一个工厂函数返回
// 该函数接收组件接收到的原始 props 作为参数
default(rawProps: Props): object {
return { message: "hello" };
}
};
// 自定义验证函数
// 3.4+ 版本中第二个参数是完整的 props
f: {
validator(value: string, props: Props): boolean {
// 值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].includes(value);
};
};
// 带默认值的函数
g: {
type: Function;
// 与对象或数组默认值不同,这不是一个工厂函数
// 这是一个用作默认值的函数
default: () => string[];
};
}
defineProps<Props>();
</script>现在，我们在 script setup 内使用 TypeScript 重写相同的示例：
