您当前的位置: 首页 > 技术文章 > 前端开发

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }

作者: 时间:2023-02-25阅读数:人阅读

前言:

        最近用 typeScript ,也就是大家常说的 【 TS 】写点东西,但是老是提醒这个未定义,那个可能为空,主要是 tsconfig.json 中的严格模式我没关,所以今天总结一下,严格模式中【TS】中遇到 对象可能为“未定义” 的具体场景,以及共有几种解决方法!

 1、Vue3 结合 TS 获取 HTMLElement 时报“未定义”

  我们看下面代码,因为我是想使用  ref 的这种方式获取 DOM 节点,进而去使用 DOM 方法(虽然不推荐在Vue/React 直接操作DOM,偶尔用一下还是没关系的),然后就会警告。

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图1)

 简单粗暴的处理就是在后面加一个【 ! 】感叹号,告诉 TS 引擎此元素存在,有点类似于 as xxx 的意思!

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图2)

 

2、使用声明的可选属性时,报“未定义”

 使用 TS 我们经常会声明一些泛型,但是泛型里的属性并不是所有属性都必须要有,这个时候用到这个泛型可选属性的时候就会警告,可以通过以下两种方法解决:

  1. 使用可选链操作符 ?. 的方式,已经确定当前值有可能为空的情况下使用

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图3)

 

    2.使用 as 类型 进行类型断言, 确定当前属性一点会有值时,也可以使用这种方式 

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图4)

 

3、API 赋值,不能将类型" XXXX | undefined "分配给类型{ xxxx }

如果我们这么写:list.value = res!.data;

我们会发现还是会报错,主要是 res.data 整体可能都为 undefined,所以我们还可以用 感叹号 来解决

TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图5)

 要写下面这样写 感叹号 就可以了

 TS 对象可能为“未定义”,不能将类型“ XXXX | undefined “分配给类型{ xxxx }(图6)

 

 

 


以上所述皆为实战中的总结,如果不足请路过的大佬多多补充~~~

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