[英]Using enum as interface key in typescript
我想知道我是否可以在接口中使用 enum 作为对象键。我已经为它做了一个小测试:
export enum colorsEnum{
red,blue,green
}
export interface colorsInterface{
[colorsEnum.red]:boolean,
[colorsEnum.blue]:boolean,
[colorsEnum.green]:boolean
}
当我运行它时,我收到以下错误:
A computed property name in an interface must directly refer to a built-in symbol.
我做错了还是不可能?
您可以尝试使用类型:
export enum colorsEnum{
red, blue, green
}
export type colorsInterface = {
[key in colorsEnum]: boolean;
};
let example: colorsInterface = {
[colorsEnum.red]: true,
[colorsEnum.blue]: false,
[colorsEnum.green]: true
};
或者,如果您不想使用所有键:添加 ?
export type colorsInterface = {
[key in colorsEnum]?: boolean;
};
let example: colorsInterface = {
[colorsEnum.red]: true,
[colorsEnum.blue]: false
};
好的,关键思想是将 Enum 转换为正确的类型并使用它扩展接口: 您可以在此处查看实时代码。
const enum Enum {
key1 = "value1",
key2 = "value2",
key3 = "value3",
}
type EnumKeys = keyof typeof Enum;
type EnumKeyFields = {[key in EnumKeys]:boolean}
interface IEnumExtended extends EnumKeyFields {
KeyEx1:boolean;
KeyEx2:string;
}
// Test it
const enumInstance: IEnumExtended = {
};
当您进入enumInstance
您将获得 Enum 键的自动完成功能,而不是值。
要定义接口,必须提供成员名称而不是计算。
export interface colorsInterface {
red: boolean;
blue: boolean;
green: boolean;
}
如果您担心保持枚举和接口同步,您可以使用以下方法:
export interface colorsInterface {
[color: number]: boolean;
}
var example: colorsInterface = {};
example[colorsEnum.red] = true;
example[colorsEnum.blue] = false;
example[colorsEnum.green] = true;
TypeScript 非常乐意让您将枚举作为索引传递,例如,如果您决定重命名red
,则重命名重构会将所有内容保持在一起。
为什么不让它尽可能简单:
export enum Color {
Red = 'red',
Blue = 'blue',
Green = 'green'
}
export interface IColors{
[Color.Red]: boolean,
[Color.Blue]: boolean,
[Color.Green]: boolean
}
使用本机Record<Keys, Type>
实用程序的简单解决方案。 ( 文档)
export enum Colors {
RED = 'red',
GREEN = 'green',
BLUE = 'blue'
}
export type ColorInterface = Record<Colors, boolean>
这种类型转换为:
// translates to:
export type ColorInterface = {
red: boolean;
green: boolean;
blue: boolean;
}
重要提示:您必须定义一个enum
键并将值相应地映射到它们,否则,您将获得一个使用枚举index
的类型/接口,如下所示:
export enum Colors {
'red',
'green',
'blue'
}
export type ColorInterface = Record<Colors, boolean>
// translates to:
export type ColorInterface = {
0: boolean;
1: boolean;
2: boolean;
}
或者,如果您不想显式定义枚举键,或者如果您只有几个键可以使用,您也可以使用type
别名定义颜色,这也将正确转换为您需要的:
export type Colors = 'red' | 'green' | 'blue'
// will also translate to:
export type ColorInterface = {
red: boolean;
green: boolean;
blue: boolean;
}
这对我们有用:
type DictionaryFromEnum = {
[key in keyof typeof SomeEnum]?: string
}
注意:需要TypeScript ^4.1 。
示例:
enum Color {
red,
blue,
green,
}
// Define valid colors
// type TColor = 'red' | 'blue' | 'green';
type TColor = keyof typeof Color;
// Define object structure, with `color` as prefix for each `TColor`
type TWithColorCode = {
[colorKey in TColor as `color${Capitalize<string & colorKey>}`]: string;
};
const a: TWithColorCode = {
// All properties will be required
colorGreen: '#00FF00',
colorBlue: '#0000FF',
colorRed: '#FF0000',
};
// Extending an `interface`:
export interface ICarRGB extends TWithColorCode {
id: number;
name: string;
// Optional property
createdAt?: Date;
}
const b: ICarRGB = {
id: 1,
name: 'Foo',
colorGreen: '#00FF00',
colorBlue: '#0000FF',
colorRed: '#FF0000',
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.