typescript 提示 Object is possibly ‘null‘ 的N种解决方法

document.querySelector('.main-table').setAttribute('height', '300px');
如上，我要设置某元素的高度，但typescript提示 Object is possibly ‘null’，是因为可能不存在选择元素的情况。

解决方案一

最正确的解决方案，就是加null的判断

const table = document.querySelector('.main-table');
if (table) {table.setAttribute('height', '300px');
}

解决方案二

使用断言方式，当然这是你能保证元素必定存在的情况

(document.querySelector('.main-table') as Element).setAttribute('height', '300px');

解决方案三

这和解决方案原理一样，要判断null情况，但写法简单点，当然这是关闭eslint的情况下，否则eslint会提示错误

document.querySelector('.main-table')?.setAttribute('height', '300px');

这里使用了 ?. 符号，相当于&&，意思是先判断?前面的对象是否存在，存在情况下再执行后面的方法；
使用下面代码也是可以的：

const table = document.querySelector('.main-table');
table && table.setAttribute('height', '300px');

兄弟，点个赞再走！

typescript 提示 Object is possibly ‘null‘ 的N种解决方法相关推荐

typescript 提示 Object is possibly null
Object is possibly null: 对象可能是null 分析:localStorage.getItem("SET_HISTORY_KEY") 这个值有可能为空,所以再 ...
解决typescript 提示 Object is possibly ‘null‘
1.多加一层判断 let animal =cat || null if(animal){} 2.断言方式(animal as Cat) 3. ?. 4.报错类型设为any
关于出现org.hibernate.TransientObjectException: The given object has a null identifier: 错误的解决方法
关于出现org.hibernate.TransientObjectException: The given object has a null identifier: 错误的解决方法参考文章: (1 ...
WORD Application.Documents.Open函数返回null的一种解决方法
WORD Application.Documents.Open函数返回null的一种解决方法参考文章: (1)WORD Application.Documents.Open函数返回null的一种解决 ...
异步 HttpContext.Current 为空null 另一种解决方法
异步 HttpContext.Current 为空null 另一种解决方法参考文章: (1)异步 HttpContext.Current 为空null 另一种解决方法 (2)https://www. ...
需要计算机安装msxml,Win7安装Office2010提示让安装MSXML组件的五种解决方法
在安装office2010的的时候,有时候会提示"安装错误.若要安装Microsoft office2010 需要在计算机上安装 MSXML版本6.10.1129.0.请安装此组件,然后重新 ...
Win7 10安装Office2010提示让安装MSXML组件的五种解决方法
在安装office2010的的时候,有时候会提示"安装错误.若要安装Microsoft office2010 需要在计算机上安装 MSXML版本6.10.1129.0.请安装此组件,然后重新 ...
php访问参数错误,提示“无法访问参数错误”的4种解决方法
直接拔下usb设备而不是点击弹出.直接拔下usb设备会损坏甚至破坏扇区,是导致usb设备参数错误的原因之一.切记尽量使用"安全弹出usb"功能. usb接口问题.usb接口是电脑和 ...
Win10插入耳机后无声音，声音问题疑难解答提示“外设似乎没有插上” 三种解决方法
方法一一.打开声音问题疑难解答进行检测若检测结果如下: 二.确认声音为 windows 默认而不是无声个性化–主题–高级声音设置–windows默认三.确认声卡已安装且为最新版本(重点) 1. ...

typescript 提示 Object is possibly ‘null‘ 的N种解决方法

解决方案一

解决方案二

解决方案三

typescript 提示 Object is possibly ‘null‘ 的N种解决方法相关推荐

最新文章

热门文章