元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型

今天在写ts文件的过程中,我遍历了一个对象,然后取值的时候发现爆红,如下图
元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型_第1张图片
经过我一通排查(原因我对ts也不是很熟练),了解到大致意思是说key的值类型不是string类型,在javascript中是默认给你转好的,而在Typescript中则不是,因此要么转,要么声明,要么忽略…

  • 方案一:忽略
    tsconfig.jsoncompilerOptions里面新增忽略的代码,就不会报错了,如下
"suppressImplicitAnyIndexErrors": true
  • 方案二:声明
    在定义的Interface里对其进行声明,如下所示:
interface IComponent {
    [key:string]: any
}
const allGloablComponent:IComponent = {SvgIcon,Pagination};

元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型_第2张图片
或者可以直接省略interfaceconst后面定义类型也OK
元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型_第3张图片

  • 方案三:对其使用keyof进行判断
之前这样的,爆红:
allGloablComponent[key]
修复之后这样写:
allGloablComponent[key as keyof typeof allGloablComponent]

已经不报错啦!!!
元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型_第4张图片
个人推荐方案二和方案三,方案一有点any的味道,意义不大,不推荐!

你可能感兴趣的:(TypeScript,vue3,前端框架,vue,typescript)