TypeScript 3.9使用反引号提取类型报TS1005错误的原因

问题复现代码 #

interface IconProps0 {
    size: string,
    type: string
}

interface IconProps {
    iconType?: IconProps0[`type`]; // 使用反引号 - 抛出TS1005: ']' expected
    iconSize?: IconProps0['size']; // 使用单引号 - 正常运行
}

根本原因 #

该报错是旧版本TypeScript语法支持范围限制导致的：

• TypeScript 3.9及更早版本的类型解析器，不支持在索引访问类型（即T[K]形式的类型查询语法）中使用反引号包裹的字符串字面量作为索引键。旧版本解析器仅认可单引号、双引号包裹的普通字符串字面量、数字字面量、合法类型符号作为有效索引值，遇到反引号时无法识别为合法索引，就会抛出缺少]的解析错误。
• 示例中IconProps0[type]使用的反引号字符串没有任何模板插值，语义和普通字符串'type'完全等价。TypeScript从4.3版本开始才正式支持在类型位置使用无插值的模板字符串字面量作为索引，因此4.6版本下该段代码可以正常编译。

解决方法 #

• 全版本兼容方案：将反引号替换为单引号或双引号，即把iconType字段的类型写为IconProps0['type']，和同文件内iconSize的写法保持一致即可，不存在任何功能差异。
• 版本升级方案：如果后续需要使用带插值的模板字面量类型做类型推导，可以将TypeScript版本升级到4.3及以上。

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