vue typescript @Prop

### 如何在Vue中使用TypeScript定义Props #### 使用`defineProps`定义Props 对于Vue 3组合API风格，在脚本设置语法（即 `<script setup>` 中），可以利用 `defineProps` 来定义组件接收到的属性。这允许开发者指定属性名以及它们的数据类型。 当仅需简单地声明一组未加约束的prop名称时，可以直接传递字符串数组给 `defineProps` 函数： ```typescript <script setup lang="ts"> import type { Persons } from '@/types' // 定义可选的list prop defineProps(["list"]) </script> ``` 为了提供更严格的类型安全性和编译期检查，应该通过泛型方式向 `defineProps` 提供接口或字面量类型的定义来描述预期接收的props结构及其对应的类型： ```typescript <script setup lang="ts"> import type { Persons } from '@/types' // 定义必填项list prop，并限制其为Persons类型 defineProps<{ list: Persons[] }>() </script> ``` 如果希望某些属性具有默认值，则可以通过 `withDefaults` 辅助函数实现这一点。需要注意的是，默认值表达式的求值发生在运行时；因此，对于复杂数据类型比如对象或数组来说，应当采用工厂函数的形式返回这些默认值以避免共享状态的问题： ```typescript <script setup lang="ts"> import type { Persons } from '@/types' import { withDefaults, defineProps } from 'vue' interface Props { list?: Persons[] } const props = withDefaults(defineProps<Props>(), { // 对于列表这样的复合类型，应使用箭头函数形式给出默认值 list: () => [{ name: '张三', age: 18, id: "adwa1234" }] }) console.log(props.list); </script> ``` 上述方法适用于现代Vue项目中的单文件组件(SFC)，特别是那些采用了Composition API 和 `<script setup>` 的场景下[^3]。 #### 类式装饰器模式下的Prop定义 而在类样式组件(`vue-class-component`)环境中，通常会借助选项配置里的 `props` 字段来进行类似的定义工作。下面的例子展示了如何在一个基于类的Vue组件里声明带有类型的props: ```typescript <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({ // 这里也可以直接写成 props 属性而不需要额外导入 Prop 装饰器 props: { content: String, title: { type: String, required: true } } }) export default class MyClassComponent extends Vue { @Prop(String) readonly content!: string; @Prop({type:String,default:'defaultTitle'}) private title!:string; } </script> ``` 这里不仅指定了每个prop的具体类型，还能够设定哪些是必需的、哪些有默认值等特性。这种方式使得代码更加直观易读，同时也保持了良好的TS支持[^2]。