HTMLLEment Typecript 선언

HTMLLEment Typecript 선언

Visual Studio의 기본 TypeScript HTML 앱에서 추가했다.

HTMLElement 

"el"의 유형을 제공할 수 있다고 생각하면서 이벤트 핸들러의 첫 번째 줄로 이동하십시오.onload 이벤트 핸들러

따라서:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    HTMLElement el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

나는 실수를 한다.

컴파일 오류.자세한 내용은 오류 목록을 참조하십시오.../app.ts(25,17): 예상 ';'

왜 그런지 알겠나?나는 내가 뭔가 명백한 것을 놓치고 있다고 의심한다.

형식은 부분적으로 유형이 선택적이기 때문에 TypeScript에서 이름 뒤에 온다.

그래서 당신의 대사:

HTMLElement el = document.getElementById('content');

다음으로 변경 필요:

const el: HTMLElement = document.getElementById('content');

지난 2013년, 그 유형HTMLElement이다.getElementById, 엄격한 null 수표를 사용하고 있지 않다면 여전히 그렇다. (그러나 당신은 TypeScript에서 엄격한 모드를 사용해야 한다.)엄격한 null 검사를 시행하는 경우getElementById로부터 바뀌었다.HTMLElement로HTMLElement | null 이러한 는 유형을 이 변경은 유형을 더 정확하게 만들 수 있다. 왜냐하면 항상 요소를 찾지 못하기 때문이다.

따라서 형식 모드를 사용할 때 컴파일러가 형식 어설션을 사용하여 요소를 찾도록 권장할 것이다.다음과 같은 경우:

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

나는 네가 코드를 실행할 때 어떤 일이 일어나는지 보여주기 위해 그 유형을 포함시켰다.흥미로운 점은el 타입의 활자이가 있다.HTMLElement의 범위 내에서if진술서, 당신이 그것이 무효일 가능성을 제거했기 때문에.

어떤 유형 주석도 없이 동일한 결과 유형으로 정확하게 동일한 작업을 수행할 수 있다.컴파일러에 의해 추론되므로 다음과 같은 추가 타이핑을 모두 저장할 수 있다.

const el = document.getElementById('content');

if (el) {
  const definitelyAnElement = el;
}

좋아: 이상한 구문!

var el: HTMLElement = document.getElementById('content');

문제를 해결하다나는 왜 그 예가 애초에 이런 일을 하지 않았을까?

전체 코드:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el: HTMLElement = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

JavaScript에서는 키워드 var, let 또는 function을 사용하여 변수나 함수를 선언한다.TypeScript 클래스에서 이러한 키워드 없이 클래스 멤버 또는 메서드를 선언하고 콜론과 해당 클래스 멤버의 유형 또는 인터페이스를 선언하십시오.

그것은 단지 구문설탕일 뿐, 다음과 같은 차이가 없다.

var el: HTMLElement = document.getElementById('content');

및:

var el = document.getElementById('content');

반면에, 당신이 타입을 지정하기 때문에 당신은 당신의 HTMLlement 객체의 모든 정보를 얻는다.

요소에 타이핑을 사용해 보십시오.다음과 같은 HTML:

window.onload = () => {
    var el= <HTMLElement>document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

모든 선언은 블록 범위 내에 있다는 점에 유의하십시오.

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

따라서 {} 이외의 지역에서는 분명히AnElement의 값에 액세스할 수 없다.

(나는 위에 언급했을 것이지만, 겉으로는 평판이 충분하지 않다.)

참조URL: https://stackoverflow.com/questions/14742194/declaring-an-htmlelement-typescript