流类型和DOM对象

Flow type and DOM objects

本文关键字：对象 DOM 类型      更新时间：2023-09-26

我正在尝试使用流类型来检查一些文件。

不幸的是，我无法让它与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

这似乎是一个自v0.18.1以来应该修复的错误。

这仍然是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
相关文章：