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

news2024/7/6 19:18:49

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的相关内容
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

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

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

相关文章

私有化部署GPT,告别网络困扰

最近的GPT是热火朝天&#xff0c;基本人手一个。工具用的好&#xff0c;工作5分钟&#xff0c;划水一整天。 不过最近Chat的访问越来越限制了&#xff0c;访问官网都有网络的问题&#xff0c;今天给大家介绍一个方案&#xff0c;私人独享属于自己的chat&#xff0c;不再担心想…

sdx12使能bluetooth

最后的效果&#xff1a; 1.驱动使能 apps_proc/kernel/msm-5.4/arch/arm/configs/vendor/sdxnightjar.config #add bt driver CONFIG_BTy CONFIG_MSM_BT_POWERy使用的芯片是sdx12 QCA6174A-1 管脚配置如下&#xff08;如果管脚不同&#xff0c;需要修改对应的dts&#xff09…

(十)排序算法-冒泡排序

1 排序算法 1.1 介绍 排序也称为排序算法&#xff08;Sort Algorithm&#xff09;&#xff0c;排序是将一组数据&#xff0c;依指定的顺序进行排列的过程。 1.2 排序的分类 &#xff08;1&#xff09;内部排序 指将需要处理的所有数据都加载到内部存储器中进行排序。 &…

C/C++程序设计——const关键字

1.修饰变量 1.1 作用 功能&#xff1a;不能直接被修改 const修饰变量&#xff0c;就相当于是定义了一个常量。该变量不能直接被修改&#xff0c;但是可以通过指针修改。 作用&#xff1a;便于维护、提前发现可能错误的修改 比如程序中大量使用了一个数字10&#xff0c;且不会…

GaussDB工作级开发者认证—第一章GaussDB数据库介绍

一. GaussDB概述 GaussDB是华为基于openGauss自研生态推出的企业级分布式关系型数据库。具备企业级复杂事物混合负载能力&#xff0c;同时支持分布式事务强一致性&#xff0c;同城跨AZ部署&#xff0c;数据0丢失&#xff0c;支持1000的计算节点扩展能力&#xff0c;4PB海量存储…

springcloud2.1.0整合seata1.5.2+nacos2.10(附源码)

springcloud2.1.0整合seata1.5.2nacos2.10&#xff08;附源码&#xff09; 1.创建springboot2.2.2springcloud2.1.0的maven父子工程如下&#xff0c;不过多描述&#xff1a; 搭建过程中也出现很多问题&#xff0c;主要包括&#xff1a; 1.seataServer.properties配置文件的组…

安全配置管理 (SCM):建立安全的基础

通过确保在端点中建立和维护理想的安全配置&#xff0c;让自己在安全的基础上做好准备&#xff0c;这样公司就不会因单个漏洞而分崩离析。安全配置管理涉及持续检测端点中各个组件之间的配置偏差和错误配置&#xff0c;并使它们重新对齐。 在本文中&#xff0c;将了解 Vulnera…

<Linux开发> linux应用开发-之-进程通信之管道例程

一、简介 所谓管道&#xff0c;是指用于连接一个读进程和一个写进程&#xff0c;以实现它们之间通信的共享文件&#xff0c;又称 pipe 文件。 向管道&#xff08;共享文件&#xff09;提供输入的发送进程&#xff08;即写进程&#xff09;&#xff0c;以字符流形式将大量的数…

Windows串口出厂测试工具与使用说明

WCHUsbSerTest是一款用于WCH USB转串口系列产品出厂测试的工具软件&#xff0c;方便用户对产品进行批量化功能测试。该软件支持以下特性&#xff1a; 支持设备热插拔检测&#xff0c;插入自动测试。支持两种测试模式&#xff1a;1个设备自测、2个设备互相连接测试。支持多种串…

VMware Horizon 8 2303 - 虚拟桌面基础架构 (VDI) 和应用软件

