TypeScript接口静态属性itemName与动态索引类型冲突问题解决

问题说明 #

需要定义Item接口，要求必须包含itemName字符串属性，同时允许添加任意名称的额外属性，且额外属性类型为ItemProperty。原实现代码如下：

interface ItemProperty {
    foo: string;
    bar: string;
}
interface Item {
    itemName: string;
    [propertyName: string]: ItemProperty;
}

但触发错误：

Property 'itemName' of type 'string' is not assignable to 'string' index type 'ItemProperty'.

问题根源在于：TypeScript接口的字符串索引签名会约束所有字符串键的属性类型，itemName的string类型与索引签名要求的ItemProperty类型不兼容，导致冲突。

解决方案 #

使用交叉类型将固定属性和带索引签名的约束合并，既保留固定属性的类型要求，又满足动态属性的规则：

方案一：拆分接口后交叉 #

interface ItemProperty {
    foo: string;
    bar: string;
}

// 定义仅包含固定属性的基础接口
interface BaseItem {
    itemName: string;
}

// 定义仅包含动态属性索引签名的接口
interface DynamicItem {
    [propertyName: string]: ItemProperty;
}

// 交叉两个接口得到最终的Item类型
type Item = BaseItem & DynamicItem;

方案二：直接用类型别名交叉 #

也可直接在类型别名中完成交叉，写法更紧凑：

interface ItemProperty {
    foo: string;
    bar: string;
}

type Item = {
    itemName: string;
} & {
    [propertyName: string]: ItemProperty;
};

验证示例 #

使用上述定义后，目标代码可正常运行：

const item: Item = {
    itemName: "Item 1",
    dynamicProperty1: {
        foo: "foo",
        bar: "bar"
    }
};

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