document.getElementById("id")可以为null

Question

编辑:我正在使用TypeScript v2.2.1

我是TypeScript的新手,我不确定处理可能存在或不存在的DOM元素的最简洁方法是什么.基本上,我想检查一个元素是否存在,然后如果它存在,添加一个事件监听器(我已经--strict_null_checks打开).

当我这样做的JS方式:

const myElement = document.getElementById('my-id');
if (myElement) {
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

我收到了错误 my_script.ts(3, 3): error TS2531: Object is possibly 'null'.

我可以通过使用非null断言解决这个问题:

const maybeMyElement = document.getElementById('my-id');
if (maybeMyElement) {
  const myElement = maybeMyElement!;
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

但我的理解是,这些断言通常是不受欢迎的,而在美学上,我不喜欢创造两倍的变量.

有更清洁的方法吗？

Answer 1

你应该输入你的变量.我没有做过很多const,但你的第二个选择似乎是错误的(代码嗅觉).

您应该能够通过严格键入变量来绕过警告.编译器目前将其视为

const myElement: HTMLElement = document.getElementById('my-id');

如果将其更改为也可能为null,则允许空值:

const myElement: HTMLElement | null = document.getElementById('my-id');

更新

第二个选项(我还没试过):!根据/sf/answers/2844859811/使用潜在空操作的末尾

const myElement = document.getElementById('my-id')!;

Answer 2

使用可选链“?”

从 TypeScript 版本 3.7+ 开始，您可以使用可选链接

const maybeMyElement = document.getElementById('my-id');
maybeMyElement?.addEventListener('click', (e: Event) => {
  // Do stuff.
  console.log(e);
});

对于旧版本的 TypeScript，我们会做类似的事情

const maybeMyElement = document.getElementById('my-id') as HTMLElement;
maybeMyElement.addEventListener('click', (e: Event) => {
  // Do stuff.
  console.log(e);
});

注意：可选链接 (??) 始终优于非空断言运算符 (!)，因为如果值为空或未定义，非空断言实际上可能会导致运行时错误。

而且，如果您在 eslint 设置中配置了“plugin:@typescript-eslint/recommended”，您将在代码中收到“禁止非空断言”警告。

Answer 3

尝试使用以下方法：

if (!!myElement) {
    myElement.addEventListener('click', (e:Event) => {
        // Do stuff.
    });
}

将!!对象表达式强制转换为布尔值。!两次都是操作员。有关这方面的更多信息，请参阅此答案