TypeScript 集成

TypeScript 集成概述

Vue 的 TypeScript 集成主要通过 compiler-sfc 包在编译器层面进行处理，该包将 SFC 中的 TypeScript 代码转换为 JavaScript，同时在适当的地方保留类型信息。这包括解析 TypeScript 语法、解析类型定义以及生成等效的运行时代码。

来源

类型解析系统

Vue 的 TypeScript 集成核心是类型解析系统，它分析 TypeScript 类型并将其转换为运行时 JavaScript 代码。

来源

TypeScope 和 Context

类型解析系统操作一个 TypeScope，它跟踪类型的范围及其关系。

ScriptCompileContext 维护当前编译上下文的信息，包括 TypeScript 特定的标志。

来源

在 SFC 中处理 TypeScript

Vue 的编译器通过几个阶段处理 SFC 中的 TypeScript：

来源

编译器解析器插件

编译器使用 Babel 的解析器和 TypeScript 插件来解析 TypeScript 代码。

来源

packages/compiler-sfc/src/script/context.ts174-208

Vue TypeScript 宏

Vue 提供了用于 TypeScript 集成的特殊编译器宏，允许您使用 TypeScript 类型定义组件选项。

使用 TypeScript 的 defineProps

宏 defineProps<T>() 允许使用 TypeScript 类型定义组件 props。

在处理此宏时，Vue 会：

提取尖括号内的 TypeScript 类型。
解析属性及其类型。
生成等效的运行时验证器。

来源

使用 TypeScript 的 defineEmits

类似地，宏 defineEmits<T>() 使用 TypeScript 定义组件的 emits。

处理流程与 defineProps 类似，从 TypeScript 声明中提取事件名称和类型。

来源

类型推断与运行时转换

Vue 会智能地将 TypeScript 类型转换为 JavaScript 运行时类型。

TypeScript 类型	推断的运行时类型
字符串	字符串
数字	数字
布尔值	布尔值
数组	数组
功能	功能
对象	对象
自定义类	对象
接口/类型	(解析后的结构)
联合类型	类型数组
字面量类型	精确值

函数 inferRuntimeType 处理此转换。

来源

packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts17-225

支持高级 TypeScript 功能

Vue 的 TypeScript 集成支持高级 TypeScript 功能。

实用类型

Vue 支持 TypeScript 的工具类型，例如：

Partial<T>
Required<T>
Pick<T, K>
Omit<T, K>
Readonly<T>

来源

类型操作

Vue 处理复杂类型操作：

联合类型和交叉类型
映射类型
索引访问类型
模板字面量类型

来源

模板中的 TypeScript 和表达式转换

Vue 通过表达式转换处理模板中的 TypeScript。

函数 transformExpression 处理此过程，为模板表达式中的标识符添加适当的前缀，并处理 TypeScript 特定的结构。

来源

绑定元数据和类型

Vue 使用 BindingTypes 枚举来跟踪组件中绑定的类型。

编译器使用此元数据来：

确定变量是否需要 .value (对于 ref)。
根据绑定类型添加适当的前缀。
优化变量访问模式。

来源