的document.getElementById（“ID”）可以为空

编辑：我使用的是打字稿V2.2.1的document.getElementById（“ID”）可以为空

我是新来的打字稿，我不知道该怎么处理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. 
    }); 
}

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

有没有更干净的方法来做到这一点？

来源

2017-04-04 Evan Hefner

您使用的是什么版本的Typescript编译器？你的第一个例子符合我的预期（在'strictNullChecks'上）。 – y2bd

哎呀，对不起，我忘了提及版本。我使用的是2.2.1版本。 –

尝试使用以下：

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

的!!胁迫的对象表达成一个布尔值。这是!运算符的两倍。有关详细信息，请参阅this answer

来源

2017-04-04 22:27:58 Amy

尝试编辑你的答案，所以我删除downvote。我无意中误点击了downvote按钮，似乎无法撤消它。 –

不客气。有你的投票 –

您应该输入变量。我没有用const做很多，但你的第二个选项似乎是错误的（代码 - 异味）。

您应该可以通过严格键入变量来解决警告。如果你改变它也可能为空编译器目前认为这是

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

，然后允许空值：

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

更新

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

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

来源

2017-04-04 22:28:44 ps2goat

的document.getElementById（“ID”）可以为空

回答

相关问题