フロー：HTMLVideoElementとHTMLElement

Question

私はフローを使用して自分のアプリケーションを型チェックしています。

私はドームノードを持っています。手動でプルする必要があります。document.querySelector。フローの目では、これは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を返すことができ、あなたはその事実を無視しています。フローはここで潜在的なバグを捉えており、その全体の仕事であるバグのケースを確認して処理するようにしています。

だから、あなたは、いくつかのオプション

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. あなたは100％を確認してください、それは常に明示的にそのライン上のエラーを無視する流れを教えてany

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

4. を使用してビデオを見つけるの流れを教えてください。あなたの.flowconfig

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

   を行うには、あなたのコード内で

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

Answer 2

型システムをハッキングして、それをanyにキャストし、それをHTMLVideoElementにリキャストして、ちょうどそれを動作させました。

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