天天看點
傳回

TypeScript映射類型和更好的字面量類型推斷

TypeScript 2.1 引入了映射類型，這是對類型系統的一個強大的補充。本質上，映射類型允許w咱們通過映射屬性類型從現有類型建立新類型。根據咱們指定的規則轉換現有類型的每個屬性。轉換後的屬性組成新的類型。

使用映射類型，可以捕獲類型系統中類似 Object.freeze() 等方法的效果。當機對象後，就不能再添加、更改或删除其中的屬性。來看看如何在不使用映射類型的情況下在類型系統中對其進行編碼：

interface Point {
  x: number;
  y: number;
}

interface FrozenPoint {
  readonly x: number;
  readonly y: number;
}

function freezePoint(p: Point): FrozenPoint {
  return Object.freeze(p);
}

const origin = freezePoint({ x: 0, y: 0 });

// Error! Cannot assign to 'x' because it
// is a constant or a read-only property.
origin.x = 42;

咱們定義了一個包含 x 和 y 兩個屬性的 Point 接口，咱們還定義了另一個接口FrozenPoint，它與 Point相同，隻是它的所有屬性都被使用 readonly 定義為隻讀屬性。

freezePoint 函數接受一個 Point 作為參數并當機該參數，接着，向調用者傳回相同的對象。然而，該對象的類型已更改為FrozenPoint，是以其屬性被靜态類型化為隻讀。這就是為什麼當試圖将 42 指派給 x屬性時，TypeScript 會出錯。在運作時，配置設定要麼抛出一個類型錯誤(嚴格模式)，要麼靜默失敗(非嚴格模式)。

雖然上面的示例可以正确地編譯和工作，但它有兩大缺點

  1. 需要兩個接口。除了 Point 類型之外，還必須定義 FrozenPoint 類型，這樣才能将 readonly 修飾符添加到兩個屬性中。當咱們更改 Point 時，還必須更改FrozenPoint，這很容易出錯，也很煩人。
  2. 需要 freezePoint 函數。對于希望在應用程式中當機的每種類型的對象，咱們就必須定義一個包裝器函數，該函數接受該類型的對象并傳回當機類型的對象。沒有映射類型，咱們就不能以通用的方式靜态地使用 Object.freeze()。

使用映射類型建構 Object.freeze()

來看看 Object.freeze()是如何在 lib.d.ts 檔案中定義的：

/**
  * Prevents the modification of existing property attributes and values, and prevents the addition of new properties.
  * @param o Object on which to lock the attributes.
  */
freeze<T>(o: T): Readonly<T>;

該方法的傳回類型為Readonly<T>，這是一個映射類型，它的定義如下：

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
};

這個文法一開始可能會讓人望而生畏，咱們來一步一步分析它：

  • 用一個名為 T 的類型參數定義了一個泛型 Readonly。
  • 在方括号中，使用了 keyof 操作符。keyof T 将 T 類型的所有屬性名表示為字元串字面量類型的聯合。
  • 方括号中的 in 關鍵字表示我們正在處理映射類型。[P in keyof T]: T[P]表示将 T類型的每個屬性 P 的類型轉換為 T[P]。如果沒有readonly修飾符，這将是一個身份轉換。
  • 類型 T[P] 是一個查找類型，它表示類型 T 的屬性 P 的類型。
  • 最後，readonly 修飾符指定每個屬性都應該轉換為隻讀屬性。

因為 Readonly<T> 類型是泛型的，是以咱們為T提供的每種類型都正确地入了Object.freeze() 中。

const origin = Object.freeze({ x: 0, y: 0 });

// Error! Cannot assign to 'x' because it
// is a constant or a read-only property.
origin.x = 42;

映射類型的文法更直覺解釋

這次咱們使用 Point 類型為例來粗略解釋類型映射如何工作。請注意，以下隻是出于解釋目的，并不能準确反映TypeScript使用的解析算法。

從類型别名開始：

type ReadonlyPoint = Readonly<Point>;

現在，咱們可以在 Readonly<T> 中為泛型類型 T 的替換 Point 類型：

type ReadonyPoint = {
  readonly [P in keyof Point]: Point[P]
};

現在咱們知道 T 是 Point，可以确定keyof Point表示的字元串字面量類型的并集：

type ReadonlyPoint = {
  readonly [P in "x" | "y"]: Point[p]
};

類型 P 表示每個屬性 x 和 y，咱們把它們作為單獨的屬性來寫，去掉映射的類型文法

type ReadonlyPoint = {
  readonly x: Point["x"];
  readonly y: Point["y"];
};

最後，咱們可以解析這兩種查找類型，并将它們替換為具體的 x 和 y 類型，這兩種類型都是 number。

type ReadonlyPoint = {
  readonly x: number;
  readonly y: number;
};

最後，得到的 ReadonlyPoint 類型與咱們手動建立的 FrozenPoint 類型相同。

更多映射類型的示例

上面已經看到 lib.d.ts 檔案中内置的 Readonly <T> 類型。此外，TypeScript 定義了其他映射類型，這些映射類型在各種情況下都非常有用。如下：

/**
 * Make all properties in T optional
 */
type Partial<T> = {
  [P in keyof T]?: T[P]
};

/**
 * From T pick a set of properties K
 */
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
};

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends string, T> = {
  [P in K]: T
};

