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'.

我可以通过使用非空断言来解决这个问题：

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');

<强>更新

第二个选项（我还没试过）：在https://stackoverflow.com/a/40640854/2084315

的潜在空操作结束时使用!

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

Answer 2

尝试使用以下内容：

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

!!将对象表达式强制转换为布尔值。它是!运算符两次。有关详细信息，请参阅this answer

Answer 3

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

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

但是现在使用TypeScript版本=> 3.7，您可以使用可选链接

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

Answer 4

如果您使用引用外部 JS 文件，请尝试在脚本语法中添加“延迟”。例如：

<script src="./script.js" defer></script>

document.getElementById（＆＃34; id＆＃34;）可以为null

4 个答案: