Vue 3 `＜script setup＞` 中 `defineProps` 的演变：从选项对象到泛型

在 Vue 3 的 <script setup> 语法中，defineProps 宏用于声明组件接收的 props。随着 Vue 的发展，特别是与 TypeScript 的深度集成，defineProps 的类型定义方式也经历了演变。本文将对比两种主要的写法，并解释为什么新的泛型写法被认为是更现代和优雅的选择。

传统写法 (Vue 3.3 之前或兼容写法)

在 Vue 3.3 版本之前，或者为了保持一定的兼容性，defineProps 通常通过一个配置对象来定义 props。这个对象包含了每个 prop 的详细选项，例如 type、required 和 default。对于需要更精确类型信息的复杂 prop，会结合 as PropType<YourInterface> 进行类型断言。

示例：

import { defineProps, PropType } from 'vue';

interface Contact {
  name: string;
  email: string;
  phone?: string;
}

defineProps({
  icp: {
    type: String,
    default: ''
  },
  contact: {
    type: Object as PropType<Contact>
  }
});

在这种写法中，我们为 icp prop 显式声明了 type: String 和 default 值。对于 contact prop，我们声明了其运行时类型是 Object，并使用 as PropType<Contact> 告知 TypeScript 它的具体结构符合 Contact 接口。

现代写法 (Vue 3.3+ 推荐)

随着 Vue 3.3 的发布，引入了一种更简洁且类型安全的方式来定义 defineProps，即通过泛型参数直接传入一个 TypeScript 接口或类型别名。

示例：

import { defineProps } from 'vue';

interface Contact {
  name: string;
  email: string;
  phone?: string;
}

interface MyComponentProps {
  icp?: string;
  contact?: Contact;
}

const { icp, contact } = defineProps<MyComponentProps>();

在这种写法中，我们首先定义了一个 TypeScript 接口 MyComponentProps，它清晰地描述了组件接收的所有 props及其类型。然后，我们将这个接口作为泛型参数传递给 defineProps<MyComponentProps>()。Vue 和 TypeScript 能够直接从这个接口推断出每个 prop 的名称、类型和是否可选。

两种写法的对比

特性	传统写法	现代写法 (Vue 3.3+)
类型定义	运行时 type 选项 + PropType 类型断言	直接使用 TypeScript 接口/类型别名作为泛型参数
语法	相对冗余，类型信息分散在配置对象中	更简洁，类型信息集中在接口定义中
类型推断	对复杂类型依赖显式的 PropType	基于接口进行更精确的类型推断
类型安全	依赖运行时检查和显式的类型断言	更依赖 TypeScript 的编译时检查，更安全
默认值处理	在 default 选项中定义	通常在解构 defineProps 返回值时提供
代码可读性	对于简单类型尚可，复杂类型略显笨拙	更清晰直观，类型结构一目了然

为什么现代写法更受推崇？

1. 更简洁的语法： 现代写法避免了在 defineProps 的配置对象中重复声明类型信息，使得代码更加简洁易读。
2. 更好的类型安全性： 通过直接使用 TypeScript 接口，可以充分利用 TypeScript 的类型检查能力，在编译阶段发现潜在的类型错误。
3. 更强大的类型推断： TypeScript 能够根据接口自动推断出 props 的类型，无需额外的 PropType 声明。
4. 更符合 TypeScript 的开发习惯： 先定义类型，再使用类型，这与 TypeScript 的核心理念更加一致。
5. 更好的开发体验： 更精确的类型信息能够提升 IDE 的代码提示和自动补全功能，提高开发效率。

总结

虽然传统的 defineProps 写法仍然有效，但在 Vue 3.3+ 的项目中，特别是当使用 TypeScript 时，推荐采用新的泛型写法。它不仅使代码更加简洁和优雅，更重要的是提供了更强大的类型安全性和更好的开发体验。拥抱这种现代的写法，能够让你更充分地利用 TypeScript 的优势，构建更健壮和可维护的 Vue 应用。