【TS语法学习】ts中的断言运算符

在 TypeScript 中,断言运算符(Assertion Opera在这里插入代码片tors)允许开发者明确地告诉编译器某个值的类型,即使编译器无法自动推断出该类型。

一、Angle-bracket syntax(尖括号语法)

typescript 复制代码
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

二、As syntax(as 语法)

typescript 复制代码
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

三、可选链运算符(?)

可选链运算符是一个问号(?),用于连接对象的属性或方法访问。它的主要作用是,如果对象为空(null 或 undefined),则不会引发错误,而是返回 undefined。

假设我们有一个对象结构如下:

typescript 复制代码
let user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

let street = user.address.street;//进行访问

但是,如果 user 或 user.address 为 null 或 undefined,这会导致运行时错误。为了避免这种情况,我们可以使用可选链运算符:

typescript 复制代码
let street = user?.address?.street;

如果 user 或 user.address 为 null 或 undefined,street 将被赋值为 undefined,而不会抛出错误。

四、空值合并运算符(??)

基本语法

typescript 复制代码
//let result = value ?? defaultValue;

let userInput: string | null = null;
let username = userInput ?? "Guest";

console.log(username); // 输出: "Guest"

使用场景:

1.提供默认值

2.处理函数参数的默认值

3.与可选链运算符结合使用避免空值错误

??与||的区别:

逻辑或运算符(||)在左侧操作数为 falsy 值时(例如 null、undefined、0、""、false、NaN)返回右侧操作数

空值合并运算符仅在左侧操作数为 null 或 undefined 时返回右侧操作数,而不会将其他 falsy 值(如 0 或 "")视为无效

运算符优先级:

空值合并运算符的优先级较低,因此在复杂表达式中可能需要使用括号来明确优先级:

typescript 复制代码
let a = null;
let b = 0;
let c = 100;

let result = a ?? b + c; // 等同于 a ?? (b + c)
console.log(result); // 输出: 100

let result2 = (a ?? b) + c;
console.log(result2); // 输出: 100

空值合并运算符不能直接与逻辑运算符(如 && 或 ||)一起使用。如果需要混用,必须使用括号明确表达式的优先级:

typescript 复制代码
let a = null;
let b = 0;
let c = 100;

let result = a ?? b || c; // 错误:解析顺序不明确
let result2 = (a ?? b) || c; // 正确
console.log(result2); // 输出: 0

五、非空断言(!)

在 TypeScript 中,非空断言(Non-null Assertion Operator)是一种编译时的类型断言工具,用于告诉编译器某个值一定不是 null 或 undefined。非空断言使用叹号(!)表示,通常用于简化类型检查和提高代码的可读性。
基本语法

typescript 复制代码
//let result = value!;

function getLength(str?: string | null): number {
  return str!.length; // 使用非空断言
}

value! 表示 value 绝对不是 null 或 undefined。

如果 value 在运行时是 null 或 undefined,程序会抛出运行时错误。

非空断言与类型断言的区别:

类型断言是告诉 TypeScript 编译器,某个值应被视为特定类型

typescript 复制代码
let value: any = "Hello, TypeScript!";
let length: number = (value as string).length;

非空断言是告诉 TypeScript 编译器,某个值一定不是 null 或 undefined

typescript 复制代码
let value: string | null = "Hello";
console.log(value!.length);

非空断言的最佳使用场景:

1.闭包或回调函数中:在闭包或回调函数中,可以确信某个值不会是 null 或 undefined。

2.DOM 操作中:在访问 DOM 元素时,如果确信元素一定存在,可以使用非空断言。

3.明确排除 null 或 undefined 的情况:在代码逻辑中,如果明确知道某个值不会是 null 或 undefined,可以使用非空断言。

相关推荐
在下小孙5 分钟前
初始C#.
开发语言·c#
freexyn11 分钟前
Matlab自学笔记四十五:日期时间型和字符、字符串以及double型的相互转换方法
开发语言·笔记·matlab
黑客老陈38 分钟前
基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件
运维·服务器·前端·javascript·网络·electron·xss
yqcoder44 分钟前
electron 获取本机 ip 地址
前端·javascript·electron
kiiila1 小时前
【Qt 常用控件】按钮类(QPushButton、QRadioButton、QCheckBox)
开发语言·qt
江木1232 小时前
Python Numba多流和共享内存CUDA优化技术学习记录
开发语言·python·学习
唐某霖2 小时前
el-dialog弹窗的@open方法中,第一次引用ref发现undefined问题,第二次后面又正常了
前端·javascript·vue.js
千里马学框架2 小时前
安卓java端service如何在native进程进行访问-跨进程通讯高端知识
android·java·开发语言·安卓framework开发·车机·跨进程·安卓窗口系统
NULL->NEXT2 小时前
Java(面向对象进阶——接口)
android·java·开发语言
cdcdhj2 小时前
nodejs后端ws与http结合共享一个服务器,前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID
服务器·前端·http