TypeScript创建带联合类型键的对象接口报错求助

你遇到的这两个错误其实都是TypeScript语法规则导致的，咱们一步步拆解解决：

为什么第一种写法报错？ #

普通的接口索引签名（[key: ObjectsType]）只允许参数类型为string、number、symbol或者它们的字面量子类型，不能直接用联合类型，所以TypeScript提示你改用映射类型。

为什么第二种写法也报错？ #

[key in ObjectsType]这种映射语法是TypeScript类型别名（type）专属的，接口（interface）不支持这种计算属性名的写法，所以会提示你计算属性名必须是字面量类型或唯一符号。

正确的解决方案 #

方案1：使用类型别名 + 映射类型 #

把interface改成type，就能正常使用映射语法了：

export type ObjectsType = 'text' | 'image' | 'circleText';
export type IAllowedObjects = { [key in ObjectsType]: boolean };

这个写法会遍历ObjectsType里的每一个联合成员，把它们作为对象的键，值类型统一为boolean。

方案2：使用内置的Record工具类型 #

TypeScript提供了Record<K, T>工具类型，专门用来快速创建“键为K类型、值为T类型”的对象类型，写法更简洁：

export type ObjectsType = 'text' | 'image' | 'circleText';
export type IAllowedObjects = Record<ObjectsType, boolean>;

效果和方案1完全一致，只是语法更精炼。

（可选）如果一定要用interface怎么办？ #

如果业务场景必须用接口，可以先通过类型别名创建映射类型，再让接口继承它：

export type ObjectsType = 'text' | 'image' | 'circleText';
type AllowedObjectsBase = { [key in ObjectsType]: boolean };
export interface IAllowedObjects extends AllowedObjectsBase {}

不过这种写法没必要，除非你需要在IAllowedObjects里额外添加其他属性。

内容的提问来源于stack exchange，提问作者Sunil Kashyap