Question

我正在使用Typescript开始我的旅程。所以我的Html和video文件中都有.ts标记这些行：

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

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

正如您所看到的，this.video有元素类型，但在this.video.controls下面会抛出一个Typescript错误属性“控件”在“元素”类型上不存在即可。

临时我将Element类型更改为any，但我希望知道如何正确解决此错误并在将来处理类似错误。提前致谢！

解：所以正确的方法是这样定义：

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

中的 @dezeze 说明

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
  }
}

而且仍然有错误。

这是由于严重的误解。您已经在程序中过度指定了类型，从而阻止了语言执行其高度复杂的类型推断。您从: Element字段中删除了video类型注解，您进行了代码类型检查，因为编译器的 more 类型信息 not 更少。少说多说。

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

Playground Link

TypeScript是关于具有类型信息而不是类型编写类型注释的。在编译器不知道类型是什么或何时要对API进行形式化时（而不是在初始化字段时）编写类型注释。

Answer 3

这在我的代码中对我有用。

const value = 'hello world';

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

打字稿“属性在元素上不存在”

3 个答案: