Konva从2.5.1升级至6.0.0后Angular项目TypeScript编译错误问题求助及解决记录

最近把Angular项目里的Konva从2.5.1升级到6.0.0时踩了个坑，一堆TS编译错误卡了我好久，整理下解决过程给遇到同样问题的朋友参考。

问题重现 #

我们项目里原本用Konva的TS代码是这样的：

import * as Konva from 'konva';
...
private _stage: Konva.Stage;
...
this._stage = new Konva.Stage();
...
const box: Konva.Rect;
const boxShape: Konva.Shape;

升级后执行构建，直接弹出一堆类似下面的错误：

error TS2694: Namespace ".../node_modules/konva/lib/index-types" has no exported member 'Rect'.
error TS2694: Namespace ".../node_modules/konva/lib/index-types" has no exported member 'Node'.
error TS2694: Namespace ".../node_modules/konva/lib/index-types" has no exported member 'Shape'.

项目环境 #

• TypeScript版本：4.0.7
• Angular版本：10.2.5
• TS编译目标：es2015

排查过程 #

一开始我留意到，旧版本Konva会提供Konva.d.ts作为TypeScript类型定义文件，但新版本换成了index-types.d.ts，而且这个文件里少了SizeConfig之类的旧类型。我试着把导入语句改成import Konva from 'konva';，结果还是因为缺失类型报错，没解决问题。

最终解决方法 #

后来仔细对比新旧版本的类型文件才发现，Konva 6.0.0的index-types.d.ts移除了一些官方不再维护的旧类型——比如我们代码里用到的Rect{x1:number, y1:number, x2:number, y2:number}这类。

知道原因就好办了：在项目里自行补充这些缺失的类型。我是在项目的全局类型定义文件（比如src/typings.d.ts）里加了这些定义：

declare namespace Konva {
  // 补充项目用到的缺失类型
  interface Rect {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
  }

  interface Node {
    // 按需补充你的代码用到的Node相关属性/方法
  }

  interface Shape {
    // 按需补充你的代码用到的Shape相关属性/方法
  }
}

补充完之后再构建，就顺利通过了。

注：这是我第一次分享这类问题，要是表述有不对的地方欢迎大家指出~

内容的提问来源于stack exchange，提问作者P_B