ts一些常用符号

非空断言操作符(!)

具体是指在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言,x! 将从 x 值域中排除 null 和 undefined 。

1. 赋值时忽略 undefined 和 null

function myFn(value: string | undefined | null) {
  const onlyString: string = value; // Error
  const onlyString1: string = value!; // Ok
}

2. 函数调用时忽略 undefined 和 null

type MyGenerator = () => number
function myFn(myGenerator: MyGenerator | undefined | null) {
    const num1 = myGenerator();//Error, 不能调用可能是 "null" 或“未定义”的对象
    const num2 = myGenerator!();//ok
}

可选链操作符(?.)

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

就是代码运行时如果遇到 nullundefined 就可以⽴即停⽌某些表达式的运⾏,直接返回undefined

语法和练习:

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args
const obj = {
    foo: {
        bar: {
            baz: 42,
        },
    },
};

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
console.log('baz', baz, safe)

可选元素访问:

可选链除了支持可选属性的访问之外,它还支持可选元素的访问,它的行为类似于可选属性的访问,只是可选元素的访问允许我们访问非标识符的属性,比如任意字符串、数字索引和 Symbol

  • 会自动检测输入参数 arr 的值是否为 null 或 undefined,从而保证了我们代码的健壮性
const getArrIndex = <T>(arr: T[], index: number) => { 
    return arr?.[index]
}
//编译后的ES5语法
"use strict";
function getArrIndex(arr, index) {
    if (index === void 0) { index = 0; }
    return arr === null || arr === void 0 ? void 0 : arr[index];
}

可选链与函数调用:

当尝试调用一个可能不存在的方法时也可以使用可选链,系统中某个方法不可用,有可能是由于版本不一致或者用户设备兼容性问题导致的。函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。

const result = obj.customMethod?.();

注意:

  • 如果存在一个属性名且该属性名对应的值不是函数类型,使用 ?. 仍然会产生一个 TypeError 异常。
  • 可选链的运算行为被局限在属性的访问、调用以及元素的访问 —— 它不会沿伸到后续的表达式中,也就是说可选调用不会阻止 a?.b / someMethod() 表达式中的除法运算或 someMethod 的方法调用。

空值合并运算符(??)

当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。

const rr= null ?? 'nordon'; // 返回nodedon
const dd = 0 ?? 18; // 返回 0
const cc = 0 || 18; // 返回 18

短路:

当空值合并运算符的左表达式不为 null 或 undefined 时,不会对右表达式进行求值。

function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}
console.log(A() ?? C()); 
//A was called
//C was called
//foo
console.log(B() ?? C());
//B was called
//false

不能与 && 或 || 操作符共用

若空值合并运算符 ?? 直接与 AND(&&)和 OR(||)操作符组合使用 ?? 是不行的。这种情况下会抛出 SyntaxError。当使用括号来显式表明优先级时是可行的

null || undefined ?? "foo"; // raises a SyntaxError 不能在不使用括号的情况下混用 "||" 和 "??" 操作。

true && undefined ?? "foo"; // raises a SyntaxError 不能在不使用括号的情况下混用 "&&" 和 "??" 操作

(true && undefined) ?? "foo"; //ok

与可选链操作符 ?. 的关系

空值合并运算符针对 undefined 与 null 这两个值,可选链式操作符 ?. 也是如此。可选链式操作符,对于访问属性可能为 undefined 与 null 的对象时非常有用

interface A {
    name: string;
    city?: string;
  }
  
  let customer: A = {
    name: "mary"
  };
  
  let customerCity = customer?.city ?? "Unknown city";
  console.log(customerCity); // 输出:Unknown city

可选属性(?:)

接⼝是⼀个很重要的概念,它是对⾏为的抽象,⽽具体如何⾏动需要由类去实现。TypeScript 中的接⼝是⼀个⾮常灵活的概念,除了可⽤于对类的⼀部分⾏为进⾏抽象以外,也常⽤于对「对象的形状(Shape)」进⾏描述。

interface Person {
    name: string;
    age: number; 
}
//类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性
let mary: Person = {
    name: "mary" //error
};

interface Person1 {
    name: string;
    age?: number; 
}
let mary1: Person1 = {
    name: "mary" //ok
};

运算符(&)

