Flow: HTMLVideoElement und HTMLElement

Question

Ich verwende Flow, um meine App typecheck.

Ich habe einen Dom-Knoten, den ich manuell unter Verwendung document.querySelector ziehen muss. In den Augen von Flow gibt dies eine HTMLElement zurück. Es gibt tatsächlich ein Videoelement zurück, das ich als HTMLVideoElement eintippe.

Ich versuche, es zu werfen, aber es immer noch Fehler aus. Was mache ich falsch?

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

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

Der Fehler I ist This type is incompatible with HTMLVideoElement bekommen.

Answer 1

Ihr Fehler ist auf die Tatsache, in keinem Zusammenhang, dass es ein Video ist. Wenn Sie bei the type definition for querySelector('video') aussehen, ist es

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

die, wenn Sie genau hinsehen, unvereinbar mit der Art ist, die auf dem Variable gesetzt haben. querySelector kann null zurückgeben und Sie ignorieren diese Tatsache. Flow erfasst hier einen potenziellen Fehler und sorgt dafür, dass Sie den fehlerhaften Fall, der seine gesamte Aufgabe darstellt, überprüfen und behandeln.

So haben Sie ein paar Optionen

1. Beschriften mit null und prüfen Sie, wenn Sie die Variable verwenden, es zu handhaben, zum Beispiel

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

2. Explizit überprüfen und werfen so fließen, dass Sie wollen es auf Fehler, z.B.

   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. Fluss Sagen Sie 100% sicher, dass es immer das Video finden, indem any

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

4. Explizit Flow sagen mit Fehlern auf dieser Linie zu ignorieren. In Ihrem .flowconfig tun

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

   dann im Code tun

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

Answer 2

Ich habe es gerade durch das Hacken um das Typsystem, Gießen es zu any, dann zu HTMLVideoElement Neufassung.

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