Объявление HTMLElement Typescript

В стандартном приложении TypeScript HTML из visual studio я добавил

HTMLElement

в первую строку обработчика события window.onload, считая, что я могу предоставить тип для "el".

следующим образом:

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): Ожидаемый ';'

Какой ключ? Я подозреваю, что мне не хватает чего-то очевидного.

Ответ 1

Тип появляется после имени в TypeScript, отчасти потому, что типы являются необязательными.

Итак, ваша линия:

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

Необходимо изменить на:

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

Еще в 2013 году тип HTMLElement был бы выведен из возвращаемого значения getElementById, это все равно, если вы не используете строгие проверки null (но вы должны использовать строгие режимы в TypeScript). Если вы выполняете строгие проверки null, вы увидите, что возвращаемый тип getElementById изменился с HTMLElement на HTMLElement | null 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;
}

Ответ 2

Хорошо: странный синтаксис!

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

Ответ 3

В JavaScript вы объявляете переменные или функции, используя ключевые слова var, let или function. В классах TypeScript вы объявляете членов класса или методы без этих ключевых слов, за которыми следует двоеточие, а также тип или интерфейс этого члена класса.

Его просто синтаксический сахар, нет никакой разницы между:

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

а также:

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

С другой стороны, поскольку вы указываете тип, вы получаете всю информацию об объекте HTMLElement.

Ответ 4

Обратите внимание, что объявления const имеют блочную область.

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

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

Таким образом, значение defineAnElement недоступно за пределами {}.

(Я бы прокомментировал выше, но мне явно не хватает репутации.)