Damnatiox
DOCUMENT / published

语言基础学习路线:以 TypeScript 建立可迁移的编程模型

语言基础学习路线:以 TypeScript 建立可迁移的编程模型 本路线把 TypeScript 当作第一门“工程语言”来学习:先理解它与 JavaScript 运行时的关系,再掌握静态类型、模块、异步与工程工具,最后用 Java、Python、C++ 做横向校准。目标不是记住语法表,而是能回答三个问题: 代码在哪个运行时执行、错误在哪个阶段暴露、类型信息是否会进入产物 。 1. 路线结构 第一阶段:能运行,也知道运行了什么 1. 安装

语言基础 2026/8/267 分钟阅读
# 语言基础# TypeScript# 语言基础学习路线

语言基础学习路线:以 TypeScript 建立可迁移的编程模型

本路线把 TypeScript 当作第一门“工程语言”来学习:先理解它与 JavaScript 运行时的关系,再掌握静态类型、模块、异步与工程工具,最后用 Java、Python、C++ 做横向校准。目标不是记住语法表,而是能回答三个问题:代码在哪个运行时执行、错误在哪个阶段暴露、类型信息是否会进入产物

1. 路线结构

flowchart LR A[环境与运行模型] --> B[值、对象与函数] B --> C[联合、收窄与泛型] C --> D[类、模块与声明文件] D --> E[高级类型与工程配置] E --> F[测试、发布与迁移] F --> G[JS / Java / Python / C++ 对照]

第一阶段:能运行,也知道运行了什么

  1. 安装 Node.js 与项目级 TypeScript。
  2. tsc --noEmit 做类型检查,用 tsc 或构建器生成 JavaScript。
  3. 观察 .ts -> .js,确认接口、类型别名和大多数类型标注会被擦除。
  4. 区分 ECMAScript 语言、Node.js/浏览器运行时和 TypeScript 检查器。

第二阶段:建立日常类型模型

掌握原始类型、数组、元组、对象、函数、可选属性、字面量类型、unknownnever、联合与交叉类型。所有外部输入先视为 unknown,完成运行时验证后再缩窄。

第三阶段:表达可复用约束

用泛型、keyof、索引访问、映射类型、条件类型和模板字面量类型表达“类型之间的关系”。高级类型的价值是让非法状态更难表示,而不是制造难以维护的类型谜题。

第四阶段:交付真实项目

理解 ESM、NodeNext、Bundler 模块解析,编写或消费 .d.ts,配置严格模式,建立 typecheck + test + lint + build 流水线,并完成一个带运行时校验的 API 客户端项目。

2. 建议完成顺序

顺序 目录 完成标准
1 TypeScript语言基础 00–05 能独立创建严格模式项目并解释编译产物
2 TypeScript语言基础 06–10 能为领域对象、函数、类和模块设计类型
3 TypeScript语言基础 11–16 能读懂高级类型并建立工程质量门禁
4 TypeScript语言基础 17 完成综合项目和自测清单
5 TypeScript跨语言对照 能准确判断不同语言概念能否直接类比

3. 贯穿全程的正确性原则

  • TypeScript 不验证网络数据。 类型断言不会改变值,JSON、表单、环境变量和数据库返回值仍要在运行时校验。
  • 类型安全有边界。 any、不受控断言、错误的声明文件及可变数组的某些兼容规则都可能绕过保证。
  • 模块配置必须匹配真实运行时。 浏览器、Node.js ESM、CommonJS 和 Bundler 对路径、扩展名及包导出的解释并不相同。
  • readonly 主要是静态、浅层约束。 它不等于 Object.freeze,也不等于深不可变数据结构。
  • 比较语言时先比较执行模型。 TypeScript 最终执行 JavaScript;Java 运行 JVM 字节码;Python 通常由解释器/虚拟机执行动态对象模型;C++ 通常编译为本机代码。

4. 推荐练习节奏

每篇文档至少完成“阅读—抄写—改错—解释”四步:

  1. 运行正确示例。
  2. 主动删除一个收窄、约束或配置项,观察诊断。
  3. 查看生成的 JavaScript,标出哪些语法保留、哪些类型被擦除。
  4. 用自己的话解释静态类型能保证什么、仍需在运行时检查什么。

