流类型和 DOM 对象答案

【问题标题】：Flow type and DOM objects流类型和 DOM 对象
【发布时间】：2016-03-05 07:44:08
【问题描述】：

我正在尝试使用 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

所以基本上 flow 可以识别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

【问题讨论】：

有错误信息不完整：“函数不能被调用”...它说什么？
消息是完整的，但它很麻烦：- 它只是分成不同的行call of method `getContext`. Function cannot be called on HTMLCanvasElement

标签： javascript dom gulp ecmascript-6 flowtype

【解决方案1】：

似乎这是 should be fixed 自 v0.18.1 以来的错误。

【讨论】：

我尝试更新 - 0.19 中仍然存在错误：$ flow version Flow, a static type checker for JavaScript, version 0.19.0
奇怪。声明是right there，在核心库源代码中。使用 0.19，您可以提供自己的声明，这将覆盖核心库。请参阅0.19.0 announcement blog post 中有关声明文件的部分。
我在 Flow 0.19 上遇到了同样的问题。更新到Flow 0.20后，错误变为：call of method `getContext`. Function cannot be called on intersection: function type(s).
0.22.1版本还是这个问题。

【解决方案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

【讨论】：