TypeScript 之 Keyof Type Operator
前言
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 系列
TypeScript 之 Narrowing
TypeScript 之 More on Functions
TypeScript 之 Object Type
TypeScript 之 Generics
如果你对于 TypeScript 有什么困惑或者其他想要了解的内容，欢迎与我交流，微信：「mqyqingfeng」，公众号搜索：「yayujs」或者「冴羽的JavaScript博客」
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。
作者：冴羽
链接：https://juejin.cn/post/7033717369663029278