什么是 TypeScript 4.1 中的模板字面类型？

写了这么多年 TypeScript，最大的感触就是它非常易于理解——特别是对于具有 Java 背景的人。 但是，在听说了 TypeScript 4.1(该语言最近的重大更新)的新闻之后，我还是为新鲜的特性感到惊奇。

我不认为我是个无知的例外。 在利用该新闻作为机会来深入了解类型系统的实际工作方式之后，我想与您分享新版本的令人兴奋的功能和变化，并提供关键字说明和许多神奇的示例。

如果你的 TypeScript 语言基础比较扎实，并且渴望学习高级功能，那么就开始吧。

新的语言特性

模板字面类型

自 ES6 开始，我们就可以通过模板字面量(Template Literals)的特性，用反引号来书写字符串，而不只是单引号或双引号：

1. const message = `text`; 

正如 Flavio Copes 所言，模板字面量提供了之前用引号写的字符串所不具备的特性：

• 定义多行字符串非常方便
• 可以轻松地进行变量和表达式的插值
• 可以用模板标签创建 DSL(Domain Specific Language，领域特定语言)

模板字面量类型和 JavaScript 中的模板字符串语法完全一致，只不过是用在类型定义里面：

1. type Entity = 'Invoice'; 
2.  
3. type Notification = `${Entity} saved`; 
4. // 等同于 
5. // type Notification = 'Invoice saved'; 
6.  
7.  
8. type Viewport = 'md' | 'xs'; 
9. type Device = 'mobile' | 'desktop'; 
10.  
11. type Screen = `${Viewport | Device} screen`; 
12. // 等同于下面这一行 
13. // type Screen = 'md screen' | 'xs screen' | 'mobile screen' | 'desktop screen'; 

当我们定义了一个具体的字面量类型时，TypeScript 会通过拼接内容的方式产生新的字符串字面量类型。

键值对类型中键的重新映射(Key Remapping)

映射类型可以基于任意键创建新的对象类型。 字符串字面量可以用作映射类型中的属性名称：

1. type Actions = { [K in 'showEdit' | 'showCopy' | 'showDelete']?: boolean; }; 
2. // 等同于 
3. type Actions = { 
4.   showEdit?:   boolean, 
5.   showCopy?:   boolean, 
6.   showDelete?: boolean 
7. }; 

如果你想创建新键或过滤掉键，TypeScript 4.1 允许你使用新的 as 子句重新映射映射类型中的键：

1. type MappedTypeWithNewKeys<T> = { 
2.     [K in keyof T as NewKeyType]: T[K] 
3. } 
4.      

TypeScript Remapping KeysThe new as clause lets you leverage features like template literal types to easily create new property names based on old ones. Keys can be filtered by producing never so that you don’t have to use an extra Omit helper type in some cases: 通过使用新的 as 子句，我们可以利用模板字面量类型之类的特性轻松地基于旧属性创建新属性名称。我们可以通过输出 never 来过滤键，这样在某些情况下就不必使用额外的 Omit 辅助类型：

1. type Getters<T> = { 
2.     [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] 
3. }; 
4.  
5. interface Person { 
6.     name: string; 
7.     age: number; 
8.     location: string; 
9. } 
10.  
11. type LazyPerson = Getters<Person>; 
12. //   ^ = type LazyPerson = { 
13. //       getName: () => string; 
14. //       getAge: () => number; 
15. //       getLocation: () => string; 
16. //   } 
17.  
18. // 去掉 'kind' 属性 
19. type RemoveKindField<T> = { 
20.     [K in keyof T as Exclude<K, "kind">]: T[K] 
21. }; 
22.  
23. interface Circle { 
24.     kind: "circle"; 
25.     radius: number; 
26. } 
27.  
28. type KindlessCircle = RemoveKindField<Circle>; 
29. //   ^ = type KindlessCircle = { 
30. //       radius: number; 
31. //   } 

TypeScript 利用带有 as 子句的模板文字类型 (source)

JSX 工厂函数

JSX 代表 JavaScript XML，它允许我们使用 JavaScript 编写 HTML 元素并将其放置在 DOM 中，而无需任何 createElement() 或 appendChild() 方法，例如：

1. const greeting = <h4>Yes I can do it!</h4>; 
2. ReactDOM.render(greeting, document.getElementById('root')); 

TypeScript 4.1 通过编译器选项 jsx 的两个新选项支持 React 17 的 jsx 和 jsxs 工厂函数：

• react-jsx
• react-jsxdev

“这些选项分别用于生产和开发编译。通常，一个选项可以扩展自另一个选项。” — TypeScript发版说明

以下是两个用于生产和开发的 TypeScript 配置文档的两个示例：

1. // ./src/tsconfig.json 
2. { 
3.   "compilerOptions": { 
4.     "module": "esnext", 
5.     "target": "es2015", 
6.     "jsx": "react-jsx", 
7.     "strict": true 
8.   }, 
9.   "include": ["./**/*"] 
10. } 

开发配置：

1. // ./src/tsconfig.dev.json 
2. { 
3.   "extends": "./tsconfig.json", 
4.   "compilerOptions": { 
5.     "jsx": "react-jsxdev" 
6.   } 
7. } 

