Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库 download：> https://www.sisuoit.com/4186.html

1、宏中的导入类型和复杂类型 以前，在 和 的类型参数位置中使用的类型仅限于本地类型，并且仅支持类型文本和接口。这是因为 Vue 需要能够分析 props 接口上的属性，以便生成相应的运行时选项。defineProps``defineEmits 此限制现已在 3.3 中解决。编译器现在可以解析导入的类型，并支持一组有限的复杂类型： vue xml复制代码

请注意，复杂类型支持是基于 AST 的，因此不是 100% 全面的。不支持一些需要实际类型分析的复杂类型，例如条件类型。您可以将条件类型用于单个 props 的类型，但不能对整个 props 对象使用。

详细信息： PR#8083

2、通用组件 使用的组件现在可以通过以下属性接受泛型类型参数：

的值与 TypeScript 中的参数列表完全相同。例如，可以使用多个参数、约束、默认类型和引用导入的类型：generic<...>extends vue xml复制代码

此功能以前需要明确的选择加入，但现在在最新版本的 volar / vue-tsc 中默认启用。

讨论：RFC#436 相关： 通用定义组件（） - PR#7963

3、更符合人体工程学defineEmits 以前，的类型参数仅支持调用签名语法：defineEmits TS typescript复制代码// BEFORE const emit = defineEmits<{ (e: 'foo', id: number): void (e: 'bar', name: string, ...rest: any[]): void }>()

该类型与 的返回类型匹配，但编写起来有点冗长和笨拙。3.3 引入了一种更符合人体工程学的用类型声明发出的方式：emit TS typescript复制代码// AFTER const emit = defineEmits<{ foo: [id: number] bar: [name: string, ...rest: any[]] }>()

在类型文本中，键是事件名称，值是指定其他参数的数组类型。尽管不是必需的，但您可以使用标记的元组元素来实现显式性，如上例所示。 仍支持调用签名语法。 4、类型化插槽defineSlots 新的宏可用于声明预期的插槽及其各自的预期插槽道具：defineSlots vue typescript复制代码 defineSlots()只接受类型参数，不接受运行时参数。类型参数应为类型文本，其中属性键是槽名称，值是槽函数。函数的第一个参数是插槽期望接收的道具，其类型将用于模板中的槽道具。的返回值与从 返回的插槽对象相同。defineSlots``useSlots

当前的一些限制：

所需的插槽检查尚未在 volar / vue-tsc 中实现。 时隙函数返回类型目前被忽略，可以忽略，但我们将来可能会利用它来检查槽内容。any

还有一个相应的使用选项。这两个 API 都没有运行时影响，纯粹用作 IDE 和 .slotsdefineComponentvue-tsc

详细信息： PR#7982

实验性功能 5、反应式道具解构 以前是现在放弃的反应性变换的一部分，反应式道具解构已被拆分为一个单独的功能。 该功能允许解构道具保持反应性，并提供一种更符合人体工程学的方式来声明道具默认值： vue xml复制代码 ​