TypeScript中创建字典时如何让常量值替代常量名作为键名？

这是个很常见的小坑，我来帮你快速搞定！

你当前的代码里，对象字面量直接写myKey时，JavaScript/TypeScript会默认把它当作字符串字面量键名，而不是去读取变量myKey的值。所以才会得到{ myKey: 'some value' }而不是你期望的结果。

解决方案：使用计算属性名 #

在TypeScript（以及ES6+的JavaScript）中，想要用变量的值作为对象的键名，只需要把键名用方括号[]包裹，这就是「计算属性名」语法。

修正后的代码如下：

const myKey: string = 'something'
const myDict: { [id: string]: string } = { [myKey]: 'some value' }

原理说明 #

方括号[myKey]会告诉编译器：这里不要把myKey当成字符串，而是去取这个变量的实际值（也就是'something'），然后用这个值作为对象的键名。这样生成的字典就完全符合你的预期：{ 'something': 'some value' }。

这个语法非常实用，不管是动态生成键名，还是用常量值固定键名的场景都能用上，而且是ES6之后的标准语法，TypeScript完全兼容。

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