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(o: T, k: K) {
    var name: string = k; // Type 'string | number | symbol' is not assignable to type 'string'.}

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

function useKey(o: T, k: K) {
    var name: string = k;
}

而如果你要处理所有的属性名，你可以这样写：

function useKey(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"

实战

在「泛型(opens new window)」这篇中就讲到了一个keyof的应用：

我们希望获取一个对象给定属性名的值，为此，我们需要确保我们不会获取obj上不存在的属性。所以我们在两个类型之间建立一个约束：

function getProperty(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"'.

在后面的「映射类型(opens new window)」章节中，我们还会讲到keyof。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com