TypeScript 从零基础到精通 · 路线总览

NOTE
本系列共 15 篇文章，面向希望从零系统掌握 TypeScript 的前端/全栈开发者，也适合已会用 JS、想把类型系统真正用顺的工程师。
学习路径：环境 → 基础类型 → 接口/函数 → 类/泛型 → 条件类型 → 联合与守卫 → 类型体操 → 装饰器 → 模块/声明 → 工程化 → 框架集成

为什么要学 TypeScript#

JavaScript 是动态弱类型语言，变量在运行时才能确定类型，这在小项目里很灵活，但在中大型项目和团队协作中会放大两类问题：

错误发现太晚：拼写错误、传参类型不对、undefined 访问，往往要等到浏览器跑起来才暴露。
可读性差、重构成本高：没有类型标注，函数接收什么、返回什么都不清楚，改一处要全文搜索。

TypeScript 是 JavaScript 的类型超集——任何合法的 JS 都是合法的 TS，但它额外提供一套静态类型系统。它在编译期做类型检查，最终编译回纯 JS 运行。类型信息在运行时会被擦除，所以不会带来运行时负担。

一句话：TypeScript 给你的代码加了”编译期的说明书 + 纠错器”，IDE 自动补全、跳转、重构体验也直接起飞。

本路线覆盖什么#

阶段	主题	你能学到
01	环境搭建	安装 tsc、写第一个 TS、tsconfig 初探、npm 脚本
02	基础类型	原始类型、数组/元组、enum、any/unknown/never/void、类型推断
03	接口与类型别名	interface、可选/只读、索引签名、interface vs type
04	函数类型	函数类型表达式、重载、this 类型
05	类与面向对象	修饰符、继承、抽象类、implements、存取器
06	泛型基础	泛型函数/接口/类、约束与默认值
07	泛型进阶与工具类型	条件类型、infer、内置工具类型、映射类型
08	联合与类型守卫	联合收窄、可辨识联合、自定义守卫
09	类型体操入门	模板字面量、递归类型、手写 MyPick 等
10	装饰器	类/方法/属性装饰器、装饰器工厂
11	模块与命名空间	ES Module、动态 import、模块解析
12	声明文件	.d.ts、declare、@types、为无类型库补类型
13	工程化	tsconfig 全解、strict 族、project references
14	框架集成实战	React / Vue 3 / Node 中的 TS 实践

知识地图#

1
TypeScript 从零基础到精通
2

3
├── 环境层（01）
4
│   └── Node / tsc / tsconfig / IDE
5
├── 类型基础（02-03）
6
│   ├── 基础类型：string number boolean array tuple enum unknown never
7
│   └── 结构化类型：interface / type / 交叉 &
8
├── 函数与类（04-05）
9
│   ├── 函数类型、重载、this
10
│   └── class、修饰符、abstract、implements
11
├── 泛型与类型编程（06-09）
12
│   ├── 泛型函数/约束/默认值
13
│   ├── 条件类型 + infer + 映射类型
14
│   ├── 联合收窄 + 类型守卫
15
│   └── 类型体操（手写工具类型）
16
├── 进阶特性（10-12）
17
│   ├── 装饰器
18
│   ├── 模块 / 命名空间
19
│   └── 声明文件 .d.ts
20
└── 工程与实战（13-14）
21
    ├── tsconfig 工程化 / monorepo
22
    └── React / Vue / Node 集成

前置要求#

熟悉 JavaScript（变量、函数、对象、Promise、ES Module）。不懂 JS 直接上 TS 会比较吃力。
本机安装 Node.js（建议 18+） 和 VS Code。
一点命令行基础（npm install、node）。

如果你还不熟 JS，建议先补一下 ES6+ 语法再回来。

怎么读这套路线#

顺序读：前 6 篇是地基，建议一篇不落。
动手敲：每篇的代码不要复制粘贴，自己敲一遍、用 tsc 编译看报错，类型系统的直觉是”被报错喂出来的”。
第 9 篇可缓读：类型体操偏进阶，初学先理解思路，不必钻牛角尖。
当速查：熟悉的部分（如 02、13）可直接当字典查。

小结#

TypeScript 不是”给 JS 加难度”，而是用少量类型标注换取大量的安全性和可维护性。本路线从环境到框架集成，目标是让你不仅能写 TS，更能把类型系统当成”设计工具”来用。

下一篇我们从环境搭起，写出并运行你的第一个 TypeScript 程序。