《TypeScript图形渲染实战：2D架构设计与实现》 —1.3.2 解决生成tsconfig.json文件后带来的常见

1.3.2  解决生成tsconfig.json文件后带来的常见问题

　　如图1.20所示，当生成tsconfig.json文件后，原本的main.ts文件会被标记为红色，并显示有一个错误。之所以这样，是因为在默认状态下，tsconfig.json中的strict命令被设置为true，此时VS Code会对所有TS源码进行严格的类型检测（strict type-checking）。

图1.20  TS源码错误提示

　　解决这个问题有两种方式：

* 简单地将strict命令设置为false，停止VS Code的严格类型检测。

* 根据VS Code的错误提示修改源码，使之符合VS Code的检测要求。

　　来看一下VS Code的错误提示：不能将类型" CanvasRenderingContext2D | null "分配给类型"CanvasRenderingContext2D"，这是因为canvas . getContext ( "2d" )的返回类型是CavasRenderingContext | null，而在类Canvas2DUtil中声明的成员变量context的类型是CanvasRenderingContext，和getContext ( "2d" )方法返回的类型不匹配。因此修正代码如下：

class Canvas2DUtil {

   public context : CanvasRenderingContext2D | null ;

}

　　在TypeScript中允许使用“|”操作符来表示联合类型，联合类型是用来表示一个值具有多种不同的类型。上述代码中使用联合类型意味着可以将类型CanvasRendering Context2D或null赋值给context变量。当完成上述修改后，会产生更多的错误，如图1.21所示。

图1.21  更多错误提示

　　VS Code提示的错误都是“对象可能为null”，因此我们要做的是在调用this . context之前进行null值检查，就能消除VS Code的错误提示。

If ( this . context !== null ) {

       this . context . save ( ) ;

       this . context . textBaseline = "middle" ;

       this . context . textAlign = "center" ;

       . . . . . . .

       . . . . . . .

       this . context. restore ( ) ;

}

　　在笔者使用TypeScript的过程中，“类型不匹配”和“需要null值检测”是被提示最多的信息，因此值得花点时间和篇幅来了解解决方案。在实际开发过程中，使用严格类型检测的确会增加一些代码，但是其所带来的优势也是非常明显的，即让程序更加健壮，这也是TypeScript的魅力所在。