ts一些常用符号

news2024/11/15 10:06:43

非空断言操作符(!)

具体是指在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 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;

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

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

相关文章

Simulink仿真模块 - Saturation Dynamic

Saturation Dynamic将输入信号限制在动态饱和上界和下界值之间 在仿真库中的位置为&#xff1a;Simulink / Discontinuities 模型为&#xff1a; 说明 Saturation Dynamic 模块产生输出信号&#xff0c;该信号是以来自输入端口 up 和 lo 的饱和值为界的输入信号的值。 输入输…

【已解决】windows7添加打印机报错:加载Tcp Mib库时的错误,无法加载标准TCP/IP端口的向导页

windows7 添加打印机的时候&#xff0c;输入完打印机的IP地址后&#xff0c;点击下一步&#xff0c;报错&#xff1a; 加载Tcp Mib库时的错误&#xff0c;无法加载标准TCP/IP端口的向导页 解决办法&#xff1a; 复制以下的代码到新建文本文档.txt中&#xff0c;然后修改文本文…

PHP+mysql鲜花销售商城网站html5在线鲜花花店购物订购系统

花店订购管理系统&#xff0c;是基于php编程语言&#xff0c;mysql数据库开发&#xff0c;本系统分为用户和管理员两个角色&#xff0c;其中用户可以注册登陆系统&#xff0c;查看分类&#xff0c;搜索鲜花&#xff0c;查看鲜花详情&#xff0c;加入购物车&#xff0c;生成订单…

【MySQL】模具数据转移处理

系列文章 C#底层库–MySQLBuilder脚本构建类&#xff08;select、insert、update、in、带条件的SQL自动生成&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类&#xff08;推荐阅读&#xff0…

【phaser微信抖音小游戏开发002】hello world!

执行效果&#xff1a; 将以下代码文本内容&#xff0c;放入到game.js中即可。目录结构如下图 import ./js/libs/weapp-adapter import ./js/libs/symbolGameGlobal.window.scrollTo () > { };//防止真机出错 import Phaser from ./js/phaser//引入Phaservar {windowWidth, …

9条建议告诉你如何正确处理PCB设计布线

一、关于PCB布线线宽 1、布线首先应满足工厂加工能力&#xff0c;首先向客户确认生产厂家&#xff0c;确认其生产能力&#xff0c;如图1所示。如客户无要求&#xff0c;线宽参考阻抗设计模板。 图1 PCB板厂线宽要求 2、阻抗模板&#xff0c;根据客户提供的板厚及层数要求&…

vue中使用axios发送请求时,后端同一个session获取不到值

问题描述&#xff1a; 在登录页面加载完成后通过axios请求后端验证码接口&#xff08;这时后端会生成一个session用于保存验证码数值&#xff09;&#xff0c;当输入完用户名、密码、验证码后请求登录接口&#xff0c;报错验证码输入错误&#xff0c;打印后端保存验证码的sessi…

C1. Dual (Easy Version)(正负号转换)

题目&#xff1a;Problem - C1 - Codeforces 总结&#xff1a; 首先&#xff1a;对于全正数和全负数的数组求非减序列构造很是简单 紧接着&#xff1a;对于有正有负的数组可以将其转化为统一符号 最后符号统一方案&#xff1a; 找出绝对值最大的数并将每个数都将加上该绝对…

SSM电影推荐系统【纯干货分享,免费领源码03073】

目 录 摘 要 Abstract 第1章 前 言 1.1 研究背景 1.2 研究现状 1.3 系统开发目标 第2章 技术与原理 2.1 开发技术 2 2.2 ssm框架介绍 2 2.3 MySQL数据库 2 2.4 B/S结构 2 第3章 需求分析 3.1 需求分析 3.2 系统可行性分析 3.3 项目设计目标与原则 3.4…

添加IP白名单的方法,你知道几个?

