一篇文章让你搞懂TypeScript中的??和?:和?.和!.是什么意思

TypeScript中的??和?:和?.和!.是什么意思?

  • 知识回调(不懂就看这儿!)
  • 场景复现
  • 核心干货
    • ??
    • ?:
    • ?.
    • !.

知识回调(不懂就看这儿!)

知识专栏专栏链接
TypeScript知识专栏https://blog.csdn.net/xsl_hr/category_12030346.html?spm=1001.2014.3001.5482

在这里插入图片描述

有关TypeScript的相关知识可以前往TypeScript知识专栏查看复习!!

场景复现

最近在前端的深入学习过程中,接触了与网络请求相关的内容,于是计划用三个专栏(HTTPAxiosAjax)和零碎文章总结记录最近的学习笔记。由于项目前端技术栈的脚本语言为TypeScript,在研读小程序异步请求封装部分的代码时,碰到了几个关于TypeScript的小知识点不太清楚。

问题代码截图:
在这里插入图片描述

因此,本文TypeScript中的???:?.!.为主要内容展开讲解。

核心干货

??

  • ?: 是指可选参数
  • 可以理解为参数自动加上undefined
function echo(x: number, y?: number) {
    return x + (y || 0);
}
getval(1); // 1
getval(1, null); // error, 'null' is not assignable to 'number | undefined'
interface IProListForm {
  enterpriseId: string | number;
  pageNum: number;
  pageSize: number;
  keyword?: string; // 可选属性
}

?:

  • ??|| 的意思有点相似,但是又有点区别
  • ??相较||比较严谨, 当值等于0的时候||就把他给排除了,但是??不会
console.log(null || 5)   //5
console.log(null ?? 5)     //5

console.log(undefined || 5)      //5
console.log(undefined ?? 5)      //5

console.log(0 || 5)       //5
console.log(0 ?? 5)      //0

?.

  • ?.的意思基本和 && 是一样的
  • a?.b 相当于 a && a.b ? a.b : undefined
const a = {
      b: { c: 7 }
};
console.log(a?.b?.c);     //7
console.log(a && a.b && a.b.c);    //7

!.

!.的意思是断言,告诉ts你这个对象里一定有某个值

const inputRef = useRef<HTMLEInputlement>(null);
// 定义了输入框,初始化是null,但是你在调用他的时候相取输入框的value,这时候dom实例一定是有值的,所以用断言
const value: string = inputRef.current!.value;
// 这样就不会报错了

以上就是关于 TypeScript中的???:?.!.是什么意思? 的知识分享,相信看完这篇文章的小伙伴们一定有了一定的收获。当然,可能有不足的地方,欢迎大家在评论区留言指正!

下期文章将介绍TypeScript中的typeof与keyof的相关内容
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Scrapy爬虫框架(概念)

Scrapy 入门教程 | 菜鸟教程 (runoob.com) Scrapy是一个快速功能强大的网络爬虫框架 Scrapy的安装 通过 pip 安装 Scrapy 框架: pip install Scrapy 安装后小测&#xff1a; 执行 scrapy ‐h Scrapy不是一个函数功能库&#xff0c;而是一个爬虫框架。 Scrapy架构图(绿线是…

CentOS7 虚拟机 双网卡绑定

一、网卡绑定模式 模式类型特点mode0round-robin&#xff08;平衡轮询策略&#xff09;基于per packet方式&#xff0c;轮询往每条链路发送报文。提供负载均衡和容错的能力&#xff0c;当有链路出问题&#xff0c;会把流量切换到正常的链路上。交换机端需要配置聚合口。mode1a…

【论文笔记】CRN: Camera Radar Net for Accurate, Robust, Efficient 3D Perception

原文链接&#xff1a;https://arxiv.org/abs/2304.00670 1. 引言 本文提出两阶段融合方法CRN&#xff0c;能使用相机和雷达生成语义丰富且位置精确的BEV特征。具体来说&#xff0c;首先将图像透视特征转换到BEV下&#xff0c;该步骤依赖雷达&#xff0c;称为雷达辅助的视图变换…

C#基础复习

语句 目录 语句 switch&#xff1a; 跳转语句 标签语句 标签&#xff1a; 标签语句的作用域 goto语句 using 语句 资源的包装使用 using 语句示例&#xff1a; 多个资源和嵌套 语句是描述某个类型或让程序执行某个动作的源代码指令 块在语法上算作一个单条嵌入语句。任何语…

电脑无法正常关机?点了关机又会自动重启

“真木马”相信不少朋友遇到过电脑关机自动重启现象&#xff0c;一点关机&#xff0c;但随后电脑有会进入重启状态&#xff0c;就是一直不会停&#xff0c;属实是很难崩。 目录 一、问题症状 二、问题原因 三、解决方案 方法一&#xff1a; 1.关闭系统发生错误时电脑自动…

企业数字化转型全是坑?这几篇数字化转型成功案例,减少70%损失

这篇给大家整理了200企业数字化转型案例合集&#xff0c;涵盖了制造、建筑、教育、零售、互联网等10行业的大中小型企业数字化转型思路&#xff0c;希望对大家有所帮助。 案例全部整合在这篇文章中&#xff0c;点击即可查看>>数字化干货资料合集&#xff01; 01 首先&…

C++编程法则365条一天一条(359)认识各种初始化术语

