前言

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 = numbertype 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，对作者也是一种激励。