在 TypeScript 中交叉类型是将多个类型合并为⼀个类型。通过 & 运算符可以将现有的多种类型叠加到⼀起成为⼀种类型,它包含了所需的所有类型的特性

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
let point: Point = {
  x: 1, 
  y: 1 
}

运算符(|)

在 TypeScript 中联合类型(Union Types)表示取值可以为多种类型中的⼀种,联合类型使⽤ | 分隔每个类型。联合类型通常与 null 或 undefined ⼀起使⽤
 

const fn = (info: strong | null | undefined) => {}

数字分隔符(_)

对于⼀个数字字⾯量,现在可以通过把⼀个下划线作为它们之间的分隔符来分组数字

const num1 = 1_234_567;
// 等价
const num1 = 1234567;

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

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

相关文章

JVM源码剖析之JIT工作流程

版本信息&#xff1a; jdk版本&#xff1a;jdk8u40思想至上 Hotspot中执行引擎分为解释器、JIT及时编译器&#xff0c;上篇文章描述到解释器过度到JIT的条件。JVM源码剖析之达到什么条件进行JIT优化 这篇文章大致讲述JIT的编译过程。在JDK中javac和JIT两部分跟编译原理挂钩&a…

游游的排列构造

示例1 输入 5 2 输出 3 1 5 2 4 示例2 输入 5 3 输出 2 1 4 3 5 #include<bits/stdc.h> using namespace std; typedef long long ll; const int N1e55; int n,k; int main(){scanf("%d%d",&n,&k);int xn-k1;int yn-k;int f1;for(int i1;i&l…

【前端】javascript+html+css 家具销售网站(代码+报告)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

工业RFID读写器在食品饮料加工生产的应用!

当前食品饮料加工行业快速发展&#xff0c;得益于科技的应用&#xff0c;科技不仅提高了生产效率&#xff0c;还提升了食品生产质量和食品安全水平。其中&#xff0c;RFID技术在食品饮料行业中的应用对于加工生产帮助很大&#xff0c;RFID技术未来在食品饮料行业仍有巨大的潜力…

Mac 定时重启 TouchBar 脚本(缓解闪烁问题)

背景 Mac 笔记本 TouchBar 是真的脆啊&#xff0c;合盖使用一段时间就废了&#xff0c;右侧一直闪烁简直亮瞎眼 &#x1f602; 经过观察&#xff0c;总结出闪烁规律如下&#xff1a; 工作状态&#xff1a;不断操作电脑时&#xff0c;触控栏处于工作状态&#xff0c;几乎不闪…

明晚直播:可重构计算芯片的AI创新应用分享!

大模型技术的不断升级及应用落地&#xff0c;正在推动人工智能技术发展进入新的阶段&#xff0c;而智能化快速增长和发展的市场对芯片提出了更高的要求&#xff1a;高算力、高性能、灵活性、安全性。可重构计算区别于传统CPU、GPU&#xff0c;以指令驱动的串行执行方式&#xf…

5.开发DAO组件 -- Spring Data JPA

开发DAO组件 作用&#xff1a;用来访问数据库 持久化技术&#xff1a;Spring Data, JPA, Mybaits&#xff0c;jOOQ 等 Spring Boot为常见持久化技术提供了支持。 现在使用 Spring Data JPA Spring Data JPA 使用Spring Data JPA来访问数据库&#xff0c;需要再项目添加两个…

Python工具箱系列(三十九)

使用zlib对数据进行压缩 现实世界中&#xff0c;大量存在着对数据压缩的需求。为此&#xff0c;python内置了zlib压缩库&#xff0c;可以方便的对任意对象进行压缩。 下述代码演示了对字符串进行压缩&#xff1a; import zlib# 压缩一段中文 originstr 神龟虽寿&#xff0c…

Mysql触发器

1.触发器 触发器是与表有关的数据库对象&#xff0c;指在 insert / update / delete 之前或之后&#xff0c;触发并执行触发器中定义的SL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&#xff0c;数据校验等操作。 使用别名 OLD 和 …

python将多张图片拼成一张矩阵图,合成一张大图

