propiedad - typescript document.getelementbyid value

Declarar una escritura de tipo HTMLElement

Question

En la aplicación predeterminada de TypeScript HTML de Visual Studio, agregué

HTMLElement 

a la primera línea del controlador de eventos window.onload, pensando que podría proporcionar un tipo para "el".

así:

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

Me sale un error

Error de compilación. Consulte la lista de errores para obtener más detalles ... / app.ts (25,17): Se esperaba '';''

¿Alguna pista de por qué? Sospecho que me falta algo obvio.

Answer 1

De acuerdo: sintaxis extraña!

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

arregla el problema Me pregunto por qué el ejemplo no hizo esto en primer lugar?

código completo:

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

Answer 2

El tipo aparece después del nombre en TypeScript, en parte porque los tipos son opcionales.

Así que tu línea:

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

Necesita cambiar a:

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

En 2013, el tipo HTMLElement se habría deducido del valor de retorno de getElementById , esto sigue siendo el caso si no está usando controles nulos estrictos (pero debería usar los modos estrictos en TypeScript). Si está aplicando controles nulos estrictos, encontrará que el tipo de devolución de getElementById ha cambiado de HTMLElement a HTMLElement | null HTMLElement | null El cambio hace que el tipo sea más correcto, porque no siempre se encuentra un elemento.

Por lo tanto, cuando use el modo de tipo, el compilador lo alentará a usar una aserción de tipo para asegurarse de encontrar un elemento. Me gusta esto:

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

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

He incluido los tipos para demostrar lo que sucede cuando ejecuta el código. Lo interesante es que el tiene el tipo HTMLElement más HTMLElement dentro de la sentencia if , debido a que elimina la posibilidad de que sea nulo.

Puede hacer exactamente lo mismo, con los mismos tipos resultantes, sin ninguna anotación de tipo. El compilador los deducirá, lo que ahorrará toda esa escritura adicional:

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

if (el) {
  const definitelyAnElement = el;
}

Answer 3

En JavaScript declara variables o funciones utilizando las palabras clave var, let o function. En las clases de TypeScript, declara miembros o métodos de clase sin estas palabras clave seguidas de dos puntos y el tipo o la interfaz de ese miembro de clase.

Es solo sintaxis de azúcar, no hay diferencia entre:

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

y:

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

Por otro lado, debido a que especifica el tipo, obtiene toda la información de su objeto HTMLElement.