vue3.0+ts Property 'XXX' does n

2022-06-06  本文已影响0人  冰落寞成

1、应用场景

在使用vue3.0+ts 搭建的项目中,遇到如下错误


1654477466538.png

具体代码如下:

 let subviewMenus = menusArr.filter((item)=> {
            return item?.subview === config.subMenusId
              // return item
            })

2. 分析原因

经过尝试发现,在TypeScript环境中如果按JS的方式去获取对象属性,就会提示形如Property 'xxx' does not exist on type 'XXX'的错误。

这是因为Typescript在执行代码检查时,如果该对象没有定义相应属性的类型,就会产生该报错。

3. 解决办法

1. 将报错位置类型转为any(不推荐)

可以尝试将报错位置的代码类型,写成any类型,

 let subviewMenus = menusArr.filter((item:any)=> {
              return item?.subview === config.subMenusId
              // return item
            })
2. 用类型断言强制通过编译

用类型断言来强制通过TS的编译

(item] as any)

3.使用interface定义对象所有属性(推荐)

interface MenusTree {
  route?: string |null,
  label?: string |null,
  subview?: string |null,
  children?: object|null,  
}
let subviewMenus = menusArr.filter((item:MenusTree)=> {
              return item?.subview === config.subMenusId
              // return item
            })
上一篇 下一篇

猜你喜欢

热点阅读