用Python实现将多张图片排列成n*m的图像矩阵图 目录 引言环境准备代码实现效果演示总结 引言 在图像处理和图像展示的应用中&#xff0c;将多张图片排列成一个图像矩阵图是一个常见的需求。本博客介绍如何使用Python实现将12张图片排列成n*m的图像矩阵图。 环境准备 为了实…

【C# 6.0】云LIS平台源码

基于云计算的区域LIS平台为医疗机构改善患者服务质量提供了强有力的支持&#xff0c;“以患者为核心”这一理念得到了充分实现&#xff0c;可以解决各医院LIS建设水平参差不齐的现状&#xff0c;并完善各医院内LIS系统的功能&#xff0c;实现数据标准统一、功能完善、性能可靠&…

F5 LTM 知识点和实验 2-负载均衡基础概念

第二章&#xff1a;负载均衡基础概念 目标&#xff1a; 使用网页和TMSH配置virtual servers&#xff0c;pools&#xff0c;monitors&#xff0c;profiles和persistence等。查看统计信息 基础概念&#xff1a; Node一个IP地址。是创建pool池的基础。可以手工创建也可以自动创…

【计算机网络】应用层协议 -- 安全的HTTPS协议

文章目录 1. 认识HTTPS2. 使用HTTPS加密的必要性3. 常见的加密方式3.1 对称加密3.2 非对称加密3.3 非对称加密对称加密 4. 引入CA证书4.1 CA认证4.2 数据签名4.3 非对称机密对称加密证书认证4.4 常见问题 5. 总结 1. 认识HTTPS HTTPS全称为 Hyper Text Tranfer Protocol over …

页面访问控制远程仓库

页面访问权限控制 什么是jwt身份认证 在前后端分离模式的开发中&#xff0c;服务器如何知道来访者的身份呢&#xff1f; 在登录后&#xff0c;服务器会响应给用户一个 令牌 &#xff08;token&#xff09;令牌中会包括该用户的id等唯一标识浏览器收到令牌后&#xff0c;自己…

【极大似然性】不同函数(均方误差、交叉熵、KL 散度)不同结局(1/2)

Kowshik chilamkurthy 一、说明 很多时候&#xff0c;数据科学家和机器学习从业者并不欣赏不同损失指标之间的数学和直观关系&#xff0c;如负对数似然、交叉熵、最大似然估计、Kullback-Leibler &#xff08;KL&#xff09; 散度&#xff0c;以及最重要的均方误差。如果我说KL…

Windows11+Opencv+Clion编译源码

Windows11OpencvClion编译源码 参考&#xff1a;https://www.robotsfan.com/posts/69395e08.html 注意事项 编译过程中使用的软件&#xff0c;开源码等所有工具的安装路径一定不要有中文和空格。cmake过程会下载一些文件&#xff0c;如果是局域网的话可能下载不下来&#xf…

哈工大计算机网络课程网络安全基本原理详解之:消息完整性与数字签名

哈工大计算机网络课程网络安全基本原理详解之&#xff1a;消息完整性与数字签名 这一小节&#xff0c;我们继续介绍网络完全中的另一个重要内容&#xff0c;就是消息完整性&#xff0c;也为后面的数字签名打下基础。 报文完整性 首先来看一下什么是报文完整性。 报文完整性…

C++ ------ 模板初阶

文章目录 泛型编程模板函数模板概念原理函数模板的实例化类模板 泛型编程 我们在实现交换函数的时候&#xff0c;只能实现一个数据类型的交换函数&#xff0c;想要在C中完成对应类型数据的交换一种方法是使用函数重载&#xff0c;就像下面这样 void Swap(int& left, int&am…

开发一个RISC-V上的操作系统(五)—— 协作式多任务

目录 往期文章传送门 一、什么是多任务 二、代码实现 三、测试 往期文章传送门 开发一个RISC-V上的操作系统&#xff08;一&#xff09;—— 环境搭建_riscv开发环境_Patarw_Li的博客-CSDN博客 开发一个RISC-V上的操作系统&#xff08;二&#xff09;—— 系统引导程序&a…

【C++】类和对象(下)

1、初始化列表 初始化列表&#xff1a;以一个冒号开始&#xff0c;接着是一个以逗号分隔的数据成员列表&#xff0c;每个"成员变量"后面跟一个放在括号中的初始值或表达式。 class Date { public:Date(int year, int month, int day): _year(year), _month(month), _…