TypeScript的个人理解

TypeScript 深入解析

一、实现原理

TypeScript 的核心是编译时类型检查，并支持增量编译以提高大型项目的编译效率。

1. 解析 (Parsing)

   • 将 TypeScript 源代码解析为 Token 标记流。
   • 基于 Token 构建抽象语法树 (AST)。

2. 绑定与类型检查 (核心)

   • 基于 AST，识别所有声明（变量、函数、类等），创建 Symbol 表，建立声明与符号之间的关联。
   • 进行全面的类型检查，包括：
     • 类型推断：自动推断变量或表达式的类型。
     • 类型兼容性检查：验证赋值、函数调用等操作中的类型是否兼容。
     • 类型分析：检查类型的使用是否正确。

3. 发射 (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
})