如下图所示，TypeScript 4.1 支持在像 React 这样的 JSX 环境中进行类型检查：

递归条件类型

另一个新增功能是递归条件类型，它允许它们在分支中引用自己，从而能够更灵活地处理条件类型，使得编写递归类型别名更加容易。下面是一个使用 Awaited 展开深层嵌套的 Promise 的示例：

1. type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T; 
2.  
3. // 类似 `promise.then(...)`, 但是在类型上更加精确 
4. declare function customThen<T, U>( 
5.     p: Promise<T>, 
6.     onFulfilled: (value: Awaited<T>) => U 
7. ): Promise<Awaited<U>>; 

但是应当注意的是，TypeScript 需要更多时间来进行递归类型的类型检查。Microsoft 警告，应以负责任的态度谨慎使用它们。

Checked indexed accesses 索引访问检查

_ TypeScript 中的索引签名允许可以像下面的 Options 接口中那样访问任意命名的属性：

1. interface Options { 
2.   path: string; 
3.   permissions: number; 
4.  
5.   // Extra properties are caught by this index signature. 
6.   // 额外的属性将被这个 
7.   [propName: string]: string | number; 
8. } 
9.  
10. function checkOptions(opts: Options) { 
11.   opts.path; // string 
12.   opts.permissions; // number 
13.  
14.   // 这些都可以！因为类型都是 string | number 
15.   opts.yadda.toString(); 
16.   opts["foo bar baz"].toString(); 
17.   opts[Math.random()].toString(); 
18. } 

在这里，我们看到不是 path 以及 permissions 的属性应具有 string | number 类型：

TypeScript 4.1 提供了一个新的标志 --noUncheckedIndexedAccess，使得每次属性访问(如 opts.path)或索引访问(如 opts [“ blabla”] )都可能未定义。这意味着如果我们需要访问上一个示例中的 opts.path 之类的属性，则必须检查其是否存在或使用非 null 断言运算符(后缀 ! 字符)：

1. function checkOptions(opts: Options) { 
2.   opts.path; // string 
3.   opts.permissions; // number 
4.  
5.   // 以下代码在 noUncheckedIndexedAccess 开启时是非法的 
6.   opts.yadda.toString(); 
7.   opts["foo bar baz"].toString(); 
8.   opts[Math.random()].toString(); 
9.  
10.   // 检查属性是否真的存在 
11.   if (opts.yadda) { 
12.     console.log(opts.yadda.toString()); 
13.   } 
14.  
15.   // 直接使用非空断言操作符 
16.   opts.yadda!.toString(); 
17. } 

--noUncheckedIndexedAccess 标志对于捕获很多错误很有用，但是对于很多代码来说可能很嘈杂。 这就是为什么 --strict 开关不会自动启用它的原因。

不需要 baseUrl 指定路径

在 TypeScript 4.1 之前，要能够使用 tsconfig.json 文件中的 paths，必须声明 baseUrl 参数。 在新版本中，可以在不带 paths 选项的情况下指定 baseUrl。 这解决了自动导入中路径不畅的问题。

1. { 
2.     "compilerOptions": { 
3.         "baseUrl": "./src", 
4.         "paths": { 
5.             "@shared": ["@shared/"] // This mapping is relative to "baseUrl" 
6.         } 
7.     } 
8. } 

checkJs 默认打开 allowJs

如果您有一个 JavaScript 项目，正在其中使用 checkJs 选项检查 .js 文件中的错误，则还应该声明 allowJs 以允许编译 JavaScript 文件。而 TypeScript 4.1 中，默认情况下 checkJs 意味着 allowJs：

1. { 
2.   compilerOptions: { 
3.     allowJs: true, 
4.     checkJs: true 
5.   } 
6. } 

JSDoc @see 标签的编辑器支持

在编辑器中使用 TypeScript 时，现在对 JSDoc 标签 @see 有了更好的支持，这将改善TypeScript 4.1的可用性：

1. // @filename: first.ts 
2. export class C {} 
3.  
4. // @filename: main.ts 
5. import * as first from "./first"; 
6.  
7. /** 
8.  * @see first.C 
9.  */ 
10. function related() {} 

不兼容改变

lib.d.ts 变动

结构和 DOM 的环境声明，使您可以轻松地开始编写经过类型检查的 JavaScript 代码。

该文件自动包含在 TypeScript 项目的编译上下文中。 您可以通过指定 --noLib 编译器命令行标志或在 tsconfig.json 中配置 noLib 为 true 来排除它。

在 TypeScript 4.1 中，由于 DOM 类型是自动生成的，lib.d.ts 可能具有一组变动的 API，例如，从 ES2016 中删除的 Reflect.enumerate。

abstract 成员不能被标记为 async

在另一个重大更改中，标记为 abstract 的成员不能被再标记为 async。 因此，要修复您的代码，必须删除 async 关键字：

1. abstract class MyClass { 
2.   // 在 TypeScript 4.1 中必须删除 async 
3.   abstract async create(): Promise<string>; 
4. } 

