TypeScript 从零基础到精通

从类型注解到类型体操,系统掌握 TS · 共 15 篇

TS

TypeScript - JavaScript 的类型超集

微软出品,为 JS 加上静态类型系统;大型项目、团队协作与框架(React/Vue/Node)的事实标准

类型系统 泛型 类型体操 tsconfig React Vue
总览 2026/9/27

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

TypeScript 系统学习路线总览:从环境搭建、基础类型、接口与函数类型、类与泛型,到条件类型、类型守卫、类型体操、装饰器、模块、声明文件、工程化 tsconfig,再到与 React/Vue/Node 集成实战的完整学习路径。

1

01 · 环境搭建与第一个 TypeScript 程序

从零搭建 TypeScript 开发环境:安装 Node 与 tsc、编写并编译第一个 hello.ts、理解 tsconfig.json 关键字段、配置 VS Code、用 npm scripts 与 tsx/ts-node 提升开发体验。

2026/9/27 #TypeScript #环境搭建 #tsc
2

02 · 基础类型与类型注解

TypeScript 基础类型全解:原始类型、数组与元组、枚举(含 const enum 陷阱)、any/unknown/never/void 的区别与取舍、类型推断机制、字面量类型,建立"类型即约束"的核心直觉。

2026/9/27 #TypeScript #基础类型 #类型注解
3

03 · 接口与类型别名

TypeScript 结构化类型的核心:interface 的定义、可选与只读成员、索引签名、接口继承、函数类型接口;type 类型别名的用法;interface 与 type 的取舍;交叉类型 & 的组合技巧。

2026/9/27 #TypeScript #interface #type
4

04 · 函数类型深入

TypeScript 函数类型的完整体系:函数类型表达式、参数与返回值注解、可选/默认/rest 参数、函数重载(overload)、this 参数与 this 类型、回调函数中的 this 安全。

2026/9/27 #TypeScript #函数类型 #重载
5

05 · 类与面向对象

TypeScript 类系统详解:class 基础、public/private/protected 修饰符、readonly、参数属性、继承 extends 与 super、abstract 抽象类、implements 实现接口、getter/setter 存取器、静态成员。

2026/9/27 #TypeScript #class #面向对象
6

06 · 泛型基础

TypeScript 泛型入门:为什么需要泛型、泛型函数 identity、泛型约束 extends、泛型默认值、泛型接口与泛型类、多个类型参数。用泛型写出可复用且类型安全的代码。

2026/9/27 #TypeScript #泛型 #generics
7

07 · 泛型进阶与内置工具类型

TypeScript 类型编程核心:条件类型 T extends U ? X : Y、infer 提取类型、映射类型 { [K in keyof T]: ... }、keyof 与索引访问,以及 Partial/Required/Readonly/Pick/Omit/Record/ReturnType 等内置工具类型的原理与用法。

2026/9/27 #TypeScript #条件类型 #infer
8

08 · 联合、交叉与类型守卫

TypeScript 类型收窄机制全解:联合类型与字面量联合、typeof/instanceof/in 收窄、可辨识联合(discriminated union)、自定义类型守卫 is、断言 as 与非空断言 ! 的安全边界。

2026/9/27 #TypeScript #联合类型 #类型守卫
9

09 · 高级类型与类型体操入门

TypeScript 类型体操入门:模板字面量类型、递归类型、索引访问类型进阶,并手搓 MyPick / MyReadonly / MyOmit / MyAwaited 等工具类型,建立"用类型描述类型"的推导思维。

2026/9/27 #TypeScript #类型体操 #模板字面量
10

10 · 装饰器

TypeScript 装饰器全解:装饰器是什么、开启 experimentalDecorators、类/方法/访问器/属性/参数五种装饰器、装饰器工厂、执行顺序,以及与 NestJS 等框架的关系。

2026/9/27 #TypeScript #装饰器 #decorators
11

11 · 模块与命名空间

TypeScript 模块系统:ES Module 的 import/export、默认导出与命名导出、重命名与聚合导出、动态 import()、模块解析 moduleResolution、以及遗留的 namespace 用法与取舍。

2026/9/27 #TypeScript #模块 #ESModule
12

12 · 声明文件与类型生态

TypeScript 声明文件详解:.d.ts 是什么、declare 关键字、第三方库类型 @types 与 DefinitelyTyped、全局声明 declare global、为无类型的 JS 库补声明、编写可发布的类型包。

2026/9/27 #TypeScript #声明文件 #d.ts
13

13 · 工程化:tsconfig 全解与构建

TypeScript 工程化核心:tsconfig.json 关键字段逐解、strict 严格族(strictNullChecks 等)、target/lib/module、outDir/rootDir、路径别名、project references 实现 monorepo 类型共享,以及与 Vite/webpack/esbuild 的职责边界。

2026/9/27 #TypeScript #tsconfig #strict
14

14 · 与框架/运行时集成实战

TypeScript 在真实项目中的落地:React + TS(props 与事件类型、泛型组件、Hooks 类型)、Vue 3 + TS(defineComponent、ref/reactive、组合式 API 类型)、Node + TS(类型化 req/res、tsx 运行),以及常见坑与最佳实践清单。

2026/9/28 #TypeScript #React #Vue3

💡 学习建议

按阶段顺序阅读,每篇结束把代码在本地敲一遍并跑通(tsc 或 ts-node)。基础篇(01-06)务必动手,类型系统一旦建立直觉后续会非常顺;类型体操篇(09)偏进阶,初学可先略读;工程化篇(13)与框架集成篇(14)建议结合你的实际项目边学边用。已经熟悉的部分可直接当速查表。