打字稿“屬性在類型元素上不存在”

Question

我正在使用 Typescript 開始我的旅程。 所以我的 Html 和.ts文件中有video標簽，這些行：

...
class KomakhaPlayer {
  private container = ...;
  private video: Element = this.container.getElementsByClassName( 'video' )[ 0 ];
  private controls = ...;

  constructor(){
    this.video.controls = false; // ts error
    ...
  }
}
...

如您所見， this.video具有Element類型，但在this.video.controls下this.video.controls我拋出 Typescript 錯誤Property 'controls' does not exist on type 'Element' 。

臨時我將Element類型更改為any ，但我想知道如何正確解決此錯誤並在將來處理類似的問題。 提前致謝！

解決方案：所以正確的方法是這樣定義：

private video: HTMLVideoElement = <HTMLVideoElement>this.container.getElementsByClassName( 'video' )[ 0 ];

@deceze在評論中的解釋

Answer 1

Element是一個非常通用的根對象，它確實沒有controls屬性。 請參閱https://developer.mozilla.org/en-US/docs/Web/API/Element 。 您正在尋找的是一個HTMLVideoElement ，它繼承自HTMLMediaElement ，它具有一個controls屬性。

Typescript 是完全正確的：你告訴它你正在使用一個Element ，並且 Typescript 警告你一個Element不知道有controls 。

Answer 2

鑒於你的陳述（強調我的）

所以我的 Html 和 .ts 文件中有視頻標簽，這些行：

class KomakhaPlayer {
  private video: Element = this.container.getElementsByClassName('video')[0];    
  constructor(){
    this.video.controls = false; // ts error
  }
}

您犯了兩個嚴重錯誤。

首先或最重要的是，要獲得正確的運行時行為，您需要按標簽名稱對元素進行處理。 那就是你使用document.getElementsByTagName而不是document.getElementsByClassName 。

解決這個結果

class KomakhaPlayer {
  private video: Element = this.container.getElementsByTagName('video')[0];    
  constructor(){
    this.video.controls = false; // ts error
  }
}

仍然存在錯誤。

這是因為一個嚴重的誤解。 您在程序中過度指定了類型，阻止了語言執行其高度復雜的類型推斷。 您從video字段中刪除: Element類型注釋，您編寫代碼進行類型檢查，因為編譯器具有更多類型信息而不是更少。 少說多做。

class KomakhaPlayer {
  private video = this.container.getElementsByTagName('video')[0];    
  constructor(){
    this.video.controls = false;
  }
}

游樂場鏈接

TypeScript 是關於具有類型信息而不是類型書寫類型注釋。 在編譯器不知道類型是什么或何時要形式化 API 時編寫類型注釋，而不是在初始化字段時。

Answer 3

這在我的代碼中對我有用。

const value = 'hello world';

const el: HTMLElement = document.getElementById('id_of_element') as HTMLElement;
el.innerHTML = value;