TS中keyof和typeof的区别

这两个东西是用来进行类型推断的。
在JS中，如果想要动态访问属性，很容易写出下面的代码：

function getProp(obj, key) {
    return obj[key]
}

但是TS呢? 如果使用any大法，就写出下面这样的代码了

function getProp(obj: any, key: string) {
    return obj[key]
}

这样固然可以，但是指不定哪天就蹦出来一个undefined，就不能体现出TS的优势了。

方案

使用keyof解决这种问题：

function getProp<T>(obj: T, key: keyof T) {
    return obj[key]
}

console.log(getProp([1, 2, 3], 'length'))
// 3

进阶

那么我有下面这样的代码：

const Colors = {
    Red: '#FF0000',
    White: '#FFFFFF'
} as const

function getColor(key: string) {
    return (Colors as any)[key]
}

console.log(getColor('Red'))

注意上面的as const，这是定义一个常量字面量，也就是告诉TS编译器这个玩意后面不会再改，方便它进行类型推断。
我的目的就是，把那句Colors as any改掉，如果想用keyof的话，那么我们起码要获取到Colors的类型，但是这里他是一个字面量对象，所以本文要提到的另一个东西就引出来了，它就是typeof。
注意这里的typeof在原生JS里依然存在，用来获取一个变量的类型。但是TS中的typeof还有新的用途，那就是获取一个变量的类型并且能够用它声明新的变量：

type Color = typeof Colors

type Color2 = {
    Red: string
    White: string
}

上面代码中Color和Color2是完全等价的。
所以我们的getColor方法可以这样写：

function getColor(key: keyof Color) {
    return Colors[key]
}

综合一下，变成下面这样：

function getColor(key: keyof typeof Colors) {
    return Colors[key]
}

再进阶

如果我想让输入#FF0000这样的字符串并且把Red返回去，那么在不改变Colors对象的基础上，应该怎么办呢?
答案是下面这样：

const Colors = {
    Red: '#FF0000',
    White: '#FFFFFF'
} as const

type Color = typeof Colors

function getColorName(hex: Color[keyof Color]) {
    return Object.entries(Colors).find(item => item[1] === hex)![0]
}

console.log(getColorName('#FF0000'))
// Red

一定要有as const，不然TS编译器只能推导出Color[keyof Color]是string类型，而不是确切的#FF0000这种。
除此之外，Object.entries方法会把对象的键值对逐个返回，变成一个[key，value]的数组，所以这里的[1]代表着值，[0]代表着键。