TypeScript 常用的新玩法

大家好，我是若川。持续组织了6个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列

上周分享了 ts 入门以及常用的小技巧《TS 在项目中的 N 个实用小技巧 - 文字稿》，然后发现有好几个关注了公众号来提问的（结果我开了小冰的自动回复，有了以下奇怪的对话

当看到想要回复的时候，发现...（怪我没有开通知，略微尴尬 ~~ ?

那就只能发文来讲一讲了（希望对应的小伙伴能看到）。回顾下之前的题目，问怎么能让他的返回结果是 string

const user = {name: 'amy', age: 18}
function getPersonInfo(key: keyof typeof user) {
  return user[key];
}

const userName = getPersonInfo('name'); // string | number

解决方法肯定是泛型。这里需要关注的一个点是，泛型是可以只定义传参不传的，例如下文的 T extends keyof UserType 就限定了 T 一定是 user 中的一个 key，这个时候将参数的类型定义定义成 T ，那么返回类型自然是 UserType[T] 了，这里返回类型不定义也成，ts 能根据下面的写法自动推断出来。这种通过泛型结合 extends 的写法，可以一定情况下来辅助指定参数的类型。

const user = {name: 'amy', age: 18}
type UserType =  typeof user

function getPersonInfo<T extends keyof UserType>(key: T): UserType[T] {
  return user[key];
}

const userName = getPersonInfo('name'); // string

专门开了篇文章，那肯定得写点什么。上一篇文章做 ts 的分享的时候，发现市面上大多文章都是基于 ts3.x 的版本去做分析讲解的，就算高级进阶篇，很多也只是讲到一些常用的工具函数就戛然而至。甚至 google 搜索到的位于搜索引擎的 ts 中文网（据接触，有不少有中文文档就看中文文档的小伙伴），也只是更新到 3.1，从 npm 的发布记录来看也是四年前的版本了。所以，来写点大家说得相对少的，但是我们日常也可以感知到新玩意吧~~

正文开始

几个对 `ECMAScript` 提案的跟进

一、可选操作链和空值合并

在 es2020 中，新增了一个深受大家喜爱的属性：proposal-optional-chaining ，通常来说我们要使用需要结合 babel 配合转译来兼容低版本的浏览器（使用 @babel/preset-env 的 ES2020 版本，或者使用 @babel/plugin-proposal-optional-chaining 插件。

另外还有一个运算符 ?? 空值合并（nullish coalescing operator）。例如 a ?? b 可以等同于 (a !== null && a !== undefined) ? a : b; 这个在做一些数据接口校验的时候有些作用。

在 typescript 3.7 版本中，针对上述说的两种操作符都及时做了支持，也就意味着如果你只使用了 typescript ，而没使用 babel 的场景也可以用它来玩（场景不多见，知道有这么回事就好）

let x = foo?.bar.baz();
// => let x = foo === null || foo === void 0 ? void 0 : foo.bar.baz();

let x = foo ?? bar();
// let x = foo !== null && foo !== void 0 ? foo : bar();

二、私有字段（Private Fields）

在 typescirpt 3.8 中支持使用 # 表示私有字段，另外在 4.3 版本中也支持了方法和 getter 都能有类似的写法。demo 如下：

class Person {
    #name: string
    constructor(name: string) {
        this.#name = name;
    }
    
    #someMethod() {
        //...
    }

    get #someValue() {
        return 100;
    }
}let person = new Person('Amy');
person.#name
// Property '#name' is not accessible outside class 'Person'

其实跟 private 关键词差不多，不同的点在于上述代码，如果使用的是 private 属性，你通过 person['name'] 这种手段还是可以访问到，而你使用 person['#name'] 依然会报错

三、短路运算符

三个运算符新增 *= 的操作：&&= 、 ||= 和 ??=

跟常见的 let a += a+1 的感觉差不多，只不过这里的操作运算符是 && || 和 ?? 而已，一个实际 demo，下面三种写法都是一个意思。

const a = { duration: 50, title: '' };

a.duration ||= 10; // demo1, => 50

a.duration = a.duration || 10; // demo2, => 50

if (!a.duration) { // demo3, => 50
    a.duration = 10; 
}

语言特性的优化

一、Type-Only Imports and Export

翻译过来，就是仅仅导入导出 type 。有一些用 ts 的小伙伴可能经常会看到一些warning 提示，找不到 xx 定义。但是点进文件一看，那些定义都好端端的写在文件中，于是一头雾水甚至直接忽略 warning 提示了。