请访问原文链接&#xff1a;https://sysin.org/blog/vmware-horizon-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Version2303DocumentationRelease NotesRelease Date2023-03-30 虚拟桌面基础架构 (VDI) 和应用软件 VMw…

chagpt中文镜像版-ChatGPT工具下载

ChatGPT工具下载 ChatGPT是由OpenAI公司开发的预训练语言模型&#xff0c;目前已经开源并在GitHub上发布了相关代码和模型&#xff0c;提供了使用Python编写的API。如果您要使用ChatGPT&#xff0c;您可以通过以下步骤进行下载和安装&#xff1a; 在GitHub上下载&#xff1a;您…

【vue】 vue2 中使用 Tinymce 富文本编辑器

文章目录Tinymce 效果一、安装依赖二、封装组件-Tinymce.vue三、汉化文件-zh_CN.js四、vue使用组件封装五、整体目录结构六、可能会遇到的问题import "tinymce/icons/default" 路径找不到需要升级tinymce版本Tinymce 效果 一、安装依赖 npm i tinymce5.1.0 -S npm i…

计算机组成原理实验一(完整)

在VC中使用调试功能将下列语句运行的内存存放结果截图&#xff0c;每运行一句需截图一次。 #include<stdio.h> int main() {int a 你的学号末两位-100; //0x&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#x…

【Redis 进阶之路】3. Redis 主从 以及哨兵

Redis 主从 以及哨兵 单实例Redis 不足&#xff1a; 上述的是一个单实例的Redis。 我们可以先分析下有哪些不足&#xff1a; 单点故障 &#xff08;是每个单实例必须面对的问题&#xff09;容量有限 &#xff08;Redis毕竟是缓存型数据库&#xff0c;容量取决于服务器分配的容…

多目标优化算法评价指标(performance metrics)

参考Performance metrics in multi-objective optimization​​​​​​​ Riquelme, N., Lcken, C. V., & Baran, B. (2015, 19-23 Oct. 2015). Performance metrics in multi-objective optimization. Paper presented at the 2015 Latin American Computing Conference…

SpringBoot整合ES 实现简单项目(七)

一直在烂尾&#xff0c;对&#xff0c;说的就是你&#xff0c;楼. 上一章简单介绍了 SpringBoot 整合 ES (六), 如果没有看过,请观看上一章 这一章节老蝴蝶做一个简单的 ES 查询项目 一. pom.xml 添加依赖 <!--引入MySql的驱动--><dependency><groupId>mys…

小林coding——图解MySQL

文章目录基础篇执行一条select语句&#xff0c;期间发生了什么&#xff1f;MySQL一行记录是怎么存储的&#xff1f;索引篇索引常见面试题什么是索引&#xff1f;索引的分类&#xff1f;小结从数据页的角度看B树为什么MySQL采用B树作为索引&#xff1f;MySQL单表不要超过2000W行…

ElasticSearch分片与Lucene Index

在ES中一个索引有一个或者多个分片构成&#xff0c;在创建索引的时候可以设置主分片和副本分片的数量&#xff0c;当主分片确定之后就不可以再修改了(因为路由需要基于这个数量来分发请求)&#xff0c;而副本分片数量随时可以修改 PUT /myIndex {"settings" : {&quo…

使用ensp软件模拟DNS服务器实验

DNS服务器介绍&#xff1a; DNS服务器&#xff08;Domain Name Server&#xff0c;域名服务器&#xff09;是进行域名和与之相对应的IP地址进行转换的服务器。它起到将人类易于记忆的域名映射到相应的机器可识别的IP地址的作用。 DNS服务器中保存了一张域名和与之相对应的IP地…

Flutter 中 Provider 基本使用

前言&#xff1a; Provider.of<XXX>(context).数据 Provider.of<XXX>(context).方法 ChangeNotifier&#xff1a;这个是真正数据&#xff08;状态&#xff09;存放的地方。我们自己创建的provider 是混入ChangeNotifier 的。 一 安装 在pub.dev 上搜索provider …