在各种网络操作中&#xff0c;不同网站和服务可能会对来源IP地址进行限制&#xff0c;为了正常访问&#xff0c;我们需要将自己的IP地址添加到白名单中。本文将为您详细介绍添加IP白名单的几种方法以及它们之间的优劣比较&#xff0c;同时分享可能遇到的问题和解决方案。 方法…

mac 下用brew快速安装CommandLineTools

有时候用git 就会提示安装CommandLineTools &#xff0c;xcode太大又不想安装&#xff0c;怎么办呢我们可以试下下面的方式 什么是Brew&#xff1a; Brew是Mac OS X下的一个包管理器&#xff0c;可以方便地安装、升级和卸载很多常用的软件包 在mac下如何安装呢&#xff1a; …

linux网卡命名规则

Consistent Network Device Naming Linux provides methods for consistent(一致) and predictable(可预测) network device naming for network interfaces. These features change the name of network interfaces on a system in order to make locating and different…

Java8实战-总结9

Java8实战-总结9 Lambda表达式把Lambda付诸实践&#xff1a;环绕执行模式第1步&#xff1a;记得行为参数化第2步&#xff1a;使用函数式接口来传递行为第3步&#xff1a;执行一个行为第4步&#xff1a;传递Lambda 使用函数式接口PredicateConsumerFunction原始类型特化 Lambda表…

mybatis plus 的一些使用

简介 官网&#xff1a;http://mp.baomidou.com/ 参考教程&#xff1a;https://baomidou.com/pages/24112f/ MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 …

web前端框架Javascript之JavaScript 异步编程史

早期的 Web 应用中&#xff0c;与后台进行交互时&#xff0c;需要进行 form 表单的提交&#xff0c;然后在页面刷新后给用户反馈结果。在页面刷新过程中&#xff0c;后台会重新返回一段 HTML 代码&#xff0c;这段 HTML 中的大部分内容与之前页面基本相同&#xff0c;这势必造成…

同样是跨端框架,React会不会被VUE取代?

看到知乎上有比较多的类似问题&#xff0c;正好这两个框架在以往的一些项目中都有实践过&#xff0c;就借着本篇文章说说我个人的看法。 先摆个结论&#xff1a;不会&#xff0c;毕竟各有千秋&#xff0c;除非跨端框架有被更好的概念所替代&#xff0c;又或者App已经彻底过气了…

PoseiSwap:通过 RWA 的全新叙事,反哺 Nautilus Chain 生态

PoseiSwap 是 Nautilus Chain 上的首个 DEX&#xff0c;作为目前行业内模块化区块链叙事的早期奉行者&#xff0c;PoseiSwap 也得到了较高的市场关注。基于 Nautilus Chain&#xff0c;PoseiSwap 打造了一个全新的 Rollup 应用层&#xff0c;并通过零知识证明来建立全新的订单簿…

6个月、21天,GoldenDB分布式数据库核心系统落地中移动

近日&#xff0c;2023“鼎新杯”数字化转型应用大赛入围名单公示&#xff0c;山东移动基于GoldenDB分布式数据库的CRM&BOSS核心系统自主创新实践成功入选。该项目是中兴通讯与中国移动在数据库关键领域的又一个合作范例。 核心系统业务量大&#xff0c;分布式转型迫在眉睫 …

C语言指针进阶-1

本篇文章带来 1. 字符指针 2. 数组指针 3. 指针数组的相关知识详细讲解&#xff01; 如果您觉得文章不错&#xff0c;期待你的一键三连哦&#xff0c;你的鼓励是我创作的动力之源&#xff0c;让我们一起加油&#xff0c;一起奔跑&#xff0c;让我们顶峰相见&#xff01;&#…

Qt信号与槽机制的本质

引入 对象与对象之间的通信有多个方式&#xff0c;如果我们要提供一种对象之间的通信机制。这种机制&#xff0c;要能够给两个不同对象中的函数建立映射关系&#xff0c;前者被调用时后者也能被自动调用。 再深入一些&#xff0c;两个对象如果都互相不知道对方的存在&#xff…