挑战Typescript项目中的strict编译模式

概述

将手上的angular项目升级最新版本，并将typescript也升级到最新版本，结果vs code中打开tsconfig.json有个红色的警告，说是添加strict选项，以减少类型错误。作为一个有强迫症的程序员，决定一试，用这个选项来提高代码的优雅度。

加入strict选项后，运行ng build之后，原本运行正常的程序，突然之间出现了一堆错误。

后边对修正的内容进行一一记录。

变量参数

用了strict参数后，所有参数变量都要指定类型。否则报这样的错误：

error TS7006: Parameter 'name' implicitly has an 'any' type.

 本来any是没问题的，但现在必须显示指定。比如一个类方法是这样的：

getDataStore(name, keyExpr, needpage?, aditional?) 

现在就变成，最后一个参数可以直接指定any类型：

getDataStore(name:string, keyExpr:string, needpage?:boolean, aditional?:any)  

 再如下边这个错误：

error TS7005: Variable 'items' implicitly has an 'any[]' type.

const items=[];

......

return items;

 编译器认为这样隐匿any[]类型不行，要显式指出，改成这样就过了：

const items:any[] = [];

……

return items;

 当然有条件的话，能定义相应的接口类型，这样可以更加有利于定位错误。

空值（null）检查

用strict编译选项后，如果上下文不能保证变量不为null，则会报错，比如：

error TS2531: Object is possibly 'null'.

24     const modes = localStorage.getItem('modes').split(',');

 这里从本地存储中获取一个值。虽然业务上保证这地方不可能为null，但从编译器的角度来讲，只要不是直接定义赋值的地方都有可能为null，所以报了这个错。实际上就是要求split()方法前的对象必须有效。

那这里修改思路有两个，一是给定默认值，另一个如果为null则不调用split()，这里采用后者，代码自改成如下：

 const str = localStorage.getItem('modes');
    if (str) {
      const modes = str.split(',');
}

编译通过。

再比如以下错误：

error TS2322: Type 'null' is not assignable to type '{ email: string; userName: string; }'.

394     this._user = null;

 原因是_user在定义的时候，显式给字类型，而null并不是从给定类型继承的，所以不能赋值，这跟java，c#之类的编程语言不同，不能直接给null，此时还是用any大法，在定义的时候指定any类型：

private _user: any = { email: '', userName: '' };

 还有属性为空的情况：

error TS2531: Object is possibly 'null'.

16     let p=route.routeConfig.path??'';

 改成这样：

 let p=route.routeConfig?.path??'';

 再来一个null问题：

Error: src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts:85:7 - error TS2531: Object is possibly 'null'.

85       this.menu.instance.collapseAll();

 代码修改为：

this.menu?.instance?.collapseAll();

编译通过。

 类型匹配

当一个值可能为null的时候，会引起类型匹配的异常。比如下边这个错误，它是将null当成一种类型，因为userId有可能为null，所以出现了因类型不匹配而不能赋值的错误。考虑到此处null没有什么实际意义，可以强制为string类型。

Argument of type 'string | null' is not assignable to parameter of type 'string | Blob'.
  Type 'null' is not assignable to type 'string | Blob'.

353       formData.append('userId', this.userId);

代码修改如下：

formData.append('userId', this.userId + '');

 编译通过。

看一个参数类型不一致的情况：

error TS2345: Argument of type 'number' is not assignable to parameter of type 'never'.

43     this.viewBox.push(width);

 这里把width改any类型即可：

let width:any=....;

属性初始化

类属性如果没做初始化，也会编译报错：

error TS2564: Property 'user' has no initializer and is not definitely assigned in the constructor. 

21   user: { email: string, userName: string };

这里给个初始值：

@Input()
  user: { email: string; userName: string } = { email: '', userName: '' };

 感觉这地方有点多余，本来可以进行空值判断的，这么一改变成默认值判断了。

不能初始化null的错误：

Error: src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts:39:3 - error TS2322: Type 'null' is not assignable to type 'DxTreeViewComponent'.      

39   menu: DxTreeViewComponent = null;

 因为null是个独立的类型，如果初始化需要事先设为null，那么要给变量指定null类型：

  @ViewChild('mapdiv', { static: true }) mapdiv: ElementRef | any= {};

再看一个 never类型的错误：

error TS2339: Property 'name' does not exist on type 'never'.

72     return t?.name;

原来代码是这样的：

const t = this.usingVehicleTypes.find((el) => el.id === id);
    return t?.name;

 大概是find()返回值不符合Array所定义的返回类型，因此造成类型不匹配的错误，修改如下：

const t:any = this.usingVehicleTypes.find((el:any) => el.id === id);
    return t?.name;

 暂时先去除类型检查，编译通过。

总结

这个项目开始时，是当成js来写了，充分使用了js的动态特性，所以大部分地方都没标注变量类型，在strict选项下，给变量加类型标注成了最主要的任务。由于json对象，基本从服务器端获得的，客户端并未定义相应的数据类型，有时加类型标注成了困难，好在有个any对象，暂时全部标注成any。总之，强类型的编程语言有利于代码的维护，但ts建立js之上的，有时不知不觉会去使用js的特性，而ts的强类型特性就会带来困扰，所以在用ts的时候，我们要注意这当中的变化。