vue3 defineprops ts

### 定义 Props 的方法 在 Vue 3 中使用 TypeScript 来定义 `props` 提供了几种不同的方式来确保类型安全性和灵活性。对于简单的属性传递，可以直接通过数组形式指定所需属性名称；当需要更精确控制属性及其默认值时，则可以采用泛型接口的形式。 #### 使用数组定义简单 Prop 属性 如果只需要声明一些基础类型的 prop 而不需要额外配置，默认情况下这些 prop 是可选的： ```typescript defineProps(['content', 'cancel']) ``` 这种方式适用于那些仅需快速定义少量基本数据类型的场景[^2]。 #### 利用泛型接口增强类型约束 为了给组件提供更加严格的类型检查以及更好的开发体验，在 `<script setup>` 或者选项 API 下可以通过如下方式进行复杂 prop 类型定义： ```typescript import { defineComponent, DefineComponent } from 'vue'; export default defineComponent({ props: { content: String, cancel: String, defineHandler: Function as PropType<() => void>, cancelHandler: Function as PropType<() => void> } }) ``` 或者利用 `<script setup>` 结合泛型实现相同效果: ```typescript <script setup lang="ts"> // 导入必要的类型定义 import type { PropType } from 'vue'; import type { AlartConfig } from './types'; const props = defineProps<{ content?: string; cancel?: string; defineHandler?: () => void; cancelHandler?: () => void; }>(); </script> ``` 此代码片段展示了如何为 Alert 组件定义其接受的属性，并指定了它们的数据类型和是否必需[^1]。 #### 设置默认值 除了定义 prop 的类型外，还可以为其设定默认值以提高用户体验的一致性。这可通过 `withDefaults` 达成： ```typescript <script setup lang="ts"> import { withDefaults, defineProps } from 'vue'; import type { Person } from '@/types'; interface ComponentProps { persons: Array<Person>; } const props = withDefaults(defineProps<ComponentProps>(), { persons: () => [{ name: '张三', age: 18 }] }); </script> ``` 上述例子中演示了怎样为 `persons` 这一 prop 设定一个合理的初始状态，注意这里由于是对象或数组类型所以要借助回调函数返回默认值。 #### 配置 tsconfig.json 支持自动识别 .d.ts 文件 为了让项目能够顺利解析自定义 `.d.ts` 声明文件中的全局扩展或其他辅助功能，可以在项目的根目录下的 `tsconfig.json` 添加相应的路径匹配规则： ```json { "compilerOptions": {}, "include": [ "src/**/*.d.ts" ] } ``` 这样做的好处是可以让编辑器更好地理解整个应用程序内的模块关系，从而减少潜在错误并提升编码效率[^3]。