76.在使用 TypeScript 的 script setup 中验证 Prop&创建内联组合式函数的3种方法

在使用 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 重写相同的示例：