這裡還有兩個關于映射類型的例子，如果需要的話，可以自己編寫：

/**
 * Make all properties in T nullable
 */
type Nullable<T> = {
  [P in keyof T]: T[P] | null
};

/**
 * Turn all properties of T into strings
 */
type Stringify<T> = {
  [P in keyof T]: string
};

映射類型和聯合的組合也是很有趣：

type X = Readonly<Nullable<Stringify<Point>>>;
// type X = {
//     readonly x: string | null;
//     readonly y: string | null;
// };

映射類型的實際用例

實戰中經常可以看到映射類型，來看看 react 和 Lodash ：

  • react:元件的 setState 方法允許咱們更新整個狀态或其中的一個子集。咱們可以更新任意多個屬性，這使得setState方法成為 Partial<T> 的一個很好的用例。
  • Lodash：pick 函數從一個對象中選擇一組屬性。該方法傳回一個新對象，該對象隻包含咱們選擇的屬性。可以使用 Pick<T> 對該行為進行建構，正如其名稱所示。

更好的字面量類型推斷

字元串、數字和布爾字面量類型（如："abc"，1和true）之前僅在存在顯式類型注釋時才被推斷。從 TypeScript 2.1 開始，字面量類型總是推斷為預設值。在 TypeScript 2.0 中，類型系統擴充了幾個新的字面量類型：

  • boolean 字面量類型
  • 數字字面量
  • 枚舉字面量

不帶類型注解的 const 變量或 readonly 屬性的類型推斷為字面量初始化的類型。已經初始化且不帶類型注解的 let 變量、var 變量、形參或非 readonly 屬性的類型推斷為初始值的擴充字面量類型。字元串字面量擴充類型是 string，數字字面量擴充類型是number,true 或 false 的字面量類型是 boolean，還有枚舉字面量擴充類型是枚舉。

更好的 const 變量推斷

咱們從局部變量和 var 關鍵字開始。當 TypeScript 看到下面的變量聲明時，它會推斷baseUrl變量的類型是 string ：

var baseUrl = "https://example.com/";
// 推斷類型: string

用 let 關鍵字聲明的變量也是如此

let baseUrl = "https://example.com/";
// 推斷類型: string

這兩個變量都推斷為string類型，因為它們可以随時更改。它們是用一個字面量字元串值初始化的，但是以後可以修改它們。

但是，如果使用const關鍵字聲明變量并使用字元串字面量進行初始化，則推斷的類型不再是 string，而是字面量類型：

const baseUrl = "https://example.com/";
// 推斷類型: "https://example.com/"

由于常量字元串變量的值永遠不會改變，是以推斷出的類型會更加的具體。 baseUrl 變量無法儲存 "https://example.com/" 以外的任何其他值。

字面量類型推斷也适用于其他原始類型。如果用直接的數值或布爾值初始化常量，推斷出的還是字面量類型：

const HTTPS_PORT = 443;
// 推斷類型: 443

const rememberMe = true;
// 推斷類型: true

類似地，當初始化器是枚舉值時，推斷出的也是字面量類型:

enum FlexDirection {
  Row,
  Column
}

const direction = FlexDirection.Column;
// 推斷類型: FlexDirection.Column

注意，direction 類型為 FlexDirection.Column，它是枚舉字面量類型。如果使用let或var 關鍵字來聲明 direction 變量，那麼它的推斷類型應該是 FlexDirection。

更好的隻讀屬性推斷

與局部 const 變量類似，帶有字面量初始化的隻讀屬性也被推斷為字面量類型：

class ApiClient {
  private readonly baseUrl = "https://api.example.com/";
  // 推斷類型: "https://api.example.com/"

  get(endpoint: string) {
    // ...
  }
}

隻讀類屬性隻能立即初始化，也可以在構造函數中初始化。試圖更改其他位置的值會導緻編譯時錯誤。是以，推斷隻讀類屬性的字面量類型是合理的，因為它的值不會改變。

當然，TypeScript 不知道在運作時發生了什麼:用 readonly 标記的屬性可以在任何時候被一些js 代碼改變。readonly 修飾符隻限制從 TypeScript 代碼中對屬性的通路，在運作時就無能為力。也就是說，它會被編譯時删除掉，不會出現在生成的 js 代碼中。

推斷字面量類型的有用性

你可能會問自己，為什麼推斷 const 變量和 readonly 屬性為字面量類型是有用的。考慮下面的代碼:

const HTTP_GET = "GET"; // 推斷類型: "GET"
const HTTP_POST = "POST"; // 推斷類型: "POST"

function get(url: string, method: "GET" | "POST") {
  // ...
}

get("https://example.com/", HTTP_GET);

如果推斷 HTTP_GET 常量的類型是 string 而不是 “GET”，則會出現編譯時錯誤，因為無法将HTTP_GET 作為第二個參數傳遞給get函數：

Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'

當然，如果相應的參數隻允許兩個特定的字元串值，則不允許将任意字元串作為函數參數傳遞。但是，當為兩個常量推斷字面量類型“GET”和“POST”時，一切就都解決了。

字面量 typescript 初始化 字元串 隻讀屬性
上一篇: vue3.0+typescript 擴充全局自定義屬性接口
下一篇: 關鍵靠腦洞！這家公司要打造會飛的自動駕駛汽車

繼續閱讀