使用反引号作为对象键时出现TS1136错误的原因及修复方法

你遇到的问题是因为在对象字面量中使用动态属性名时，没有遵循TypeScript/JavaScript的计算属性名语法规则。直接写${str}: 'myValue'会被解析器误判为无效语法，从而抛出TS1136等一系列错误。

修复方案 #

将动态属性名用方括号[]包裹，这是ES6+标准的计算属性名写法，TypeScript完全支持：

const str = 'myKey'
const obj = {
    [`${str}`]: 'myValue', // 用方括号包裹模板字符串
};
console.log(obj);

错误原因解析 #

原来的代码没有用方括号包裹动态属性名，TypeScript解析器无法识别${str}是属性名，反而把它当成了独立的表达式，后续的: 'myValue'就变成了无效的语法结构，因此触发了多个语法错误。

验证结果 #

修复后的代码编译运行后，会输出预期结果：

{ myKey: 'myValue' }

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