编辑:我正在使用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通常是不受欢迎的,从美学上讲,我不喜欢创建两倍的变量。
有没有更干净的方法来做到这一点?
4条答案
按热度按时间g0czyy6m1#
你应该输入你的变量。我没有对
const
做过很多,但是你的第二个选择似乎是错误的(代码气味)。您应该能够通过严格键入变量来绕过警告。
如果您将其更改为也可能为null,则允许为null:
已更新
第二个选项(我没有尝试过):根据https://stackoverflow.com/a/40640854/2084315,在可能为空的操作结束时使用
!
nvbavucw2#
请尝试使用以下方法:
!!
将对象表达式强制转换为布尔值。它是!
运算符两次。有关此操作符的更多信息,请参见this answerkgqe7b3p3#
使用可选链接“?”
从TypeScript 3.7+版本开始,您可以使用可选链接
对于旧版本的TypeScript,我们会做一些类似的事情
**注意:**可选链接(??)总是优于非空Assert运算符(!),因为如果值为null或undefined,非空Assert实际上可能导致运行时错误。
而且,如果您在eslint设置中配置了“plugin:@typescript-eslint/recommended”,您将在代码中收到“Forbidden non-null assertion”警告。
mv1qrgav4#
如果你使用引用外部JS文件,那么试着在你脚本语法中添加“defer”。例如: