TypeScript에서 HTLement의 종류를 확인하는 방법

TypeScript에서 HTLement의 종류를 확인하는 방법

나는 이것을 하려고 한다:

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

캐스트를 입력하지 마십시오.절대. 타입 가드 사용:

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.

컴파일러가 대신 작업을 수행하도록 하여 추측이 틀렸을 때 오류를 발생시키십시오.

이 경우 오버킬처럼 보일 수 있지만 나중에 돌아와서 예를 들어 돔에 없는 클래스를 추가하는 등 셀렉터를 변경하면 많은 도움이 됩니다.

0.9 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 script: HTMLScriptElement = document.getElementsByName(id).item(0);

또는 다음과 같이 주장합니다(TSX에서는 필요).

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

또는 간단한 경우 angle-bracket 구문을 사용하여 어설션합니다.

---

유형 어설션은 다른 언어의 유형 캐스트와 비슷하지만 특별한 데이터 검사나 재구성을 수행하지 않습니다.런타임에 영향을 주지 않고 컴파일러에 의해만 사용됩니다.

문서:

TypeScript - 기본 유형 - 유형 어설션

결론:

• Arraya'가 )NodeList을 Array)
• 「」만을 포함한 HTMLElements 아니라, 이에요.Node 강제 HTMLElements
• 옳은 일을 해야 한다는 따뜻한 애매모호함

이것을 시험해 보세요.

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

즐거운 시간 되세요.

어설션을 guard guard를 합니다.any이 문제를 해결하기 위해서는 제네릭스를 사용하여 선택한 요소의 유형을 표시하는 것이 보다 우아한 해결책이 될 수 있습니다.

★★★★★★★★★★★★★★★★★★★.getElementsByName 「」입니다.querySelector ★★★★★★★★★★★★★★★★★」querySelectorAll (a. (break)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 as as as as HTMLInputElement.

확실히 해두자면, 이게 맞아요.

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

사이트펜 가이드도 추천합니다.

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임을 인식하고 Assert를 입력할 필요 없이 DOM Video API와 올바르게 대화할 수 있습니다.

TypeScript가 반환 유형으로 NodeList가 아닌 HTMLCollection을 정의하면 선언 파일(lib.d.ts)로 해결할 수 있습니다.

또, DOM4 는 이것을 올바른 반환 타입으로 지정하고 있습니다만, 오래된 DOM 사양은 명확하지 않습니다.

http://typescript.codeplex.com/workitem/252 도 참조해 주세요.

Sure Performance의 답변의 연장선상에서 선언 병합을 사용하여 표준 정의 라이브러리의 기능을 증강하는 경우DocumentGeneric 를 Generic Override로 할 수 .getElementsByNamemethod그 에가 「」로 되어 있습니다.HTMLElement되지 않은 과 같이 .type 인 、 「 명 to 」 、 「 to to 」

interface Document
  extends Node,
    DocumentAndElementEventHandlers,
    DocumentOrShadowRoot,
    GlobalEventHandlers,
    NonElementParentNode,
    ParentNode,
    XPathEvaluatorBase {
  getElementsByName<T extends HTMLElement>(elementName: string) : NodeListOf<T>;
}

그런 다음 사용자 코드에서 원하는 유형을 명시적으로 전달할 수 있습니다.

const scripts = document.getElementsByName<HTMLScriptElement>("name"); //NodeListOf<HTMLScriptElement>

놀이터.

---

주의: 를 재지정할 필요가 있습니다.extends동일한 선언만 병합할 수 있기 때문에 목록으로 이동합니다.

이니까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);

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

언급URL : https://stackoverflow.com/questions/12686927/how-to-assert-a-type-of-an-htmlelement-in-typescript