前言

TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。

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

本文并不严格按照原文翻译，对部分内容也做了解释补充。

keyof 类型操作符

对一个对象类型使用 keyof 操作符，会返回该对象属性名组成的一个字符串或者数字字面量的联合。这个例子中的类型 P 就等同于 “x” | “y”：

  1. type Point = { x: number; y: number };
  2. type P = keyof Point;
  4. // type P = keyof Point

但如果这个类型有一个 string 或者 number 类型的索引签名，keyof 则会直接返回这些类型：

  1. type Arrayish = { [n: number]: unknown };
  2. type A = keyof Arrayish;
  3. // type A = number
  5. type Mapish = { [k: string]: boolean };
  6. type M = keyof Mapish;
  7. // type M = string | number

注意在这个例子中，M 是 string | number，这是因为 JavaScript 对象的属性名会被强制转为一个字符串，所以 obj[0] 和 obj["0"] 是一样的。

(注：原文到这里就结束了)

数字字面量联合类型

在一开始我们也说了，keyof 也可能返回一个数字字面量的联合类型，那什么时候会返回数字字面量联合类型呢，我们可以尝试构建这样一个对象：

  1. const NumericObject = {
  2.   [1]: "冴羽一号",
  3.   [2]: "冴羽二号",
  4.   [3]: "冴羽三号"
  5. };
  7. type result = keyof typeof NumericObject
  9. // typeof NumbericObject 的结果为：
  10. // {
  11. //   1: string;
  12. //   2: string;
  13. //   3: string;
  14. // }
  15. // 所以最终的结果为：
  16. // type result = 1 | 2 | 3

Symbol

其实 TypeScript 也可以支持 symbol 类型的属性名：

  1. const sym1 = Symbol();
  2. const sym2 = Symbol();
  3. const sym3 = Symbol();
  5. const symbolToNumberMap = {
  6.   [sym1]: 1,
  7.   [sym2]: 2,
  8.   [sym3]: 3,
  9. };
  11. type KS = keyof typeof symbolToNumberMap; // typeof sym1 | typeof sym2 | typeof sym3

这也就是为什么当我们在泛型中像下面的例子中使用，会如此报错：

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

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

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

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

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

类和接口

对类使用 keyof：

  1. // 例子一
  2. class Person {
  3.   name: "冴羽"
  4. }
  6. type result = keyof Person;
  7. // type result = "name"
  1. // 例子二
  2. class Person {
  3.   [1]: string = "冴羽";
  4. }
  6. type result = keyof Person;
  7. // type result = 1

对接口使用 keyof：

  1. interface Person {
  2.   name: "string";
  3. }
  5. type result = keyof Person;
  6. // type result = "name"

实战

在「TypeScript 之 Generic」这篇中就讲到了一个 keyof 的应用：

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

  1. function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  2.   return obj[key];
  3. }
  5. let x = { a: 1, b: 2, c: 3, d: 4 };
  7. getProperty(x, "a");
  8. getProperty(x, "m");
  10. // 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，对作者也是一种鼓励。