typescript document.getElementById(“id”)可能为空

c90pui9n 于 2023-04-22 发布在 TypeScript

关注(0)|答案(4)|浏览(182)

编辑：我正在使用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'.
我可以通过使用一个非空Assert来解决这个问题：

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

但我的理解是，这些类型的Assert通常是不受欢迎的，从美学上讲，我不喜欢创建两倍的变量。
有没有更干净的方法来做到这一点？

typescript

来源：https://stackoverflow.com/questions/43218680/document-getelementbyidid-may-be-null

4条答案

按热度按时间

g0czyy6m1#

你应该输入你的变量。我没有对const做过很多，但是你的第二个选择似乎是错误的（代码气味）。
您应该能够通过严格键入变量来绕过警告。

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

如果您将其更改为也可能为null，则允许为null：

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

已更新

第二个选项（我没有尝试过）：根据https://stackoverflow.com/a/40640854/2084315，在可能为空的操作结束时使用!

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

赞(0）回复(0）举报 2023-04-22

nvbavucw2#

请尝试使用以下方法：

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

!!将对象表达式强制转换为布尔值。它是!运算符两次。有关此操作符的更多信息，请参见this answer

赞(0）回复(0）举报 2023-04-22

kgqe7b3p3#

使用可选链接“？”

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

**注意：**可选链接（？？）总是优于非空Assert运算符（！），因为如果值为null或undefined，非空Assert实际上可能导致运行时错误。

而且，如果您在eslint设置中配置了“plugin：@typescript-eslint/recommended”，您将在代码中收到“Forbidden non-null assertion”警告。

赞(0）回复(0）举报 2023-04-22

mv1qrgav4#

如果你使用引用外部JS文件，那么试着在你脚本语法中添加“defer”。例如：

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

赞(0）回复(0）举报 2023-04-22

我来回答

typescript document.getElementById(“id”)可能为空

4条答案

使用可选链接“？”

相关问题

热门标签

最新问答