Typescript里enum枚举类型动态取值

3,519 阅读1分钟

有时候我们在写代码时,会有根据传入的值来转换成对应的数据这种情况,比如:

const TYPE = {
  'white': '#FFF',
  'black': '#000'
}

// 调用:
let colors = ['white', 'black'];
colors.map(item => <span style={{ color: `${TYPE[item]}`}}>文字颜色</span>)

像这种根据对象的key值来取对应的值,在ts里,如果key值类型多样,也会用枚举之类的来处理,但是直接[变量]这种形式来取,会ts类型检验报错。

image.png

因为enum枚举类型里的key不是单纯的string,number这种类型,枚举的 key 是 string literal 类型。这个时候我们可以用keyof来取出枚举里的所有key值作为type。

type TYPES = keyof typeof TYPE;

image.png

keyof是ts的索引类型操作符,属于ts的高级类型。 对于任何类型T,keyof T得到的类型是T的属性名称字符串字面量类型构成的联合类型。 它同样可以用于获取interface接口定义的属性名称。

interface Person {
  name: string;
  age: number;
  sex: string;
}
type Persons = keyof Person;