TypeScript 专题

TypeScript
类型系统
工程实践

开篇：用正确的方式学习 TypeScript

最近，软件开发设计公司 The Software House 针对 2022 年前端市场状态的调查显示，84% 的受访者都在使用 TypeScript，43% 的受访者甚至认为 TypeScript 将超越 JavaScript 成为前端开发的主要语言。

第 02 篇13 分钟

工欲善其事：打造最舒适的 TypeScript 开发环境

在正式开始小册的学习前，我们还有一件事要做，那就是搭建 TypeScript 的开发环境。一个舒适、便捷且顺手的开发环境，不仅能大大提高学习效率，也会对我们日常的开发工作有很大帮助。

第 03 篇16 分钟

进入类型的世界：理解原始类型与对象类型

通常来说，学习一件新事物的较好方式是和你已掌握的做对比，通过二者之间通用的概念帮你快速熟悉新的事物。比如，在掌握了 Vue 以后再去学习 React，对于组件通信、状态管理、插槽等这些二者共有的概念，你会感到非常熟悉。同样的，这一章我们会从 JavaScript 的既有概念开始学

第 04 篇10 分钟

掌握字面量类型与枚举，让你的类型再精确一些

了解了原始类型与对象类型以后，我们已经能完成简单场景的类型标注了。但这还远远不够，我们还可以让这些类型标注更精确一些。比如，有一个接口结构，它描述了响应的消息结构：

第 05 篇19 分钟

函数与 Class 中的类型：详解函数重载与面向对象

在前面的入门环节中，我们了解了日常开发中最常用的、基础的变量类型标注，包括原始类型、对象类型、字面量类型与枚举类型。而实际开发中还有一个重要的朋友：**函数**。函数能够帮助我们进一步抽离与封装代码逻辑，所以掌握函数类型必不可少。如果说函数代表着面向过程的编程，那么 Class

第 06 篇17 分钟

探秘内置类型：any、unknown、never 与类型断言

此前我们学习基础类型标注、字面量类型与枚举、函数与 Class 等概念时，实际上一直在用 JavaScript 的概念来进行映射，或者说这可以看作是 JavaScript 代码到 TypeScript 代码的第一步迁移。而这一节，我们要学习的则是，**如何使用 TypeScrip

第 07 篇14 分钟

类型编程好帮手：TypeScript 类型工具（上）

上一节，我们了解了 TypeScript 中的内置类型 any、unknown 与 never，也提到这些内置类型实际上是最基础的“积木”。那想要利用好这些“积木”，我们还需要一些实用的类型工具。它们就像是锤子、锯子和斧子，有了它们的帮助，我们甚至可以拼装出摩天大楼！

第 08 篇14 分钟

类型编程好帮手：TypeScript 类型工具（下）

上一节我们主要了解了类型别名、联合类型与交叉类型、索引类型与映射类型这几样类型工具。在大部分时候，这些类型工具的作用是**基于已有的类型去创建出新的类型**，即类型工具的重要作用之一。

第 09 篇16 分钟

类型编程基石：TypeScript 中无处不在的泛型

从这一节开始，我们正式进入到「类型编程进阶篇」的学习。能来到这里意味着你已经对 TypeScript 比较熟悉，甚至开始爱不释手了。但也意味着课程难度有所提升，知识变得更加复杂了。不过，你也不必担心，我会和你一起将思维调整到类型的频道，去认识这些类型世界的新朋友们！

第 10 篇10 分钟

结构化类型系统：类型兼容性判断的幕后

在 TypeScript 中，你可能遇见过以下这样“看起来不太对，但竟然能正常运行”的代码：

第 11 篇14 分钟

类型系统层级：从 Top Type 到 Bottom Type

如果说类型系统是 TypeScript 中的重要基础知识，那么类型层级就是类型系统中的重要概念之一。对于没有类型语言经验学习的同学，说类型层级是最重要的基础概念也不为过。

第 12 篇17 分钟

类型里的逻辑运算：条件类型与 infer

在完成类型层级一节的学习后，这一节学习条件类型对你来说已经没有什么困难了，因为你已经完全理解了它的判断逻辑！那我们直接开始这一节的学习吧！

第 13 篇17 分钟

内置工具类型基础：别再妖魔化工具类型了！

在很多时候，工具类型其实都被妖魔化了。它仿佛是武林中人人追捧的武功秘籍，修炼难度极其苛刻，掌握它就能立刻类型编程功力大涨，成为武林盟主傲世群雄。然而，这是非常错误的想法。

第 14 篇7 分钟

反方向类型推导：用好上下文相关类型

TypeScript 拥有非常强大的类型推导能力，不仅会在你声明一个变量时自动推导其类型，也会基于函数内部逻辑自动推导其返回值类型，还会在你使用 typeof 、instanceof 等工具时自动地收窄类型（可辨识联合类型）等等。这些类型推导其实有一个共同点：**它们的推导依赖开

第 15 篇14 分钟

函数类型：协变与逆变的比较

