你用過(guò) TypeScript 內(nèi)置的 Pick 工具類(lèi)型么?你想知道它內(nèi)部是如何實(shí)現(xiàn)的么?本期阿寶哥將帶你一起手寫(xiě)一個(gè) MyPick 工具類(lèi)型?？赐瓯疚闹螅憔湍芰私庠摴ぞ哳?lèi)型涉及的相關(guān)知識(shí)點(diǎn)。你準(zhǔn)備好了么?現(xiàn)在我們馬上進(jìn)入正題。

這是一個(gè) Pick 函數(shù)，它的作用是挑選 keys 屬性數(shù)組中每個(gè) key 對(duì)應(yīng)的值，組成一個(gè)新的對(duì)象。

function Pick(obj, keys) {
  const ret = {};
  for (const key of keys) {
    ret[key] = obj[key];
  }
  return ret;
}

const user = {
  id: 666,
  name: "阿寶哥",
  address: "廈門(mén)",
};

const PickedUser = MyPick(user, ["id", "name"]);

在 JavaScript 中我們操作的是對(duì)象，而在 TypeScript 中我們操作的是類(lèi)型。同樣，在 TypeScript 中我們也可以把 User 類(lèi)型轉(zhuǎn)換成只包含 id 和 name 屬性的 PickedUser 類(lèi)型。

type User = {
  id: number;
  name: string;
  address: string;
};

type PickedUser = {
  id: number;
  name: string;
};

要實(shí)現(xiàn)上述的功能，我們需要使用 TypeScript 提供的映射類(lèi)型。它是一種泛型類(lèi)型，可用于把原有的對(duì)象類(lèi)型映射成新的對(duì)象類(lèi)型。

映射類(lèi)型的語(yǔ)法如下：

{ [ P in K ] : T }

其中 P in K 類(lèi)似于 JavaScript 中的 for...in 語(yǔ)句，用于遍歷 K 類(lèi)型中的所有類(lèi)型，而 T 類(lèi)型變量用于表示 TS 中的任意類(lèi)型。了解完這些知識(shí)之后，我們來(lái)定義一個(gè) MyPick 工具類(lèi)型。

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

在以上代碼中，T、K 被稱(chēng)為類(lèi)型參數(shù)，與 Pick 函數(shù)中參數(shù)的作用類(lèi)似。keyof 操作符用于獲取某種類(lèi)型中的所有鍵，其返回類(lèi)型是聯(lián)合類(lèi)型。如果 keyof 操作的是對(duì)象類(lèi)型，其功能與 Object.keys 方法類(lèi)似。

而 K extends keyof T 是泛型約束，用于約束類(lèi)型參數(shù) K 對(duì)應(yīng)的實(shí)際類(lèi)型為對(duì)象類(lèi)型所有鍵組成的聯(lián)合類(lèi)型的子類(lèi)型。T[P] 用于獲取 T 類(lèi)型中 P 屬性對(duì)應(yīng)的類(lèi)型，其中類(lèi)型變量 P 的值會(huì)在遍歷的過(guò)程中不斷改變。

下面我們來(lái)驗(yàn)證一下 MyPick 工具類(lèi)型，是否實(shí)現(xiàn)對(duì)應(yīng)的功能。在實(shí)際工作中，若遇到對(duì)應(yīng)的場(chǎng)景，我們可以直接使用 TypeScript 提供的 Pick 工具類(lèi)型。

type PickedUser = MyPick<User, "id" | "name">;

// type PickedUser = {
//   id: number;
//   name: string;
// }

在 TypeScript 中映射類(lèi)型非常重要，如果你想深入學(xué)習(xí)映射類(lèi)型，可以觀看 “用了 TS 映射類(lèi)型，同事直呼內(nèi)行!