TypeScript 深入解析
一、实现原理
TypeScript 的核心是编译时类型检查，并支持增量编译以提高大型项目的编译效率。
-
解析 (Parsing)
- 将 TypeScript 源代码解析为 Token 标记流。
- 基于 Token 构建抽象语法树 (AST)。
-
绑定与类型检查 (核心)
- 基于 AST，识别所有声明（变量、函数、类等），创建 Symbol 表，建立声明与符号之间的关联。
- 进行全面的类型检查，包括：
- 类型推断：自动推断变量或表达式的类型。
- 类型兼容性检查：验证赋值、函数调用等操作中的类型是否兼容。
- 类型分析：检查类型的使用是否正确。
-
发射 (Emit)
- 通过类型检查后，将 AST 编译（转换）为 JavaScript 代码。
- 此过程会进行类型擦除，移除所有 TypeScript 特有的类型语法，仅保留纯 JavaScript 代码。
二、核心概念
1. 基础类型
- 原始类型：
string,number,boolean,null,undefined,symbol - 数组：
number[]或Array<number> - 元组：
[number, string]（固定长度和类型），可选元素：[number, string, boolean?] - 枚举：
enum Color { Red, Blue, Green } - 特殊类型：
any,void,never
2. 核心概念
- 类型注解：
let userCode: number - 类型别名与联合类型：
type ID = number | string - 交叉类型：
type Combined = Foo & Bar - 泛型：
function getName<T>(name: T): T { return name; }
3. 面向对象与模块特性
- 接口：
interface User { name: string; age: number; } - 类与修饰符：
class支持private,public,protected等访问修饰符。 - 类型断言：
<Type>value 或 value as Type - 模块：使用
import/export导入导出，支持类型导出：export type Name = number | string - 命名空间：
namespace App {}（现代代码中较少使用，模块是首选）
4. 进阶类型操作
- 装饰器 (Decorator)：
@decorator（实验性特性，需在配置中启用） keyof操作符：type Keys = keyof MyObj，获取对象所有键的联合类型。in操作符：在类型上下文中用于遍历联合类型，生成映射类型。- 索引访问类型：
type Age = Person["age"]，通过索引获取特定属性的类型。 - 条件类型：
T extends U ? X : Y，根据类型条件返回不同类型。 - 模板字符串类型：
type T = "A" | "B"; type U = `${T}_id`; // 结果为 "A_id" | "B_id"
5. 实用工具类型
TypeScript 内置了一系列常用的工具类型，用于常见的类型转换操作：
Partial<T>：将类型T的所有属性变为可选。Required<T>：将类型T的所有属性变为必选。Readonly<T>：将类型T的所有属性变为只读。Pick<T, K>：从类型T中选取一组属性键K来构造新类型。Omit<T, K>：从类型T中排除一组属性键K来构造新类型。ReturnType<typeof func>：获取函数func的返回值类型。typeof（类型操作符）：在类型上下文中使用，获取变量或属性的类型。instanceof（运行时操作符）：用于检查一个对象是否是某个类的实例。
6. Vue 相关：Props 默认值
在 Vue 3 的 <script setup> 语法中，可以使用 withDefaults 为基于类型的 defineProps 提供默认值：
const props = withDefaults(defineProps<{title?: string,count?: number
}>(), {title: 'Default Title',count: 0
})