流类型：使用返回父 class 的函数的扩展 class

Question

如何让流程将 document.getElementById 中的 return 值解释为 HTMLInputElement，而不是更一般的 HTMLElement？

示例：

let input = document.getElementById('myinput');
console.log(input.value);


script.js:28
 28:   console.log(input.value);
                         ^^^^^ property `value`. Property not found in
 28:   console.log(input.value);
                   ^^^^^ HTMLElement

来自https://github.com/facebook/flow/blob/master/lib/dom.js

declare class Document extends Node {
  …
  getElementById(elementId: string): HTMLElement;
  …
}

但是，getElementById 可以 return 一个子类（在本例中 HTMLInputElement）

declare class HTMLInputElement extends HTMLElement {
  …
  value: string;
  …
}

我希望能够在不引发错误的情况下访问输入元素的 value 属性。

Answer 1

问题是 Flow 编译器不知道什么类型的 HTMLElement input 变量会提前，它会抛出错误。

在这种情况下，通常建议人们这样做：

var input = document.getElementById('myinput');

if (input instanceof HTMLInputElement) {
    console.log(input.value);
}

在文档的 dynamic type tests 部分阅读有关此技术的信息。

流类型：使用返回父 class 的函数的扩展 class

Flow type: use extended class from function returning parent class

javascript

flowtype