TypeScript访问对象属性时报错ts(1003)标识符预期如何修复？

问题原因 #

你遇到的Identifier expected. ts(1003)报错属于语法规范错误，是因为动态访问对象属性时写了多余的点号：
JS/TS中访问对象属性有两种合法写法：

• 静态属性访问：对象.属性名，要求属性名是固定的合法标识符
• 动态属性访问：对象[变量/表达式]，不需要在方括号前额外加点号
  你写的otherPokemon.base.[key]多了一个多余的点，违反了语法规范，虽然部分打包/运行环境做了语法兼容让代码可以实际运行，但TypeScript的静态检查会直接识别为语法错误标红。

解决方法 #

把otherPokemon.base.[key]里多余的点号删掉，改成otherPokemon.base[key]即可。

修改后的子组件代码参考：

<List component="div" disablePadding>
  {Object.entries(pokemon.base).map(([key, value]) => {
    console.log(otherPokemon.base[key])
    return(
    <ListItem>
        <ListItemText>{key + ": " }<span className={value > otherPokemon.base[key] ? classes.more : classes.less}>{value}</span></ListItemText>
    </ListItem>)
  })}
</List>

可选优化 #

如果修改后依然有类型不匹配的标红，可以给动态key加上类型断言，明确告知TS这个key属于base对象的合法属性：

otherPokemon.base[key as keyof typeof otherPokemon.base]

内容的提问来源于stack exchange，提问作者m.said