При работе с TypeScript вы можете столкнуться с ситуациями, когда вам необходимо присвоить значения типа 'HTMLElement | null'переменной типа 'HTMLElement'. Однако TypeScript выдаст ошибку, поскольку тип 'null'нельзя назначить типу 'HTMLElement'. В этой статье мы рассмотрим различные способы решения этой проблемы, а также приведем примеры кода.

Метод 1: утверждение типа
Один из подходов — использовать утверждение типа, чтобы сообщить TypeScript, что вы уверены, что значение не будет равно null. Вот как это можно сделать:

const element: HTMLElement = document.getElementById('myElement')!;

В приведенном выше коде восклицательный знак (!) подтверждает, что значение, возвращаемое getElementById, никогда не будет равно null. Однако если элемент с указанным идентификатором не найден, произойдет ошибка времени выполнения.

Метод 2: нулевой оператор объединения
Другой метод — использовать нулевой оператор объединения (??) для предоставления значения по умолчанию, когда результат равен null:

const element: HTMLElement = document.getElementById('myElement') ?? document.createElement('div');

В этом примере, если getElementByIdвозвращает null, новый элемент <div>будет создан и присвоен элементу elementпеременная.

Метод 3: необязательное связывание
В TypeScript 3.7 появился необязательный оператор связывания (?.), который позволяет безопасно получать доступ к вложенным свойствам или методам:

const element: HTMLElement | null = document.getElementById('myElement');
const innerText: string | undefined = element?.innerText;

Здесь свойство innerTextбудет доступно только в том случае, если elementне равно null. Если elementравно null, результатом будет undefined.

Метод 4: защита типа
Вы можете использовать защиту типа, чтобы сузить тип переменной на основе условия. Вот пример:

function processElement(element: HTMLElement | null) {
  if (element instanceof HTMLElement) {
    // element is now of type 'HTMLElement'
    element.classList.add('highlight');
  }
}

В этом коде оператор instanceofпроверяет, является ли elementэкземпляром HTMLElement. Если условие истинно, TypeScript сделает вывод, что elementимеет тип 'HTMLElement'в блоке if.

Обработка присвоений переменных типа 'HTMLElement | null'и 'HTMLElement'в TypeScript требует тщательного рассмотрения. В этой статье мы рассмотрели несколько методов, таких как утверждение типа, нулевой оператор объединения, необязательное сцепление и защита типов. Каждый метод предлагает свой подход к реализации этого сценария в зависимости от ваших конкретных требований.