幾個一看就會的 TypeScript 小技巧

作者：神說要有光 2022-03-21 21:05:40

TypeScript 是一門語言，有很多語法，和那些只需要熟悉下 API 的庫的層次不太一樣，它更靈活，當然也會有很多小技巧。

這篇文章就來分享一些很多人不知道的小技巧吧，都是學完就能用起來的那種。

keyof any

TypeScript 有一個內置類型叫做 Record，它的作用是根據傳入的索引和值的類型構造新的索引類型。

它的實現就是通過映射類型的語法構造一個索引類型：

type Record<K, T> = { [P in K]: T };

那么問題來了，這個 K 怎么約束呢?

有同學說 K 不是索引么?那應該是 string，也就是 K extends string。

但是 JS 的屬性可以是 string、number、symbol 這三種類型的。

那我知道了，要 K extends string | number | symbol。

不不不，TypeScript 有個編譯選項叫做 keyofStringsOnly，開啟了那么就就只會用 string 作為索引，否則才是 string | number | symbol：

這還與編譯選項有關，那這里改怎么約束呢?

看下 TS 源碼里是怎么定義 Record 的：

type Record<K extends keyof any, T> = { [P in K]: T; };

它用了 keyof any，難道這個 keyof any 就能動態得到 key 支持的類型么?

我們試一下，不開啟 keyofStringsOnly 時：

開啟 keyofStringsOnly 時：

妙啊，這樣就能動態獲取當前支持的 key 的類型了。

需要約束某個類型參數為索引 Key 時，用 keyof any 動態獲取比寫死 string | number | symbol 更好。

object 和 Record<string, any>

object 和 RecordTypeScript 里有三個類型比較難區分，就是 object、Object、{} 這幾個。

其實只要記住 object 不能接受原始類型就可以了，其余兩個差不多，只不過 {} 是個空對象，沒有索引。

所以 number 就可以賦值給 {}、Object 類型，但是不能賦值給 object 類型：

其實，你看源碼會發現大家不會用 object 來約束，而是用 Record 來約束索引類型，這倆其實是一樣的，但是 Record 更語義化一些。

Record 創建了一個 key 為任意 string，value 為任意類型的索引類型：

所以，平時約束索引類型的時候就可以用 Record 代替 object。

而且你會在很多源碼里看到這種寫法，比如下面是 Nest.js 源碼里的：

-readonly

映射類型可以構造一個新的索引類型，并且構造的過程中做一些修改。

比如構造一個新的索引類型，把所有的 Key 變為可選：

type ToPartial<T> = { [Key in keyof T]?: T[Key] }

或者構造一個新的索引類型，加上 readonly 的修飾：

type ToReadonly = { readonly [Key in keyof T]: T[Key]; }

但很多人不知道也可以去掉已有的修飾的，用 - 號，減去的意思：

比如去掉 ? 是 -? ：

type ToRequired<T> = { [Key in keyof T]-?: T[Key] }

那去掉 readonly 自然就是 -readonly：

type ToMutable<T> = { -readonly [Key in keyof T]: T[Key] }

我最近看到 Promise.all 的類型定義就用到這個了：

類型參數 T 是待處理的 promise 數組，返回值是 Promise 的 value 對應的數組，用 Awaited 取出 value 的類型。

Awaited 是 TS 內置的一個高級類型，用于取出 Promise 返回值類型的：

返回的是數組類型，那為啥還可以用映射類型的語法呢?

因為數組類型也是索引類型呀，索引類型的意思就是聚合多個元素的類型，數組、對象、class 都是索引類型。

當然，主要還是為了講 -readonly 的語法，可以去掉 readonly 的修飾。

this

方法里可以調用 this，比如這樣：

class Dong {
    name: string;

    constructor() {
        this.name = "dong";
    }

    hello() {
        return 'hello, I\'m ' + this.name;
    }
}

const dong = new Dong();
dong.hello();

用對象.方法名的方式調用的時候，this 就指向那個對象。

但是方法也可以用 call 或者 apply 調用：

call 調用的時候，this 就變了，但這里卻沒有被檢查出來 this 指向的錯誤。

如何讓編譯器能夠檢查出 this 指向的錯誤呢?

其實方法是可以指定 this 的類型的：

class Dong {
    name: string;

    constructor() {
        this.name = "dong";
    }

    hello(this: Dong) {
        return 'hello, I\'m ' + this.name;
    }
}