在 [全面梳理类型系统的层级关系：从 Top Type 到 Bottom Type](https://juejin.cn/book/7086408430491172901/section/7100488161263878177) 一节中，我们分析了 TypeScript 类型系统

第 16 篇8 分钟

了解类型编程与类型体操的意义，找到平衡点

在学习 TypeScript 时，很多同学可能会遇到这些疑惑：

第 17 篇24 分钟

内置工具类型进阶：类型编程进阶

此前，我们已经了解了 TypeScript 中内置工具类型的实现原理，以及它们的扩展方向。这一节，我们会在这些基础上逐一实现这些扩展方向。

第 18 篇12 分钟

基础类型新成员：模板字符串类型入门

上一节，我们对内置工具类型的进阶方向进行了实现，它们中的部分工具类型确实相对烧脑和难以理解。这一节，我们稍作驻足，放慢节奏，来学习 TypeScript 的一个特殊存在：**模板字符串类型**。

第 19 篇18 分钟

类型编程新范式：模板字符串工具类型进阶

上一节，我们了解了模板字符串类型的基础内容，它与数个类型工具的协作，以及将作为本节核心内容的，**模板字符串类型与模式匹配产生的化学反应**。

第 20 篇22 分钟

工程层面的类型能力：类型声明、类型指令与命名空间

我们已经结束了 TypeScript 类型能力的学习，这一节将进入 TypeScript 的实战应用篇。实战篇主要包括了工程能力、框架集成、ECMAScript 语法、TSConfig 解析以及 Node API 开发这五个部分。

第 21 篇22 分钟

在 React 中愉快地使用 TypeScript：内置类型与泛型坑位

这一节我们要介绍的是 React 项目中的 TypeScript 集成，React 和 TypeScript 能进行非常紧密而自然的协作，毕竟 tsx 文件本质上也是一个 ts 文件，因此可以直接享受到 TypeScript 的类型检查能力。也因此，在 React 中使用 Typ

第 22 篇25 分钟

让 ESLint 来约束你的 TypeScript 代码：配置与规则集介绍

关于 ESLint 是什么，我想应该没有过多介绍的必要，即使你没有主动了解过它，也一定被动接触过。它带给你的印象并不一定很好，有可能是满屏的红色波浪线，也可能是成千上万条的报错输出。但你可能也很享受经过 ESLint 检查与格式化后工工整整的代码，那简直叫一个赏心悦目。

第 23 篇9 分钟

全链路 TypeScript 工具库，找到适合你的工具

在前面两节，我们了解了 TypeScript 在 React 与 ESLint 中的集成，而在实际项目开发时，我们还会接触许多与 TypeScript 相关的工具。如果按照作用场景来进行划分，这些工具大致可以划分为开发、校验、构建、类型四类。在这一节我们将介绍一批 TypeScr

第 24 篇17 分钟

说说 TypeScript 和 ECMAScript 之间那些事儿

这一节，我们来讲解 TypeScript 与 ECMAScript 之间的关系。

第 25 篇25 分钟

装饰器与反射元数据：了解装饰器基本原理与应用

上一节我们了解了 TypeScript 与 ECMAScript 的关系，以及可选链与空值合并这两个 TypeScript 中的 ECMAScript 提案。其实，还有一个 ECMAScript 提案也已经成为 TypeScript 中相当重要的一部分，它就是装饰器。

第 26 篇17 分钟

控制反转与依赖注入：基于装饰器的依赖注入实现

上一节学习了装饰器与反射元数据的基本使用后，这一节我们将在其基础上来了解**控制反转**、**依赖注入**等概念，我们会使用装饰器配合反射元数据实现这一设计模式，以及实现基于装饰器的路由体系与一个简单的控制反转容器。

第 27 篇23 分钟

TSConfig 全解（上）：构建相关配置

在前面的内容中，我们已经学习了 TypeScript 在工程中的许多实践，包括类型声明、TypeScript 与 React、ESLint 的结合使用以及装饰器等。这些实践更像是上层建筑，默认是在一个已经基本配置完环境的 TypeScript 项目中进行的。这一节，我们深入下层基

第 28 篇23 分钟

TSConfig 全解（下）：检查相关、工程相关配置

上一节我们介绍了构建相关的 TSConfig 配置，包括源码相关、解析相关、产物相关等几个部分，这一节我们会接着来介绍类型检查与工程相关的 TSConfig。

第 29 篇17 分钟

基于 Prisma + NestJs 的 Node API ：前置知识储备

在这一节，我们会使用 TypeScript 来开发一个 Node API，并将它部署在服务器上。技术选型方面，我们使用 [NestJs](https://link.juejin.cn/?target=https%3A%2F%2Fdocs.nestjs.com%2F) 作为框架，[

第 30 篇15 分钟

基于 Prisma + NestJs 的 Node API ：项目开发与基于 Heroku 部署

上一节我们已经完成了 NestJs 与 Prisma 的基础知识储备，也就是项目的开发阶段所需要的知识。而这一节，我们来了解部署阶段，我们将使用一个面向个人开发者基本免费的平台 Heroku 进行应用的最终部署，这主要是为了让没有服务器与数据库的同学（比如我）也能顺利地完成这一节

第 31 篇23 分钟

玩转 TypeScript AST：AST Checker 与 CodeMod

## 前置知识：Babel 的基本工作流程

第 32 篇5 分钟

感谢相伴：是结束，也是开始

在本节开始前，我想先感谢每一位读者，感谢你们的肯定与支持，也希望小册中的内容能够让你收获明显的成长。

第 33 篇3 分钟

漫谈篇：面试中的 TypeScript

面试的重要原则之一就是 WHY，在回答一个知识点的同时，如果能把这个知识点背后的存在原因也讲述清楚，很难不让面试官暗暗点头为你折服，因此你可以考虑从以下这么几个角度出发来进行扩展。