如何在TypeScript中断言HTMLElement的类型？

Question

我正在尝试这样做：

var script:HTMLScriptElement = document.getElementsByName("script")[0];
alert(script.type);

但这给了我一个错误：

Cannot convert 'Node' to 'HTMLScriptElement': Type 'Node' is missing property 'defer' from type 'HTMLScriptElement'
(elementName: string) => NodeList

除非我将其转换为正确的类型，否则我无法访问脚本元素的“类型”成员，但我不知道如何做到这一点。我搜索了文档

Answer 1

不要打字。从不使用类型防护装置：

const e = document.getElementsByName("script")[0];
if (!(e instanceof HTMLScriptElement)) 
  throw new Error(`Expected e to be an HTMLScriptElement, was ${e && e.constructor && e.constructor.name || e}`);
// locally TypeScript now types e as an HTMLScriptElement, same as if you casted it.

让编译器为您完成工作，并在您的假设出错时出错。

在这种情况下，它可能看起来有些过分，但如果您稍后回来更改选择器，例如添加dom中缺少的类，它将对您有很大帮助。

Answer 2

从TypeScript 0.9开始，lib。d、 ts文件使用专门的重载签名，为调用getElementsByTagName返回正确的类型。

这意味着您不再需要使用类型断言来更改类型：

// No type assertions needed
var script: HTMLScriptElement = document.getElementsByTagName('script')[0];
alert(script.type);

Answer 3

TypeScript使用'

var script = <HTMLScriptElement>document.getElementsByName("script")[0];

但是，不幸的是，您无法做到：

var script = (<HTMLScriptElement[]>document.getElementsByName(id))[0];

你得到了错误

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

但你可以做到：

(<HTMLScriptElement[]><any>document.getElementsByName(id))[0];