TypeScript中动态对象键为何需调用.toString()？

先看你代码里的接口定义：

interface Target {
  name: String;
  value: String;
}

核心原因：类型不匹配 #

TypeScript规定对象的计算属性键必须是string、number、symbol这类原始类型，或者能被推断为这些类型的表达式。但你这里的target.name是大写的String类型——这对应JavaScript里的String包装对象，不是原始的字符串类型，所以TypeScript不认它作为属性键，直接抛出错误。

为啥toString()能解决问题 #

String包装对象调用toString()方法后，会返回它对应的原始string值，此时计算属性键的类型完全符合TypeScript的要求，自然就不会报错了。

更省心的解决办法 #

其实根本问题是你误用了类型，在TypeScript里我们通常用小写的string表示字符串原始类型，修改接口定义即可：

interface Target {
  name: string;
  value: string;
}

这样直接使用[target.name]就没问题了，因为此时target.name是原始字符串类型，完全符合计算属性键的类型要求。

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