Любой способ сказать Flow, что HTMLElement, возвращаемый getElementById (), не может быть нулевым?

Question

Мой HTML содержит все элементы, которые я планирую подключить в моем JS.Я не генерирую элементы динамически, поэтому могу гарантировать, что все мои селекторы ID будут работать.Тем не менее следующий код сгенерирует в Flow ошибку, из-за которой я не могу проверить свойство возможно нулевого элемента:

document.getElementById('my-element').addEventListener(...);

Единственные обходные пути, которые я мог бы найти:

((document.getElementById('my-element'): any): HTMLElement).addEventListener(...);

let element = document.getElementById('my-element');
if (element) {
    element.addEventListener(...);
}

Оба метода ухудшают читабельность кода и создают больше путаницы в этом случае.Есть ли более чистый подход к тому, чтобы дать потоку понять, что этот элемент не будет нулевым, не обойдя куст?

Answer 1

Если вы знаете, что идентификатор существует, вам нужно доказать Flow, что он найден.Это означает, что вам нужно либо проверить, как if (element) или if (!element) throw new Error().Это может быть неудобно повторять в нескольких местах, поэтому я хотел бы рассмотреть возможность использования вспомогательной функции, которая требует, чтобы она не была нулевой, например,

function getElementById(doc: Document, id: string): HTMLElement {
  const el = doc.getElementById(id);
  if (!el) throw new Error(`Unable to find element #${id}.`);
  return el;
}

, тогда ваш код может безопасно выполнить

getElementById(document, 'my-element').addEventListener(...);