javascript - 流: HTMLVideoElement and HTMLElement

Question

我正在使用 Flow 对我的应用进行类型检查。

我有一个 dom 节点，我必须使用 document.querySelector 手动拉取。在 Flow 看来，这会返回一个 HTMLElement。它实际上返回了一个视频元素，我将其类型检查为 HTMLVideoElement。

我正在尝试转换它，但它仍然出错。我做错了什么？

let videoElement: HTMLVideoElement;
videoElement = document.querySelector('video') // type is HTMLElement, errors out.

<video class="lol"></video>

我得到的错误是 This type is incompatible with HTMLVideoElement.

Answer 1

您的错误与它是视频这一事实无关。如果你看the type definition for querySelector('video') , 这是

querySelector(selector: 'video'): HTMLVideoElement | null;

如果您仔细观察， 与您放置在变量上的类型不兼容。 querySelector 可以返回 null 而您忽略了这个事实。 Flow 在这里捕获潜在的错误并让您验证和处理错误案例，这是它的全部工作。

所以你有几个选择

1. 用null注解，并检查何时使用变量来处理它，例如

   let videoElement: HTMLVideoElement | null  = document.querySelector('video');
   

2. 明确检查并抛出，以便流可以知道您希望它出错，例如

   let result = document.querySelector('video');
   if (!result) throw new Error("Video not found");
   
   // Technically you don't need to reassign and you can reuse 
   // 'result' but I'm doing it for clarity.
   let videoElement: HTMLVideoElement = result;
   

3. 使用 any

   告诉 Flow 您 100% 确定它总能找到视频

   let videoElement: HTMLVideoElement = (document.querySelector('video'): any);
   

4. 明确告诉流忽略该行上的错误。在你的 .flowconfig 做

   [options]
   suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore
   

   然后在你的代码中做

   let videoElement: HTMLVideoElement;
   
   // $FlowIgnore
   videoElement = document.querySelector('video');