公众号:CS阿吉
参与维护独立YSHG项目:
在 业务背景下,基于vue + ts技术栈,我负责前端 【规则统一】模块的开发,最后 完成模块的上线更新。
我在运行项目的时候,终端ts没有报类型错误,但实际上是存在类型错误的,npm run build 由于类型错误而发生打包错误。你一次 npm run serve , 只有第一次编译提示你类型错误。后面的热更新不会提示。
类型检查只在第一次编译的时候做。
建议:1.每次都control+c ,重新 npm run serve
2. 利用插件:这是webpack一个插件,fork什么什么的,vue-cli自己配的。用于异步类型检查,加快编译速度。
坑1:
定义函数参数为 string 类型, 传入参数类型类 Dictionary<string | string[]> ,报错:
解决:类型断言 as
this.oneAppInformation = await RuleService.getOneApp(this.$route.query.id as string);
坑2:
我裂开了,这个不属于踩坑,最后发现是我函数返回值的类型CV大法忘记修改了,导致了三个报错信息。
解决:修改函数返回值类型即可。
坑3:
本来定义的数据类型为:
oneAppInformation: AppInformationItem | {};
根据错误提示,进行删除
解决:
oneAppInformation: AppInformationItem;
或者是参考 typescript报错,类型{}不存在属性,这是为什么?
坑4:
传入的实参个数与形参个数不相符,这个属于简单失误,不算坑。
解决:
async postAppInfo() {
await ApkService.updateUserApkNetworkTagNotice(
this.oneAppInformation.apkName,
this.list
);
}
坑5:
对interface约束的变量进行赋值,报错属性未定义。
源代码:
一开始我这样子解决,事件可以正常触发,进行赋值,但是终端还是会报错:
后来感觉: 直接对变量进行初始化,并且类型断言,然后成功了。
newRuleItem: NewRuleItem = {} as NewRuleItem;
这个问题和 百度出来的这个是一种类型: ts中对有interface约束的变量赋值