源代码 (.ts/.tsx) → 解析器 → AST → 类型检查器 → 转换器/发射器 → JavaScript (.js) + 声明文件 (.d.ts)
                     ↑          ↑           ↑
                  Scanner   Binder     符号(Symbols)

// 简化的编译流程概念
function compile(sourceCode: string): { js: string; dts: string } {
  // 1. 词法分析 -> 令牌流
  const tokens = scanner.scan(sourceCode);
  
  // 2. 语法分析 -> 抽象语法树(AST)
  const ast = parser.parse(tokens);
  
  // 3. 绑定 -> 创建符号和类型
  const binder.bind(ast);
  
  // 4. 类型检查 -> 验证类型正确性
  const typeChecker.check(ast);
  
  // 5. 发射 -> 生成JavaScript和声明文件
  const js = emitter.emitJavaScript(ast);
  const dts = emitter.emitDeclarationFile(ast);
  
  return { js, dts };
}

类型系统
├── 基础类型 (string, number, boolean...)
├── 对象类型 (interfaces, classes)
├── 联合/交叉类型 (T | U, T & U)
├── 泛型 (Array<T>)
├── 类型操作 (typeof, keyof, mapped types)
└── 条件类型 (T extends U ? X : Y)

interface Person {
  name: string;
  age: number;
}

interface Employee {
  name: string;
  age: number;
  salary: number;
}

// 兼容 - Employee 具有 Person 的所有属性
const person: Person = { name: "John", age: 30, salary: 50000 } as Employee;

// 错误 - Person 缺少 salary 属性
const employee: Employee = { name: "John", age: 30 }; // Error

// TypeScript 代码
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 编译后的 JavaScript 代码
function greet(name) {
  return "Hello, " + name + "!";
}
// 所有类型信息都被移除

// 开始可以是无类型的 JavaScript
function add(a, b) {
  return a + b;
}

// 逐步添加类型
function add(a: number, b: number): number {
  return a + b;
}

// 映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 条件类型
type NonNullable<T> = T extends null | undefined ? never : T;

// 模板字面量类型
type EventName<T extends string> = `${T}Changed`;
type Concat<S1 extends string, S2 extends string> = `${S1}${S2}`;

语言服务
├── 自动完成
├── 重构工具
├── 快速修复
├── 导航功能
└── 实时错误检查

// 当用户在编辑器中输入时：
1. 编辑器发送更新到语言服务
2. 语言服务解析代码并创建AST
3. 类型检查器分析代码
4. 语言服务提供:
   - 当前位置的自动完成建议
   - 错误和警告的波浪线
   - 重构选项
   - 代码导航信息

// tsconfig.json 中的模块配置
{
  "compilerOptions": {
    "module": "commonjs", // 或 "es2015", "umd", "amd", "system"
    "target": "es2017",   // 输出的JavaScript版本
    "moduleResolution": "node" // 或 "classic"
  }
}

import * as ts from "typescript";

// 使用编译器API
const program = ts.createProgram(["file.ts"], {
  target: ts.ScriptTarget.ES2015,
  module: ts.ModuleKind.CommonJS
});

// 获取类型检查器
const checker = program.getTypeChecker();

// 遍历AST
const sourceFile = program.getSourceFile("file.ts");
ts.forEachChild(sourceFile, node => {
  // 处理每个节点
});

声明文件体系
├── 内置lib.d.ts文件 (JavaScript标准库)
├── @types/*包 (DefinitelyTyped)
├── 自动生成的声明文件 (declaration: true)
└── 手写的声明文件

// 示例：与构建工具集成
const { createWatchProgram } = require("typescript");

const host = ts.createWatchCompilerHost(
  "tsconfig.json",
  {},
  ts.sys,
  ts.createEmitAndSemanticDiagnosticsBuilderProgram
);

// 创建监视程序
const watchProgram = ts.createWatchProgram(host);

增量编译流程
1. 首次编译 -> 创建项目状态快照
2. 文件更改 -> 仅重新检查受影响的文件
3. 重用之前的类型检查结果
4. 显著减少编译时间