Vue中使用props时，ts报TS2532: Object is possibly ‘undefined‘的解决办法

原创于 2022-08-12 14:52:53 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #javascript

本文介绍在Vue3中使用TypeScript时遇到的对象可能未定义的问题及解决方法。通过添加非空断言运算符（感叹号！）来避免类型检查错误TS2532，同时提供了更多解决类型不确定性的策略。

首先来还原下问题现场，用的是Vue3setup语法糖

<script setup lang="ts">
	const props = defineProps({
		data: Object
	})
	props.data.xx // 此时ts报错TS2532: Object is possibly 'undefined'
</script>

ts报错TS2532: Object is possibly ‘undefined’，提示对象可能未定义，但实际上data是有值得，并且页面也是正常展示，也就是说不影响正常使用，但是页面飘红强迫症也很不爽，解决办法：

	props.data!.xx

在变量后添加非空断言运算符，也就是感叹号！，有时typescript编译器无法确定它在某一点上可能具有什么类型的值，通过在变量后添加！，可以让编译器知道此变量不会未定义或成为null
查询的过程中发现一篇如何解决typescript中可能未定义的值的文章，作者列出了五种解决办法，可以参考下：https://linguinecode.com/post/how-to-solve-typescript-possibly-undefined-value