any/unknown 向外传播

在 TypeScript 4.1 之前，对于像 foo && somethingElse 这样的表达式， foo 的类型是 any 或 unknown。 整个表达式的类型将是 somethingElse 的类型，在以下示例中就是 {someProp：string} ：

1. declare let foo: unknown; 
2. declare let somethingElse: { someProp: string }; 
3. let x = foo && somethingElse; 

在 TypeScript 4.1 中， any 和 unknown 都将向外传播，而不是在右侧传播。通常，这个变更合适的解决方法是从 foo && someExpression 切换到 !!foo && someExpression。

• 注意：双重感叹号(!!)是将变量强制转换为布尔值(真或假)的一种简便方法。

Promise 中 resolve 的参数不再是可选类型

Promise 中 resolve 的参数不再是可选的，例如下面的代码：

1. new Promise((resolve) => { 
2.   doSomethingAsync(() => { 
3.     doSomething(); 
4.     resolve(); 
5.   }); 
6. }); 

这段代码在 TypeScript 4.1 中编译会报错：

1. resolve() 
2.   ~~~~~~~~~ 
3. error TS2554: Expected 1 arguments, but got 0. 
4.   An argument for 'value' was not provided. 

要解决这个问题，必须在 Promise 中给 resolve 提供至少一个值，否则，在确实需要不带参数的情况下调用 resolve() 的情况下，必须使用显式的 void 泛型类型参数声明 Promise：

1. new Promise<void>((resolve) => { 
2.   doSomethingAsync(() => { 
3.     doSomething(); 
4.     resolve(); 
5.   }); 
6. }); 

条件展开将会创建可选属性

在 JavaScript 中，展开运算符 { ...files } 不会作用于假值，例如 files 为 null 或者 undefined。

在以下使用条件传播的示例中，如果定义了 file，则将传播 file.owner 的属性。否则，不会将任何属性传播到返回的对象中：

1. function getOwner(file?: File) { 
2.   return { 
3.     ...file?.owner, 
4.     defaultUserId: 123, 
5.   }; 
6. } 

在TypeScript 4.1之前， getOwner 返回基于每个展开对象的联合类型：

1. { x: number } | { x: number, name: string, age: number, location: string } 

• 如果定义了 file，则会拥有来自Person(所有者的类型)的所有属性。
• 否则，结果中一个都不会展示

但是事实证明，这样的代价最终会变得非常高昂，而且通常无济于事。在单个对象中存在数百个展开对象，每个展开对象都可能增加数百或数千个属性。 为了更好的性能，在TypeScript 4.1中，返回的类型有时使用全部可选属性：

1. { 
2.     x:         number; 
3.     name?:     string; 
4.     age?:      number; 
5.     location?: string; 
6. } 

不匹配的参数将不再关联

过去，彼此不对应的参数在 TypeScript 中通过将它们与 any 类型关联而彼此关联。

在下面的重载示例(为同一功能提供多种功能类型)中， pickCard 函数将根据用户传入的内容返回两个不同的内容。如果用户传入表示 deck 的对象，则该函数将选择 card。 如果用户选择了 card，他们将得到他们选择的 card：

1. let suits = ["hearts", "spades", "clubs", "diamonds"]; 
2.  
3. function pickCard(x: { suit: string; card: number }[]): number; 
4. function pickCard(x: number): { suit: string; card: number }; 
5. function pickCard(x: any): any { 
6.   // Check to see if we're working with an object/array 
7.   // if so, they gave us the deck and we'll pick the card 
8.   if (typeof x == "object") { 
9.     let pickedCard = Math.floor(Math.random() * x.length); 
10.     return pickedCard; 
11.   } 
12.   // Otherwise just let them pick the card 
13.   else if (typeof x == "number") { 
14.     let pickedSuit = Math.floor(x / 13); 
15.     return { suit: suits[pickedSuit], card: x % 13 }; 
16.   } 
17. } 
18.  
19. let myDeck = [ 
20.   { suit: "diamonds", card: 2 }, 
21.   { suit: "spades", card: 10 }, 
22.   { suit: "hearts", card: 4 }, 
23. ]; 
24.  
25. let pickedCard1 = myDeck[pickCard(myDeck)]; 
26. alert("card: " + pickedCard1.card + " of " + pickedCard1.suit); 
27.  
28. let pickedCard2 = pickCard(15); 
29. alert("card: " + pickedCard2.card + " of " + pickedCard2.suit); 

使用 TypeScript 4.1，某些情况下赋值将会失败，而某些情况下的重载解析则将失败。解决方法是，最好使用类型断言来避免错误。

最后一点想法

TypeScript 通过在运行代码之前捕获错误并提供修复程序来节省我们的时间。通过深入了解 TypeScript，我们可以更好地了解如何改善代码结构，并得到解决复杂问题的方案。希望本文能够帮助你探索类型系统，并使您的编程旅程更加精彩。

TypeScript 4.1 可以通过 NuGet 或 NPM 获取：

1. npm install typescript 

原文地址：https://mp.weixin.qq.com/s/QMYnlRDBqyLc-Sj_II0IpQ