其實泛型很簡單

donglegend發表於2022-02-17
原文網址 : https://segmentfault.com/a/1190000041421259
泛型

泛型

TypeScript泛型介紹
介紹官網說的很詳細了，其實泛型就是 對型別進行 程式設計的東西，一點也不復雜，會寫程式碼函式的都很好理解。
想學好泛型，只需要掌握兩點基礎知識即可：

  1. keyof 獲取使用
  2. in 遍歷使用
    哦，還有一個 泛型約束，關鍵語法 extends

基礎知識介紹

先定義一個 介面 interface如下：

interface IUser {
    id: number;
    name: string;
    age?: number;
    info?: string;
}

接下來 介紹 keyof 的使用，先用keyof 獲取介面IUser的所有屬性，如下：

type IUserKeys = keyof IUser;

image.png

然後 介紹 in 的使用，用來遍歷屬性，如下：

type IKeys = {
    [P in keyof IUser]: IUser[P]
}

image.png

簡單吧，就像寫 最簡單的程式一樣，好，接下來進入正題，我們分析一下 typescript內建的幾種常用型別工具。

預置型別

  • Partial<T>
    就是把 一個介面的屬性都變成 可選的，利用上面的 keyof 和 in加上 可選操作符直接實現就行，如下：

    type Partial<T> = {
  [P in keyof T]?: T[P];
};

  • Required<T>
    所有屬性設定成 必填的，和上面同理，去掉可選操作符即可：

    type Required<T> = {
  [P in keyof T]-?: T[P];
};

  • Readonly<T>
    把屬性設定成 只讀，同理，新增readonly修飾符即可：

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

    上面這三個都很簡單，很好理解吧？接下來實現一些稍微複雜的，當然也不難

  • Pick<T, K>
    含義就是，選取介面中的 部門型別。這裡有個 關鍵點就是 這部分 必須 在介面中存在，所以需要 加上 泛型約束，實現就是 利用 extends 關鍵詞，表示 K 被 (keyof T)約束,如下：

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

  • Record<K, T>
    含義就是把 屬性K 的型別設定成 T 型別，遍歷 K，設定為 T 即可。

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

  • Exclude<T, U>
    含義就是 從T中剔除不想要的U部分，比如 'a' | 'b' | 'c'，剔除'c'：

    type Exclude<T, U> = T extends U ? never : T;

  • Qmit<T, K>
    構造一個T型別介面，但是要從中排除 K 中的屬性。這個需要思考一下，直接說實現思路 就是利用Pick挑選想要的屬性，然後 想要的屬性 通用 Exclude 把 K中的來排除掉來獲取。

    type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

相關文章