我试着这样做:

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

我不能访问脚本元素的'type'成员,除非我将其转换为正确的类型,但我不知道如何做到这一点。我查了文件和样本,但什么都没找到。


当前回答

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

这意味着你不再需要使用类型断言来改变类型:

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

其他回答

因为它是一个节点列表,而不是数组,所以不应该使用括号或强制转换为数组。获取第一个节点的属性方法是:

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

我们可以使用显式返回类型为变量类型:

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

或assert as (TSX需要):

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

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


类型断言类似于其他语言中的类型强制转换,但不执行特殊的数据检查或重构。它对运行时没有影响,完全由编译器使用。

文档:

基本类型-类型断言

与其使用类型断言、类型保护或任何方法来解决这个问题,更优雅的解决方案是使用泛型来指示所选择的元素类型。

不幸的是,getElementsByName不是通用的,但是querySelector和querySelectorAll是通用的。(querySelector和querySelectorAll也要灵活得多,因此在大多数情况下可能更可取。)

如果你单独将一个标签名称传递给querySelector或querySelectorAll,它将自动正确地输入,因为下面这行在lib.dom.d.ts中:

querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;

例如,要选择页面上的第一个脚本标签,如您的问题,您可以这样做:

const script = document.querySelector('script')!;

就是这样——TypeScript现在可以推断出script现在是一个HTMLScriptElement。

当需要选择单个元素时使用querySelector。如果需要选择多个元素,请使用querySelectorAll。例如:

document.querySelectorAll('script')

结果类型为NodeListOf<HTMLScriptElement>。

如果需要更复杂的选择器,可以传递一个类型参数来指示将要选择的元素的类型。例如:

const ageInput = document.querySelector<HTMLInputElement>('form input[name="age"]')!;

导致ageInput被输入为HTMLInputElement。

不要进行类型转换。从来没有。使用类型保护:

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

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

这意味着你不再需要使用类型断言来改变类型:

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