5. 从零学习时先补哪些 JavaScript 基础

TypeScript 不替代 JavaScript。进入高级类型之前,至少应能独立解释并使用:

  • 词法作用域、闭包、const/let、对象与数组的引用语义。
  • ===、真值判断、空值合并、可选链和常见类型转换。
  • 函数是一等对象、箭头函数与普通函数的 this 差异。
  • 原型链、类语法、属性描述符与私有字段。
  • Promise、微任务、async/await、错误传播与 try/finally
  • ESM 的静态导入、动态导入、live binding 与循环依赖风险。
  • 浏览器或 Node.js 提供的 API 不属于 ECMAScript 核心语言。

遇到“TypeScript 为什么这样运行”的问题,应先把类型标注去掉,观察剩余 JavaScript。若问题仍存在,它大概率属于 JavaScript 或 host,而非 TypeScript 类型系统。

6. 三层笔记法

每个概念用三栏记录,避免把检查器能力和运行时事实混在一起:

层次 要回答的问题 例子
值/运行时 程序执行时真实存在什么? class 构造函数、对象、Promise
类型/检查器 哪些程序会被接受或拒绝? interface、联合、控制流收窄
工具/构建 源码如何被解析、转换和发布? tsconfig、moduleResolution、声明 emit

例如 readonly 在类型层限制写入,却不自动调用 Object.freeze.d.ts 在工具层帮助模块解析,却不创建 JavaScript 实现;target 改变输出语法,却不安装运行时 polyfill。

7. 项目阶梯

P0:命令行数据转换器

读取一个 JSON 文件,将输入保持为 unknown,验证后输出统计结果。验收点:没有裸 any,错误消息包含字段路径,配置在严格模式下通过。

P1:类型安全 HTTP 客户端

实现 URL 构造、超时、取消、HTTP 状态分类、JSON 解析器和可辨识错误联合。验收点:类型不会把未经验证的响应直接当作领域对象。

P2:可发布 npm 库

输出 ESM JavaScript、source map 与 .d.ts,配置 exports,用空白消费者项目验证安装。验收点:公共声明不泄漏内部路径,最低运行时版本与 target/lib 一致。

P3:跨包应用

拆分 domain、service、adapter 三个包,用项目引用或工作区建立依赖边界。验收点:无运行时循环依赖,类型导入使用 import type,增量构建与全量构建结果一致。

8. 如何阅读编译器错误

不要只看最后一句“不可赋值”。从外到内定位:当前赋值/调用的源类型是什么、目标类型是什么、第一处不兼容成员在哪里、该成员又为何不兼容。复杂泛型错误先给中间表达式命名,并在局部增加显式标注,让诊断从巨大推导树缩小到具体边界。

TypeScript
type Input = { id: string; retries?: number } const candidate = { id: "task-1", retries: 3, } satisfies Input

satisfies 很适合检查配置对象,同时保留字面量自身精确信息。若错误来自第三方声明,先做最小复现并核对包版本,而不是立即使用双重断言。

9. 学习完成后的能力标准

  • 能从零创建项目,解释每个关键 tsconfig 选项为何匹配目标运行时。
  • 能把外部输入从 unknown 转换成已验证领域对象。
  • 能用可辨识联合表达状态,并用 never 保证穷尽。
  • 能设计泛型,让输入输出关系被保留,而不是滥用 <T>
  • 能诊断 ESM、NodeNext、Bundler 与声明文件路径问题。
  • 能明确说出 TypeScript 对比 JavaScript、Java、Python、C++ 的同名概念边界。
  • 能通过类型检查、运行测试、构建和真实消费测试交付项目。

10. 版本范围

本路线以 2026-08 的 TypeScript 7.0 与现行官方 Handbook 为参考,同时标注 TypeScript 6/7 迁移边界。语言概念对 5.x 项目仍普遍适用;涉及默认配置、废弃选项和编译器 API 时,以项目锁定版本的发布说明为准。