你用過 TypeScript 內(nèi)置的 Pick 工具類型么?你想知道它內(nèi)部是如何實(shí)現(xiàn)的么?本期阿寶哥將帶你一起手寫一個(gè) MyPick 工具類型?？赐瓯疚闹螅憔湍芰私庠摴ぞ哳愋蜕婕暗南嚓P(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: "廈門",
};

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

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

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

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

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

映射類型的語法如下：

{ [ P in K ] : T }

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

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

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

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

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

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

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

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