TypeScript 入门到进阶教程

第一章：为什么要学 TypeScript

JavaScript 是动态类型语言——变量类型在运行时确定。这带来灵活性，但在大型项目中是灾难：

• 重构一个函数签名，不知道哪些调用会炸
• 后端返回的数据结构，只能靠注释来约定
• undefined is not a function 是最常见的运行时错误

TypeScript 在 JS 之上加了类型系统，编译后就变成了干净的 JS。你可以把它理解成「带类型检查的 JS」。

第二章：核心类型一览

2.1 基础类型

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10]; // 元组

2.2 枚举

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

2.3 any / unknown / never

• any：关闭类型检查（尽量不用）
• unknown：安全版 any，必须先类型守卫才能使用
• never：永远不会到达（抛异常、死循环）

2.4 类型断言

const el = document.getElementById("app") as HTMLDivElement;

第三章：Interface vs Type

两者大部分场景可互换，但有细微差别：

	Interface	Type
扩展方式	extends	& 交叉
声明合并	同名自动合并	报错
能用联合	否	是
官方推荐	优先 Interface	需要联合/交叉时用 Type

第四章：泛型

泛型让你写出可复用的类型安全代码：

function identity<T>(arg: T): T { return arg; }

interface ApiResponse<T> {
  data: T;
  code: number;
  message: string;
}

第五章：工程化进阶

5.1 tsconfig.json 关键配置

• strict: true —— 开启所有严格检查（强烈推荐）
• paths —— 路径别名
• declaration: true —— 生成 .d.ts

5.2 声明文件

为无类型的 JS 库写 .d.ts：

declare module "my-js-lib" {
  export function doStuff(x: number): string;
}

5.3 与主流框架集成

• React：.tsx + @types/react
• Vue 3：原生 TS 支持，defineProps<T>()
• Node.js：@types/node
• Express：@types/express

思考题

1. any 和 unknown 的区别是什么？什么时候该用 unknown？
2. 为什么 Readonly<User> 能工作？TypeScript 内部是怎么实现的？
3. 大型 JS 项目如何渐进式迁移到 TS？分几步？