Vue3.0 + TS 编译报错 property does not exist on type Object

1. 场景

在用Vue3.0 + VueRouter4.0 + AntdVue + TS搭建的项目中，编译过程中遇到了如下报错：

项目编译报错截图.png

项目中的代码如下：

const handleClick = (e:Event) => {
  let basePath:string = "/home";
  let routerPath:string = "";
  if(e.keyPath.length > 1) {
    e.keyPath.reverse().map((item:string) => {
      routerPath += "/"+item;
    });
  }else {
    routerPath = "/" + e.keyPath[0];
  }
    router.push(basePath + routerPath);
  }

2. 分析原因

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

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

3. 解决办法

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

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

const handleClick = (e:any) => {}

修改成any过后，通过编译。但是好像也失去了用TypeScript的意义，所以不推荐用any类型来解决这个问题。

2. 用类型断言强制通过编译

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

// 所有用到了e.xxx的地方替换成
(e as any).xxx

3. 通过interface定义对象所有属性(推荐)

通过TypeScript中的interface来定义对象中的属性类型

interface clickEvent {
  keyPath: Array
}
const handleClick = (e:clickEvent) => {}

利用interface来检测对象中的属性类型，就是会麻烦一些，但却是最推荐的解决方法。