文章目录Default initialization默认初始化Copy initialization拷贝初始化Aggregate initialization聚合初始化Direct initialization直接初始化list_initialization列表初始化value_initialization值初始化参考&#xff1a; https://en.cppreference.com/w/cpp/language/copy_…

项目打包发布流程

---》》》项目打包发布 1.编译并构建项目 2.部署 npm i npm run build scp2&#xff1a;需要写代码 ---》》》 后续有空更新&#xff1a;赋几个链接&#xff1a; Jenkins官网 nullhttps://www.jenkins.io/zh/一文详解Jenkins的安装与配置Jenkins是一个基于Java开发的开源…

ERROR:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing错误

一、问题 重新安装hbase后&#xff0c;在hbase shell中查看所有命名空间时&#xff0c;出现了ERROR:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing错误。 二、方法 1、root用户下&#xff0c;关闭hbase stop-hbase.sh 2、执行以下命令删除HDFS下的hb…

深度学习环境配置超详细教程【Anaconda+PyTorch(GPU版)+CUDA+cuDNN】

深度学习环境配置 入门深度学习&#xff0c;首先要做的事情就是要搭建深度学习的环境。不管你是Windows用户&#xff0c;Mac用户还是Ubuntu用户&#xff0c;只要电脑配置允许&#xff0c;都可以做深度学习&#xff0c;毕竟Windows、Mac和Ubuntu系统都可以进行深度学习环境的搭…

惊呆了,2小时我就学会了Charles抓包的详细教程

目录 一、什么是Charles 二、下载Charles 三、设置Charles代理 四、配置设备代理 五、抓包操作 六、常见问题及解决方法 抓包不到某些应用程序 Charles抓包后网站出现异常 七、总结 一、什么是Charles Charles是一个跨平台的HTTP代理服务工具&#xff0c;可以用来查看…

软件测试工作主要做什么

随着信息技术的发展和普及&#xff0c;人们对软件的使用越来越普及。但是在软件的使用过程中&#xff0c;软件的效果却不尽如人意。为了确保软件的质量&#xff0c;整个软件业界已经逐渐意识到测试的重要性&#xff0c;也有越来越多的小伙伴加入了软件测试这个行业中来。软件测…

从FPGA说起的深度学习(六)-任务并行性

这是新的系列教程&#xff0c;在本教程中&#xff0c;我们将介绍使用 FPGA 实现深度学习的技术&#xff0c;深度学习是近年来人工智能领域的热门话题。在本教程中&#xff0c;旨在加深对深度学习和 FPGA 的理解。用 C/C 编写深度学习推理代码高级综合 (HLS) 将 C/C 代码转换为硬…

ServletAPI详解(四)-HttpServletResponse

我们来看第三个方法,HttpServletResponse 在servlet运行原理中提到,servlet代码中的doXXX方法的目的就是根据请求计算响应,然后将响应数据设置到HttpServletResponse对象中,然后 Tomcat 就会把这个 HttpServletResponse 对象按照 HTTP 协议的格式, 转成一个字符串, 并通过 Soc…

Linux Shell 实现一键部署二进制Rabbitmq

rabbitmq 前言 RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而集群和故障转移是构建在开放电信平台框架上的。所有主要的编程语言均有与代…

MPC的560x系列的运行模式的介绍

一、模式简介 1、运行模式 一共11种模式&#xff0c;分别为RESET、DRUN、SAFE、TEST、RUN0、RUN1、RUN2、RUN3、HALT、STOP、STANDBY。其中RESET、DRUN、SAFE、TEST是系统工作模式&#xff0c;用户不用个特别关系&#xff0c;而后面几种是用于经常使用到的工作模式。 RESET&a…

Linux搭建docker

1. 查看系统的内核版本 [rootwide ~]# uname -r 3.10.0-1160.el7.x86_642. 将yum更新到最新版本 [rootwide ~]# yum upate -y Complete!3. 安装Docker所需的依赖包 [rootwide ~]# sudo yum install -y yum-utils device-mapper-persistent-data lvm2 Loaded plugins: fastes…

MyBatis多表查询+动态sql

文章目录MyBatis多表查询1. 多表一对一查询2. 多表一对多动态SQL1.\<if\>标签2.\<trim\>标签3. \<where\>标签4.\<set\>标签5. \<foreach\>标签MyBatis多表查询 在全局配置文件中中设置MyBatis执行日志 mybatis:configuration:log-impl: org.a…

hadoop使用MapReduce统计单词出现次数案例

前言 前面的文章已经展示了如何在windows上传文件到hdfs&#xff0c;上传后如何简单的做统计&#xff0c;本文展示一下。上传文件到HDFS链接 这里我们做一个案例&#xff0c;对一个上传到HDFS的文档中统计good出现的次数。 文件内容如下 这里我使用的是【上传文件到HDFS链接…

南方猛将加盟西方手机完全是臆测,他不会希望落得兔死狗烹的结局

早前南方某科技企业因为命名的问题闹得沸沸扬扬&#xff0c;于是一些业界人士就猜测该猛将会加盟西方手机&#xff0c;对于这种猜测可以嗤之以鼻&#xff0c;从西方手机以往的作风就可以看出来它向来缺乏容纳猛将的气量。一、没有猛将的西方手机迅速沉沦曾几何时&#xff0c;西…