YSHG项目 Typescript踩坑之路

公众号：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约束的变量赋值