[TypeScript] keyof

keyof 用来返回一个class类型或者interface类型的全部key组成的联合类型。能够看下面的一个例子：prototype

一： 当把keyof用在通常常见的class类型和interface类型上

type Point = { 0: number; height: number };
interface Point2{name: string; age: number}

type KeyOfPoint = keyof Point; // 0 | 'height'
type KeyOfPoint2 = keyof Point2; // 'name' | 'age'

const fn = (key: KeyOfPoint | KeyOfPoint2)=>{}

fn(0) //no error
fn('height') //no error
fn('name') //no error
fn('age') //no error

fn('width') // error: 类型不匹配

在以上的代码里面 :设计

key: KeyOfPoint | KeyOfPoint2

就至关于：code

key: 0 | 'height' | 'name' | 'age'

因此，当咱们调用：fn('width')的时候就会报错，由于‘width’不在Point和Point2的key的列表里面。对象

二： 当把keyof用在index signature的class类型上时

number类型的index signature, 结果为： numberip

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish; // type A = number

string类型的index signature，结果为： string | number。这是由于，当我定义string类型的index signature时，我依然能够给number类型的key，由于JavaScript会把对象的number类型的key强制转为string，好比obj[0]和obj['0']是相等的。ci

type Arrayish = { [n: string]: unknown };
type A = keyof Arrayish; // type A = number | number
const fn = (key: A)=>{}
fn('xxx') // no error
fn(0) // no error

以上是keyof的一般使用场景，也是keyof被设计出来的初衷。可是，假如咱们把keyof用到enum， number，string等类型上会获得什么呢？string

三： 当把keyof用在number类型的enum上

enum Colors {
    red,
    blue,
    yellow
}
type A = keyof Colors; // "toString" | "toFixed" | "toExponential" | "toPrecision" | "valueOf" | "toLocaleString"

当把keyof用在number类型的enum上时，会获得Number.prototype上所定义的方法的名字（string格式）的联合类型。io

四： 当把keyof用在string类型的enum上

enum Colors {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow'
}
type A = keyof Colors; // number | "toString" | "charAt" | "charCodeAt" | "concat" | ...27 more... | "padEnd"

当把keyof用在string类型的enum上时，咱们就获得一个由number类型再加上String.prototype上定义的全部的方法的名字组成的一个联合类型。class