--- theme: awesome-green highlight: a11y-light --- [12.7W 播放量的 TS 动画版进阶教程合集来了！](https://juejin.cn/post/7095547569777934367)，通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！ > **[不想看文字，那就直接来看视频吧](https://www.bilibili.com/video/BV1B34y1E7tm/)**：https://www.bilibili.com/video/BV1B34y1E7tm/ 你了解过模板字面量类型么？你想知道如何利用模板字面量类型，来减少 TypeScript 项目中的重复代码么？如果想的话，阅读完本文之后，也许你就懂了。假设我们想要定义一种类型来描述 CSS padding 规则，如果你了解 TypeScript 类型别名和联合类型的话，能很容易定义出 CssPadding 类型。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4e4a1d85bc945f993589d95fb6ab92a~tplv-k3u1fbpfcp-watermark.image?) ```typescript type CssPadding = | "padding-left" | "padding-right" | "padding-top" | "padding-bottom"; ``` 但如果我们想要继续定义一种新的类型来描述 CSS margin 规则，你是不是立马想到与定义 CssPadding 类型一样的方式。 ```typescript type MarginPadding = | "margin-left" | "margin-right" | "margin-top" | "margin-bottom"; ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30da3e73d57540968784e22187fa6398~tplv-k3u1fbpfcp-watermark.image?) 对于以上定义的两种类型来说，虽然它们都能满足我们的需求。但在定义这两种类型的过程中，仍然存在一些重复的代码。那么如何解决这个问题呢？这时我们可以使用 TypeScript 4.1 版本引入了新的模板字面量类型，具体的使用方式如下： ```typescript type Direction = "left" | "right" | "top" | "bottom"; type CssPadding = `padding-${Direction}`; type MarginPadding = `margin-${Direction}`; ``` ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/507a39d3df82491f90e14cbb80251a87~tplv-k3u1fbpfcp-watermark.image?) 看完以上代码，是不是觉得简洁很多。与 JavaScript 中的模板字符串类似，模板字面量类型被括在反引号中，同时可以包含 `${T}` 形式的占位符，其中类型变量 T 的类型可以是 `string`、`number`、`boolean` 或 `bigint` 类型。模板字面量类型不仅为我们提供了连接字符串字面量的能力，而且还可以把非字符串基本类型的字面量转换为对应的字符串字面量类型。下面我们来举一些具体的例子： ```typescript type EventName = `${T}Changed`; type Concat = `${S1}-${S2}`; type ToString = `${T}`; type T0 = EventName<"foo">; // 'fooChanged' type T1 = Concat<"Hello", "World">; // 'Hello-World' type T2 = ToString<"阿宝哥" | 666 | true | -1234n>; // "阿宝哥" | "true" | "666" | "-1234" ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/346480799b014bc7b43094017053916c~tplv-k3u1fbpfcp-watermark.image?) 对于上述的例子来说，其实并不复杂。但现在问题来了，如果传入 EventName 或 Concat 工具类型的实际类型是联合类型的话，那么结果又会是怎样呢？接下来，我们来验证一下： ```typescript type T3 = EventName<"foo" | "bar" | "baz">; // "fooChanged" | "barChanged" | "bazChanged" type T4 = Concat<"top" | "bottom", "left" | "right">; // "top-left" | "top-right" | "bottom-left" | "bottom-right" ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/433d409800344e288edda8a3d0a9cef6~tplv-k3u1fbpfcp-watermark.image?) 为什么会生成这样的类型呢？这是因为对于模板字面量类型来说，当类型占位符的实际类型是联合类型（A ｜B ｜C）的话，就会被自动展开： ```typescript `[${A|B|C}]` => `[${A}]` | `[${B}]` | `[${C}]` ``` ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da6ad7f256604ebf83914356f244b33f~tplv-k3u1fbpfcp-watermark.image?) 而对于包含多个类型占位符的情形，比如 `Concat` 工具类型。多个占位符中的联合类型解析为叉积： ```typescript `${A|B}-${C|D}` => `${A}-${C}` | `${A}-${D}` | `${B}-${C}` | `${B}-${D}` ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c23822d8edc648d1b8fb41addcec3014~tplv-k3u1fbpfcp-watermark.image?) 了解完上述的运算规则，你应该就能理解生成的 T3 和 T4 类型了。在使用模板字面量类型的过程中，我们还可以使用 TypeScript 提供的，用于处理字符串类型的内置工具类型，比如 **Uppercase**、**Lowercase**、**Capitalize** 和 **Uncapitalize**。具体的使用方式是这样的： ```typescript type GetterName = `get${Capitalize}`; type Cases = `${Uppercase} ${Lowercase} ${Capitalize} ${Uncapitalize}`; type T5 = GetterName<'foo'>; // "getFoo" type T6 = Cases<'bar'>; // "BAR bar Bar bar" ``` 其实，模板字面量类型的能力是很强大的，结合 TypeScript 的条件类型和 infer 关键字我们还可以实现类型推断。 ```typescript type Direction = "left" | "right" | "top" | "bottom"; type InferRoot = T extends `${infer R}${Capitalize}` ? R : T; type T7 = InferRoot<"marginRight">; // "margin" type T8 = InferRoot<"paddingLeft">; // "padding" ``` 在以上代码中，InferRoot 工具类型除了利用模板字面量类型之外，还使用了 TypeScript 条件类型和 infer。如果你对这两个知识点，还不了解的话，可以观看 “用了 TS 条件类型，同事直呼 YYDS” 和 “学会 TS infer，写起泛型真香！” 这两期的视频。此外，TypeScript 4.1 版本允许我们使用 as 子句对映射类型中的键进行重新映射。它的语法如下： ```typescript type MappedTypeWithNewKeys = { [K in keyof T as NewKeyType]: T[K] // ^^^^^^^^^^^^^ // This is the new syntax! } ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ce1d6a2bbf14c92afb8a938e4b1093b~tplv-k3u1fbpfcp-watermark.image?) 其中 NewKeyType 的类型必须是 string | number | symbol 联合类型的子类型。在重新映射的过程中，结合模板字面量类型所提供的能力，我们就可以实现一些有用的工具类型。比如，我们可以定义一个 Getters 工具类型，用于为对象类型生成对应的 Getter 类型： ```typescript type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K] }; interface Person { name: string; age: number; location: string; } type LazyPerson = Getters; // { // getName: () => string; // getAge: () => number; // getLocation: () => string; // } ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc2b1d6b3ea74a5c9e96e8c77ff0d38e~tplv-k3u1fbpfcp-watermark.image?) 在以上代码中，因为 keyof T 返回的类型可能会包含 symbol 类型，而 Capitalize 工具类型要求处理的类型需要是 string 类型的子类型，所以需要通过交叉运算符进行类型过滤。除了实现简单的工具类型之外，我们还可以实现比较复杂的工具类型。比如，用于获取对象类型中，任意层级属性的类型。 ```typescript type PropType = string extends Path ? unknown : Path extends keyof T ? T[Path] : Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropType : unknown : unknown; declare function getPropValue( obj: T, path: P ): PropType; const obj = { a: { b: { c: 666, d: "阿宝哥" } } }; let a = getPropValue(obj, "a"); // { b: {c: number, d: string } } let ab = getPropValue(obj, "a.b"); // {c: number, d: string } let abd = getPropValue(obj, "a.b.d"); // string ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640e69f0eb7647249c27c215528dea1b~tplv-k3u1fbpfcp-watermark.image?) 在以上代码中，PropType 工具类型涉及 TypeScript 中的多个核心知识点。除了递归类型之外，条件类型、条件链和 infer 类型推断这些知识点，阿宝哥在往期的文章中都已经介绍了。而关于递归类型的知识点，阿宝哥将在后续的文章中介绍，感兴趣的话记得关注阿宝哥。你喜欢以这种形式学 TS 么？喜欢的话，记得点赞与收藏哟。