TypeScript 教程 · 入门导览

给 Java / 后端工程师的 TypeScript 系统入门

基于 TypeScript 6.0（2026-03）· 概念为主 · 约 2 小时 · 代码为说明性片段，行为已对照 TS 语义核对（标 ✗ 处是故意演示的编译/运行错误，非笔误）。本教程不是 API 速查，而是帮你装上一套关于「类型在 TS 里到底是什么」的心智模型。

·适合谁

这份教程为已有静态类型语言经验、但没系统写过 JS/TS 的工程师写。三条前置能力：

  • 能读写 Java（或 C# / Kotlin / Go 等）后端代码，理解类、接口、泛型、异常这些概念。
  • 知道「静态类型」「编译期检查」是什么，用过 IDE 的类型提示与重构。
  • 没有系统写过 JavaScript——对它的运行时（null/undefined、真值判断、this、原型、异步）不熟悉，甚至有点怕。

第三条很关键：TypeScript 是 JavaScript 的超集，TS 的一半难点其实是底下那层 JS 运行时。整份教程会反复用「TS 类型 vs Java 类型」做对照，把你已有的 Java 直觉，一条条校准到 TS 上——哪些能照搬，哪些会害你。

·不适合谁

  • 完全的编程新手（没写过任何带类型的语言）——本教程默认你已经懂类型、泛型、接口。先学一门基础语言更划算。
  • 已熟练写 JS/TS、想钻类型体操的人——条件类型、映射类型、模板字面量类型的深水区不在这里。去看 type-challenges 和《Effective TypeScript》。
  • 只想查某个 API 怎么写——直接看 官方 Handbook 更快。

·读完之后你能做到什么

这份教程想给你的，是一个有五年经验的工程师都未必从官方文档里直接读到的东西：

把 TS 的类型系统看成一层「编译期、按结构匹配、运行时被擦除」的图纸——一旦装上这个模型，as 为何不做检查、为何要用 zod 校验外部数据、enum 为何特殊、泛型在运行时为何是空的，都不再需要死记，而是同一条原理的推论。

具体地，读完你能：

  • 给一段无类型的 JS 加上正确的类型注解，并说清哪些该手写、哪些该交给类型推断。
  • 判断两个类型能不能互相赋值——用结构规则推，而不是看它们叫什么名字。
  • 在 interface / type、any / unknown、enum / 字面量联合之间，按场景选对。
  • 说出一段 TS 编译成 JS 后「运行时还剩什么」，并据此判断 instanceof、反射这类操作能不能用。
  • 配置 strict 模式，并讲清它打开了哪些检查、各自防住哪种错误。

一句话本质 · 整篇教程的核心

TypeScript 的类型是一层只存在于编译期、按「结构形状」匹配的图纸；代码真正跑起来之前它会被完全擦除——「类型世界」和运行时的「值世界」是两个分开的世界。

对 Java 开发者，这一条最反直觉：你习惯了「类型按名字/继承认定 + 运行时有反射」，TS 两条都反过来。下文所有看起来奇怪的设计，都从这一条推得出来。

读之前 · 警惕「流畅幻觉」

这份教程读起来会很顺，因为概念都拆小了。但「读着顺」不等于「学会了」。认知科学（Bjork）把这叫流畅幻觉——当下表现好，不代表记得住、用得上。出现下面三种感觉冒出来时，请停下来做自测：

· 「我读得很顺」——那是熟悉感，不是掌握。熟悉的字面 ≠ 能自己推导。
· 「我做题很快」——多半碰上的是套路题型，换个壳就卡。
· 「我没卡壳」——多半是还没碰到真正的难点（结构化、擦除）。

每章末尾的 self-check 和第 3 章的判别题，是用来戳破这层幻觉的。先合上教程作答，再展开对照——直接看答案等于把题目当正文又读了一遍。

·概念地图

下面这张图是整份教程挂载细节的骨架。第 1 章讲左右两框里的零件，第 2 章讲中间那条「擦除边界」为什么存在、代价是什么。

TypeScript = JavaScript + 一层编译期类型 编译期 · 类型世界 tsc 检查后整框擦除 运行时 · 值世界 真正执行的 JavaScript 类型注解 / 推断 interface · type 联合 · 字面量 · 泛型 any · unknown · never JS 值与变量 函数执行 narrowing 运行时辨型 enum 少数会留到运行时的类型语法 tsc 编译 类型丢弃
图 0TypeScript 的两个世界，以 tsc 编译为边界。注意三件事：① 所有类型构造都只在左框；② 左框在编译后整体消失，运行时只剩右框的 JS；③ enum 是少数会「漏」到右侧、编译成真实 JS 对象的类型语法——记住这个例外，第 2 章会专门讲它为什么特殊。

·学习路径建议

顶部那条 00 — 01 — 02 — 03 面包屑就是主线，每章开头都会重画并高亮当前位置。按目标可以走不同路线：

  • 只想理解类型系统在干什么：第 1 章（概念）→ 第 2 章前半（结构化 + 擦除两节）。约 1 小时。
  • 要在团队里做选型 / code review（比如定 interface 还是 type、要不要用 enum）：第 1 章 §1.4–§1.5 + 第 2 章全章 + 第 3 章判别题。
  • 要能读懂别人写的 TS 代码：第 1 章全章（重点 §1.8 收窄）→ 第 2 章 §2.2 擦除 → 第 3 章。

·目录

·学完之后

这份教程止步于「语言基础」。装上这套模型后，下一步按你的方向选：

  • 类型进阶——条件类型、映射类型、infer、工具类型源码。在「按结构匹配」之上加「类型层面的编程」。
  • 运行时校验——zod / valibot。把「擦除」这一课补上：外部数据进系统时如何重建类型保证。
  • 工程化——tsconfig 深配置、monorepo、tsx/打包器、声明文件 .d.ts 编写。把单文件的类型知识扩展到真实项目。
  • 框架方向——Node 后端（Express/Nest）、React 前端、或 AI Agent SDK。它们都是 TS-first，结构化 + 泛型在这里大量出现。