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

Я не можу отримати доступ до '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);

Не набирайте ролі. Ніколи. Використовуйте захисні типи:

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.

Дозвольте компілятору зробити роботу за вас і помилитися, коли ваші припущення виявляться неправильними.

У цьому випадку це може виглядати непосильним, але це дуже допоможе вам, якщо ви повернетесь пізніше і зміните селектор, наприклад, додавши клас, який, наприклад, відсутній у домі.

Ви завжди можете зламати систему типів, використовуючи:

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

На закінчення:

• фактичний Arrayоб’єкт (не NodeListодягнений якArray )
• список, який гарантовано включає лише HTMLElements, а не NodeпримусовийHTMLElement s
• тепле нечітке почуття зробити правильну річ

Спробуйте це:

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

Можна вирішити у файлі декларації (lib.d.ts), якщо TypeScript визначив HTMLCollection замість NodeList як тип повернення.

DOM4 також визначає це як правильний тип повернення, але старі специфікації DOM менш чіткі.

Дивіться також http://typescript.codeplex.com/workitem/252

Оскільки це NodeListне 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-концепції-класи-типи /

TypeScript також дозволяє вказувати різні типи повернення, коли в якості аргументу функції подається точна рядок. Наприклад, зовнішнє декларування TypeScript для методу createElement DOM виглядає приблизно так:

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, і зможе переконатися, що ви правильно взаємодієте з API DOM Video без необхідності введення ствердження.

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