TypeScript 之 Keyof Type Operator

冴羽發表於2021-11-29
TypeScript

前言

TypeScript 的官方文件早已更新，但我能找到的中文文件都還停留在比較老的版本。所以對其中新增以及修訂較多的一些章節進行了翻譯整理。

本篇整理自 TypeScript Handbook 中「Keyof Type Operator」 章節。

本文並不嚴格按照原文翻譯，對部分內容也做了解釋補充。

keyof 型別操作符

對一個物件型別使用 keyof 操作符，會返回該物件屬性名組成的一個字串或者數字字面量的聯合。這個例子中的型別 P 就等同於 "x" | "y"：

type Point = { x: number; y: number };
type P = keyof Point;

// type P = keyof Point

但如果這個型別有一個 string 或者 number 型別的索引簽名，keyof 則會直接返回這些型別：

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
// type A = number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
// type M = string | number

注意在這個例子中，M 是 string | number，這是因為 JavaScript 物件的屬性名會被強制轉為一個字串，所以 obj[0] 和 obj["0"] 是一樣的。

(注：原文到這裡就結束了)

數字字面量聯合型別

在一開始我們也說了，keyof 也可能返回一個數字字面量的聯合型別，那什麼時候會返回數字字面量聯合型別呢，我們可以嘗試構建這樣一個物件：

const NumericObject = {
  [1]: "冴羽一號",
  [2]: "冴羽二號",
  [3]: "冴羽三號"
};

type result = keyof typeof NumericObject

// typeof NumbericObject 的結果為：
// {
//   1: string;
//   2: string;
//   3: string;
// }
// 所以最終的結果為：
// type result = 1 | 2 | 3

Symbol

其實 TypeScript 也可以支援 symbol 型別的屬性名：

const sym1 = Symbol();
const sym2 = Symbol();
const sym3 = Symbol();

const symbolToNumberMap = {
  [sym1]: 1,
  [sym2]: 2,
  [sym3]: 3,
};

type KS = keyof typeof symbolToNumberMap; // typeof sym1 | typeof sym2 | typeof sym3

這也就是為什麼當我們在泛型中像下面的例子中使用，會如此報錯：

function useKey<T, K extends keyof T>(o: T, k: K) {
  var name: string = k; 
  // Type 'string | number | symbol' is not assignable to type 'string'.
}

如果你確定只使用字串型別的屬性名，你可以這樣寫：

function useKey<T, K extends Extract<keyof T, string>>(o: T, k: K) {
  var name: string = k; // OK
}

而如果你要處理所有的屬性名，你可以這樣寫：

function useKey<T, K extends keyof T>(o: T, k: K) {
  var name: string | number | symbol = k;
}

類和介面

對類使用 keyof：

// 例子一
class Person {
  name: "冴羽"
}

type result = keyof Person;
// type result = "name"
// 例子二
class Person {
  [1]: string = "冴羽";
}

type result = keyof Person;
// type result = 1

對介面使用 keyof：

interface Person {
  name: "string";
}

type result = keyof Person;
// type result = "name"

實戰

在「TypeScript 之 Generic」這篇中就講到了一個 keyof 的應用：
​
我們希望獲取一個物件給定屬性名的值，為此，我們需要確保我們不會獲取 obj 上不存在的屬性。所以我們在兩個型別之間建立一個約束：

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}
 
let x = { a: 1, b: 2, c: 3, d: 4 };
 
getProperty(x, "a");
getProperty(x, "m");

// Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.

在後面的「Mappred Types」 章節中，我們還會講到 keyof 。

TypeScript 系列

  1. TypeScript 之 Narrowing
  2. TypeScript 之 More on Functions
  3. TypeScript 之 Object Type
  4. TypeScript 之 Generics

如果你對於 TypeScript 有什麼困惑或者其他想要了解的內容，歡迎與我交流，微信：「mqyqingfeng」，公眾號搜尋：「yayujs」或者「冴羽的JavaScript部落格」

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章