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

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

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

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

20210527153548522.png

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

20210527153548522.png

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

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

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

20210527153548522.png

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

20210527153548522.png

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

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

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

20210527153548522.png

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

20210527153548522.png

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


相关文章
TS,数据类型概述,常见的基本数据类型有number/string/boolean/undefined/null,字符串用““,let food: string = ‘糖葫芦‘,布尔类型
TS,数据类型概述,常见的基本数据类型有number/string/boolean/undefined/null,字符串用““,let food: string = ‘糖葫芦‘,布尔类型
ts重点学习22-null和undefined
ts重点学习22-null和undefined
93 0
ts重点学习22-null和undefined
ts重点学习22-null和undefined笔记
ts重点学习22-null和undefined笔记
183 0
|
6月前
|
前端开发 小程序 JavaScript
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
|
4月前
|
存储 JavaScript 前端开发
成功解决:Cannot read properties of undefined (reading ‘commit‘)
这篇文章提供了解决Vuex中"Cannot read properties of undefined (reading 'commit')"错误的两种方法:检查模板中的数据属性是否存在,以及确保在Vue实例中正确挂载了store对象。
成功解决:Cannot read properties of undefined (reading ‘commit‘)
|
4月前
|
定位技术 Apache
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
100 0
|
4月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
88 0
|
4月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
95 0
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
Cannot read properties of undefined (reading ‘row‘)
Cannot read properties of undefined (reading ‘row‘)