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

news/2024/10/31 5:31:11/

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)     //5console.log(undefined || 5)      //5
console.log(undefined ?? 5)      //5console.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.ppmy.cn/news/42073.html

相关文章

Nestjs实战干货-概况-第一步

第一步 在这组文章中&#xff0c;你将学习 Nest 的核心基础知识。为了熟悉 Nest 应用程序的基本构件&#xff0c;我们将建立一个基本的 CRUD 应用程序&#xff0c;其功能涵盖了入门级的很多方面。 语言 我们爱上了 TypeScript&#xff0c;但最重要的是–我们爱 Node.js。这就…

[c++17新增语言特性] --- 折叠表达式

折叠表达式(Fold Expression)是C++17引入的一个新特性,它允许对多个参数进行操作,并返回一个值。折叠表达式的语法如下: ( pack op ... ) ( ... op pack ) ( pack op ... op init ) ( init op ... op pack

基于Spring boot和Vue3的博客平台:系统通知、评论回复通知、专栏更新通知、用户角色与权限管理模块

目录 一、系统通知、评论回复通知、专栏更新通知 1.前端通知展示 2.后端通知实现 3.发送评论回复通知 4.发送专栏更新通知 二、实时通知与邮件通知 1.实时通知 三、用户角色与权限管理 1.角色与权限数据模型 2.分配角色与权限 3.基于角色的访问控制 在这篇博客中&am…

卷积神经网络底层原理

1.卷积神经网络底层原理 声明&#xff1a;以下为《大话计算机》作者冬瓜哥课程视频截图&#xff0c;仅供学习 1.1卷积 一张图经过一种卷积核&#xff08;核函数&#xff09;滑动窗口进行卷积运算后得到一张特征图&#xff0c;这只是这种卷积核视角下看到的特征。所以我们需要多…

网络安全行业现在好混吗,工资水平怎么样?

一个离职转行员工的实话&#xff1a;网络安全是永远稀缺的&#xff0c;它的稀缺表现在你学不懂、学不够、学不通的知识与很高的技术壁垒的层面上。想混日子&#xff0c;这行最不缺的就是平庸之辈&#xff0c;想做好做强你要掂量自己有没有那个天赋&#xff01; 技术人才&#…

【Linux C/C++】关于结构体定义,typedef关键字的使用场景

typedef关键字修饰结构体声明的优劣 优势&#xff1a; 在C语言中&#xff0c;可以使用两种方式来定义结构体类型&#xff1a;使用struct关键字和使用typedef关键字。使用struct关键字定义结构体类型时&#xff0c;需要在定义时同时指定结构体的名称和成员变量&#xff0c;例如…

Compose (11/N) - 手势

一、点击 1.1 可点击 Modifier.clickable( ) 允许应用检测对该元素的点击。 Composable fun ClickableSample() {val count remember { mutableStateOf(0) }Text(text count.value.toString(),modifier Modifier.clickable { count.value 1 }) } 1.2 手势检测 Modifier.p…

【MATLAB图像处理实用案例详解(10)】——基于Kalman滤波的目标跟踪预测红色小球位置

目录一、Kalman滤波二、Kalman滤波源程序三、Kalman滤波预测红色小球位置程序实现一、Kalman滤波 Kalman 滤波算法是一个最优化自回归数据处理算法&#xff0c;对于很多问题的解決&#xff0c;它是最优、效率最高甚至是最有用的。Kalman 滤波的广泛应用己经超过30年&#xff0…