这其实是该功能会解决的一个问题，举一个例子来说明这情况产生的原因：

// types.ts
export type User = {... };
export type UserList = User[];

// index.ts
export { User, UserList } from './types'; // ts types
export { getUser, CreateUser } from './user'; // js function

从逻辑上看上面的代码并没有任何问题，但是在底层，这是一个被称之为「导入省略」的功能起的作用。通常 babel 在编译的时候，是一个个处理文件的，针对 ts 他一般是先删除类型，然后再进行编译。我们如果光看 index.ts ，实际都并不知道 User 和 CreateUser 谁是一个 ts type 的定义而谁是 js 运行时需要的东西。于是 babel 只能被迫的将所有东西都保留，于是转译后的文件为

// types.js
-- empty file --

// index.js
export { User, UserList } from './types'; // ts types
export { getUser, CreateUser } from './user'; // js function

而在 typescript 3.8 之后，我们的解决方法可以变成下述写法。针对 type 的导入或者导出，babel会在删除类型的环节，直接将 import type ... 或者 export type xxx 这类的语句直接去掉。

// index.ts
export type { User, UserList } from './types'; // ts types
export { getUser, CreateUser } from './user'; // js function

// => babel 转换后
export { getUser, CreateUser } from './user'; // only js function

另外，在 4.5 的版本中，支持了对于某个变量局部使用 type 的写法，就不用说类型和 js 的函数要拆成两条语句了

// ts 3.8
import type { BaseType } from "./some-module.js";
import { someFunc } from "./some-module.js";

// => ts 4.5
import { someFunc, type BaseType } from "./some-module.js";

二、模版字符串

应该有不少小伙伴都听说过，知乎上 ts 体操也是慢慢的从这特性出来开始越来越火。实际应用个人觉得会更多对于一些需要字符串拼接的场景，减少枚举。这里简单的列举一下例子

2.1 字符串组合场景

以下是一个 antd 中的 tootoolTip 组件，他有 12 个方向，传统写法，我们可能会直接枚举 12 种，写起来有那么一丢丢累，而且还很容易手抖不小心拼错。

结合字符串模版和首字母大写的 Capitalize 方法，我们可以将纯枚举罗列，变成以下的组合：

2.2 跟 infer 结合解析路由参数

网上看到的，话不多说，直接上代码。将 :id 转成 {id: string}，不是特别理解的可以复习复习 infer 然后多看几眼自己尝试写一写。

既然路由参数可以解析，那么 url 参数解析其实同理，想要将 a=1&b=2 转换成 { a:'1', b:'2' } 的话，自己撸的一个小思路：

另外还有一个在 map 中使用 as rename 的方法，结合模版语法，我们可以在写一些通用函数的时候偷偷懒

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

interface Person {
    name: string;
    age: number;
}

type PersonGetters = Getters<Person>
/* => {
  getName: () => string;
  getAge: () => number;
} */

再有，通过字符串变量， lodash 的 get 方法也可以更加精准的定义，还有 vuex 的模版等等。在 TSconf2020 中 anders 也给了很多不错的例子在 github 上，有兴趣的可以自行查阅：https://github.com/ahejlsberg/tsconf2020-demos/blob/master/template/main.ts。总之，就很多很多可以玩的玩法可以探索的，只要愿意。

三、解构变量可以显式标记为未使用

使用解构的用法时，如果我们只需要第二个参数，而不需要第一个参数时，以前 ts 的语法检查总是会报错。在 typescript 4.2 版本之后，可以使用 _ 可以告诉 ts 这解构变量标记是未使用的，比如以下例子，只会报 second 没有被使用。

function getValues() {
    return ['a', 'b'];
}
const [_first, second] = getValues();
// 已声明“second”，但从未读取其值。

一个注意事项，如果你使用了 typescript-eslint 那可能编辑器的 eslint 检查还是会提示错误，需要配置让 no-unused-vars 规则允许下划线的变量不被使用。

rules: {
    "@typescript-eslint/no-unused-vars": [
   "error", { "ignoreRestSiblings": true }]
},

四、新增 `Await` 关键字

在 4.5 版本中支持，相当于可以快速获取 promise 的返回值了，结合 typeof 使用，或许可以节省几句对类型的 import。

const a = Promise.resolve('100')
// A = string
type A = Awaited<typeof a>;
// B = number
type B = Awaited<Promise<Promise<number>>>;
// C = boolean | number
type C = Awaited<boolean | Promise<number>>;