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

news2024/11/24 13:04:21

前言:

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

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

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

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

 

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

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

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

 

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

 

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

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

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

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

 

 

 

 


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/101342.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Learning Disentangled Label Representations for Multi-label Classification

Learning Disentangled Label Representations for Multi-label Classification,2022 学习多标签分类的解纠缠标签表示 要点: 1、主流多标签分类:遵循单标签(多类别)分类的特征学习机制——学习一个共享的图像特征来…

【Vue实践】尚硅谷张天禹Vue学习笔记(087-135)-20221212~20221218

(任意组件通信)084-086_全局事件总线 全局事件总线SOP 086_TodoList案例_事件总线 src/mian.js: import Vue from vue import App from ./App.vueVue.config.productionTip falsenew Vue({el:"#app",render: h > h(App),beforeCreate()…

docker高级篇第二章-分布式存储之实战案例:3主3从redis集群搭建

在上一篇文章中,我们介绍了分布式存储的三种方式:hash取余分区、一致性哈希算法分区以及哈希槽分区。本篇,我们就来实战3主3从的哈希槽Redis集群搭建。 大家好,我是凯哥Java(kaigejava),乐于分享,每日更新技术文章&…

【Redis深度专题】「核心技术提升」分析探究如何实现LFU的热点key发现机制以及内部的Scan扫描技术的原理

前言介绍 业务中存在访问热点是在所难免的,redis也会遇到这个问题,然而如何发现热点key一直困扰着许多用户,redis4.0为我们带来了许多新特性,其中便包括基于LFU的热点key发现机制。 Least Frequently Used Least Frequently Us…

基于节点导纳矩阵的三相配电系统建模(Matlab实现)

目录 1 概述 2 算例仿真 2.1 IEEE 37节点测试 2.2 EEE 123 节点测试 2.3 500 节点测试 2.4 906 母线低压馈线 2.5 小节 3 Matlab代码实现 1 概述 本文的主要是适用于 Z-Bus 潮流的三相配电系统建模。提供了星形和三角形恒功率、恒电流和恒阻抗负载的详细模型。布置了…

无线投屏(智慧教室)

大家好,我是小杜,打工人又开始了这一周的“搬砖”了。周末两天很好的“休息”后,今天浑身充满了干劲,都可以打死一头“牛”,从今天开始就要参与公司的一些业务了,剩余时间就是打工人最喜欢的学习时间了。 …

Nacos系列——Java SDK(2.x版本)2-1

Nacos系列——Java SDK(2.x版本)2-1资源地址README概述(intro)Nacos Java SDK 官方文档(official doc address)工程说明(project intro )工程目录(project dir)pom依赖(pom dependen…

面向切面编程

Spring AOP简介 AOP把业务功能分为核心、非核心两部分。 核心业务功能:用户登录、增加数据、删除数据。非核心业务功能:性能统计、日志、事务管理。 在Spring的面向切面编程(AOP)思想里,非核心业务功能被定义为切面。…

Springboot+echarts:ajax前后端分离交互

文章目录一、样例说明二、后端代码实现2.1 依赖2.2 applicaiton.properties配置2.3 TotalCountData类实现2.4 totalCountDataMapper接口2.5 totalCountDataMapper.xml实现2.6 Controller层代码三、前端代码一、样例说明 通过mysql存储数据,springboot整合mybatis框…

从云到「链」,京东云成为中国第四朵云背后

在产业加速到数实融合加速的今年,云计算不再是云厂商的唯一考校指标。 作者|叶子 出品|产业家 京东云再次破圈。 信号来自接连发布的几份报告。在国际权威研究机构Forrester发布的名为《The Forrester Wave:Public Cloud Development And Infrast…

[HCTF 2018]WarmUp

目录 考点 writeup 考点 文件上传漏洞&#xff0c;代码审计 writeup 先进入页面先查看源码 发现source.php,打开该php文件&#xff0c;进行审计代码后发现是文件包含类题目 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$…

JaveWeb框架(三):实战项目Servlet 实现管理系统登录注册功能

MVC实战项目 仓储管理系统需求&#xff1a;实现基本的登录和注册功能MVC实战项目&#xff1a;登录和注册登录功能实现注册功能实现总结Redis章节复习已经过去&#xff0c;新的章节JavaWeb开始了&#xff0c;这个章节中将会回顾JavaWeb实战项目 仓储管理 代码会同步在我的gitee中…

Linux内核调试技术之kdump配置与使用

概述 kdump是Linux内核发生崩溃时转储内存的一种机制&#xff0c;当内核发生错误时&#xff0c;kdump会将当前内核使用的内存导出为镜像文件&#xff08;通常为vmcore&#xff09;保存到硬盘上&#xff0c;之后可以使用crash等工具对内核错误原因进行分析。 kdump基本原理 k…

R语言中回归和分类模型选择的性能指标

有多种性能指标来描述机器学习模型的质量。但是&#xff0c;问题是&#xff0c;对于问题正确的方法是什么&#xff1f;在这里&#xff0c;我讨论了选择回归模型和分类模型时最重要的性能指标。请注意&#xff0c;此处介绍的性能指标不应用于特征选择&#xff0c;因为它们没有考…

如何保证分布式事务?

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【一心同学】&#xff0c;一位上进心十足的【Java领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; ✨【一心同学】的写作风格&#x…

Docker: 容器与镜像

文章目录1、docker 环境搭建1.1、docker 安装1.1.1、centos 安装1.1.2、ubuntu 安装1.2、添加到 docker 组1.3、docker 镜像源2、docker 概念2.1、docker 背景2.2、docker 架构2.3、docker 与 vm3、docker 容器隔离4、docker 命令4.1、环境信息4.2、日志信息4.3、容器命令4.4、…

Mac最先进的API工具-RapidAPI for Mac

一、前言 当使用 Mac 进行接口测试的时候&#xff0c;一般都会想到接口测试工具 Postman、Jmeter。 Postman 以其页面友好&#xff0c;功能简单&#xff0c;可以快速上手进行接口测试。而 Jmeter 除了测接口外&#xff0c;还可以进行接口自动化测试、性能测试等。 本篇将介绍…

完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档

完整企业官网源码&#xff0c;前端基于VueElementUI&#xff0c;后台基于基于core3 webapi&#xff0c;含数据库文件&#xff0c;含详情安装部署文档 完整代码下载地址&#xff1a;完整企业官网源码 某工程管理有限公司企业官网 前端 新版本改进 整体重构&#xff0c;结构…

利用 Flow Simulation 快速和经济高效地解决传热难题

探寻传热问题的有效解决方案已成为新产品研发过程中一个愈来愈重要的部分。几乎一切事物都会经历某种程度的发热或冷却&#xff0c;而且对于许多产品来说&#xff0c;如现代电子设备、医疗设备和空气调节 (HVAC) 系统&#xff0c;热管理已成为避免过度发热和实现功能正常运行的…

Redis实战——附近商家(GEO的使用)

1. 什么是Geo&#xff1f; GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。常见的命令有&#xff1a; GEOADD&#xff1a;添加一个地理空间信息&#…