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<string>
}
const handleClick = (e:clickEvent) => {}
利用interface来检测对象中的属性类型，就是会麻烦一些，但却是最推荐的解决方法。
