TypeScript 中帶有箭頭 < type > 的賦值是什么意思？

Question

我知道冒號設置了變量的類型，但是對於所提供的類型，帶箭頭的賦值意味着什么？

const mainVideo: HTMLVideoElement = <HTMLVideoElement> document.getElementById('mainVideo');

我一開始使用的是 mainVideo : HTMLVideoElement = document.getElementById('mainVideo') ，但它不允許我使用元素上的任何方法，但是用箭頭分配 mainVideo 使一切正常。 想知道為什么會這樣，它叫什么。

Answer 1

這叫做類型斷言。

將類型斷言視為一種通過覆蓋實體類型使其更具體的方法。

// this is an Element
let element = document.querySelector("#list");


// but I can make it more specific, by overriding its type
let element = <HTMLElement> document.querySelector("#list");

您還可以使用其他語法：

let element = document.querySelector("#list") as HTMLElement;

當心。 您不希望在任何地方都使用類型斷言，只在需要的地方使用。 否則，您的代碼可能需要重構。

此外，並非總是可以進行類型斷言。 只有當任何一種類型與另一種類型充分重疊時。 所以，如果你這樣寫：

let element = document.querySelector("#list") as String;

VSCode 說：

將 'Element' 類型轉換為 'String' 類型可能是錯誤的，因為這兩種類型與另一種類型都沒有足夠的重疊。

“元素”類型缺少“字符串”類型中的以下屬性：charAt、charCodeAt、concat、indexOf 和 34 個更多

確保您可以執行此奇怪斷言的一種方法是首先將表達式轉換為unknown ：

let element = document.querySelector("#list") as unknown as String;

即使它有效，請確保您知道這是值得的。

---

發生了什么在你的使用情況是getElementById是它返回一個方法HTMLElement ，而不是，具體而言， HTMLVideoElement 。

// it could be HTMLDivElement or HTMLInputElement, for example.
Document.getElementById(elementId: string): HTMLElement

因此，當您進行類型斷言時，您基本上是在說：

我知道這個方法將返回一個更具體的HTMLElement版本，稱為HTMLVideoElement 。