Angular从JSON读取组件名添加this前缀报Identifier expected错误如何解决

错误原因 #

this.[name]属于语法错误，JavaScript/TypeScript 中使用动态变量访问对象属性时，this 和方括号之间不需要额外加英文点，多余的点会触发「Identifier expected」报错。

修复代码 #

基础修复 #

直接删除this和方括号之间的点即可：

test(name: string) {
  return this[name];
}

TypeScript 环境兼容处理 #

如果 TypeScript 抛出索引签名相关报错，可以添加类型断言避免类型校验失败：

test(name: string) {
  return (this as Record<string, unknown>)[name];
}

修改后调用this.test('MyComponent')即可正常返回this.MyComponent的引用。

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