Question

我正在尝试使用flowtype检查一些文件。

不幸的是我无法使用dom对象：

我有这段代码

this.canvasContext = this.canvas.getContext('2d');

..返回此错误：

src/CanvasManager.js:43
 43:         this.canvasContext = this.canvas.getContext('2d');
                                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `getContext`. Function cannot be called on
 43:         this.canvasContext = this.canvas.getContext('2d');


                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HTMLCanvasElement

所以基本上流程识别HTMLCanvasElement，但似乎不知道它有getContext方法。

我错过了什么吗？如果没有，有没有办法扩展DOM定义？

创建我自己的HTMLCanvasElement定义会导致名称不匹配：

src/PlayingField.js:23
 23:     constructor(gameController: GameController, canvas: HTMLCanvasElement) {
                                                             ^^^^^^^^^^^^^^^^^ HTMLCanvasElement. This type is incompatible with
 23:     constructor(gameController: GameController, canvas: HTMLCanvasElement) {
                                                             ^^^^^^^^^^^^^^^^^ HTMLCanvasElement

Answer 1

从v0.18.1开始，这似乎是should be fixed的错误。

Answer 2

这仍然是0.22.1中的一个问题。出于某种原因，Flow无法正确地看到document.createElement('canvas')返回HTMLCanvasElement类型，即使这被定义为包含的DOM定义文件中的交集类型。

要解决此问题，只需添加一个if语句来检查document.createElement的返回值的类型。例如：

var canvas = document.createElement('canvas');
if (!(canvas instanceof HTMLCanvasElement)) {
    throw new Error('Unable to construct HTMLCanvasElement.');
}

// Do canvas specific stuff here

流类型和DOM对象

2 个答案: