TS文档学习 --- keyof

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

keyof 类型操作符

对一个对象类型使用 keyof 操作符，会返回该对象属性名组成的一个字符串或者数字字面量的联合

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

但如果这个类型有一个 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"] 是一样的。

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'.
}

如果你确定只使用字符串类型的属性名，你可以这样写：

// Extract<K, T> --- 从K类型中提取T 
// 如 K --> string|number|symbol，T --> string ==> Extract<K, T> --> string
function useKey<T, K extends Extract<keyof T, string>>(o: T, k: K) {
  var name: string = k; // OK
}

类和接口

对类使用 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"