TypeScript动态前缀接口键赋值报错问题求助

我定义了包含added_${string}这类动态前缀键的Filters接口，但赋值时报错，代码示例：

interface Filters {
    name?: string;
    [k: `added_${string}`]: undefined | number | string;
    [k: `removed_${string}`]: undefined | number | string;
}
const id = 'abc';
const field = `added_${id}`;
const filters:Filters = {};

filters[field] = 1; // 报错
filters[field as keyof Filters] = 1; // 报错

错误原因 #

1. TS版本限制：当前使用的TS 4.4版本对模板字符串类型的索引签名支持不完善，无法自动识别added_abc这类具体字符串属于接口定义的动态前缀键类型。
2. keyof解析问题：keyof Filters会被解析为"name" | string，TypeScript无法确认断言后的field符合added_前缀的约束，因此仍然报错。

解决方法 #

方法1：升级TypeScript版本 #

TS 4.5及以上版本优化了模板字符串索引的类型推断逻辑，直接运行原代码即可正常赋值，无需额外修改。

方法2：精准类型断言 #

如果无法升级版本，将field断言为对应的模板字符串类型：

filters[field as `added_${string}`] = 1;

方法3：改用映射类型定义接口 #

用映射类型替代多索引签名，TS 4.4版本也能正确识别：

type Filters = {
    name?: string;
} & {
    [K in `added_${string}` | `removed_${string}`]: undefined | number | string;
};

const id = 'abc';
const field = `added_${id}`;
const filters:Filters = {};

filters[field] = 1; // 正常运行

内容的提问来源于stack exchange，提问作者d-_-b