TypeScript：强制转换HTMLElement

有人知道如何在TypeScript中进行转换吗？

我正在尝试这样做：

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

除非将其强制转换为正确的类型，否则我无法访问script元素的'type'成员，但是我不知道该怎么做。我搜索了文档和样本，但找不到任何东西。

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];

从TypeScript 0.9开始，该lib.d.ts文件使用专门的重载签名，这些签名返回用于的正确类型getElementsByTagName。

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

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

您始终可以使用以下方法破解类型系统：

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

不要键入强制类型转换。决不。使用防护罩：

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中缺少的类），它将对您有很大帮助。

最后以：

• 实际Array对象（不是NodeList打扮成Array）
• 保证只包含的列表，而HTMLElements不是Node强制转换为HTMLElement的列表
• 做正确的事的温暖模糊的感觉

试试这个：

let nodeList : NodeList = document.getElementsByTagName('script');
let elementList : Array<HTMLElement> = [];

if (nodeList) {
    for (let i = 0; i < nodeList.length; i++) {
        let node : Node = nodeList[i];

        // Make sure it's really an Element
        if (node.nodeType == Node.ELEMENT_NODE) {
            elementList.push(node as HTMLElement);
        }
    }
}

请享用。

我们可以使用显式的返回类型键入变量：

const script: HTMLScriptElement = document.getElementsByName(id).item(0);

或断言为（TSX所需）：

const script = document.getElementsByName(id).item(0) as HTMLScriptElement;

或者在更简单的情况下，使用尖括号语法进行断言。

类型断言就像其他语言中的类型转换一样，但是不执行数据的特殊检查或重组。它对运行时没有影响，仅由编译器使用。

说明文件：

TypeScript-基本类型-类型断言

只是为了澄清，这是正确的。

无法将“ NodeList”转换为“ HTMLScriptElement []”

作为NodeList不是实际的阵列（例如它不包含.forEach，.slice，.push，等等）。

因此，如果确实HTMLScriptElement[]在类型系统中转换为，Array.prototype则在编译时尝试在其上调用成员时不会出现类型错误，但是在运行时会失败。

这似乎解决了问题，使用 [index: TYPE]数组访问类型，，欢呼。

interface ScriptNodeList extends NodeList {
    [index: number]: HTMLScriptElement;
}

var script = ( <ScriptNodeList>document.getElementsByName('foo') )[0];

如果TypeScript将HTMLCollection而不是NodeList定义为返回类型，则可以在声明文件（lib.d.ts）中解决。

DOM4还将其指定为正确的返回类型，但是较旧的DOM规范尚不清楚。

另请参阅http://typescript.codeplex.com/workitem/252

由于是a NodeList而不是an Array，因此您实际上不应该使用方括号或将其强制转换为Array。获取第一个节点的属性方法是：

document.getElementsByName(id).item(0)

您可以将其转换为：

var script = <HTMLScriptElement> document.getElementsByName(id).item(0)

或者，扩展NodeList：

interface HTMLScriptElementNodeList extends NodeList
{
    item(index: number): HTMLScriptElement;
}
var scripts = <HTMLScriptElementNodeList> document.getElementsByName('script'),
    script = scripts.item(0);

我也会推荐Sitepen指南

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/（请参见下文）和 https://www.sitepen.com/blog/2014/08/22/advanced -typescript-concepts-classes-types /

当提供精确的字符串作为函数的参数时，TypeScript还允许您指定不同的返回类型。例如，DOM的createElement方法的TypeScript环境声明如下所示：

createElement(tagName: 'a'): HTMLAnchorElement;
createElement(tagName: 'abbr'): HTMLElement;
createElement(tagName: 'address'): HTMLElement;
createElement(tagName: 'area'): HTMLAreaElement;
// ... etc.
createElement(tagName: string): HTMLElement;

这意味着，在TypeScript中，当您调用例如document.createElement（'video'）时，TypeScript知道返回值是HTMLVideoElement，并且能够确保您与DOM Video API正确交互，而无需键入assert。

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