TypeScript v4.4.3 接口模板字面量类型索引签名使用变量报错问题

你遇到的报错是TS版本对模板字面量计算属性的推导规则限制导致的，具体逻辑如下：
TS的模板字面量索引签名仅能匹配类型可被推导为对应模板字面量子集的key：

1. 硬编码的added_abc属于字符串字面量，完全满足added_${string}的类型要求，所以不会报错。
2. 只要模板字符串中嵌入了变量，在TS 4.4版本中，无论变量是不是const定义的字面量，最终拼接出来的模板字符串都会被推导为通用string类型，而非added_${string}类型。而你的IDocument接口没有定义通用string类型的索引签名，TS就会判定索引类型不匹配，抛出ts(2322)错误。

可行的解决方法 #

• 显式给计算属性加类型断言，主动告知TS该key符合索引签名要求：

const id = 'id';
const document: IDocument = {
  [`added_${id}` as `added_${string}`]: [1970]
}

• 升级TypeScript版本到4.8及以上，后续版本优化了模板字面量的推导逻辑，const变量拼接的模板字符串会自动被推导为对应的模板字面量类型，无需额外断言即可正常匹配索引签名。
• 不推荐的兜底方案：给IDocument增加通用string索引签名，会丢失索引类型校验能力：

interface IDocument {
  [added_: `added_${string}`]: number[] | undefined;
  [key: string]: any;
}

后续排查方向 #

如果修改后还有问题，可以从这几个方向确认：

• 核对实际使用的TS版本：可运行tsc -v确认全局版本，VSCode用户需要确认工作区使用的TS版本是否和项目依赖的版本一致。
• 查看计算属性的推导类型：在编辑器中 hover 到模板字符串key上，确认TS推导的类型是否为added_${string}，如果还是普通string类型，可尝试给嵌入的变量加as const断言缩小类型范围。
• 检查是否有其他索引签名冲突：如果接口同时定义了多个索引签名，需要确认不同签名的返回类型是否兼容。

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