TypeScript中常见的操作符运算符总结

简介: TypeScript中常见的操作符运算符总结

一、非空断言操作符(!)

当我们⽆法断定类型时,可以使用后缀表达式操作符 来断⾔操作对象是⾮ null 或⾮ undefined 类型。

具体来说,比如表达式: x ! , 结果将从 x 值域中排除 null 和 undefined。


(1)、赋值时忽略 null 和 undefined

function test(name: string | undefined | null) {
  // Type 'string | null | undefined' is not assignable to type 'string'.
  // Type 'undefined' is not assignable to type 'string'. 
  const onlyStringName: string = name;   // error
  const ignoreUndefinedAndNullName: string = name!; // Ok
}


(2)、函数调用时忽略 null 和 undefined

type CallBackString = () => string;
function test(call: CallBackString |null| undefined) {
  // Object is possibly 'undefined'.
  // Cannot invoke an object which is possibly 'undefined'.
  const onlyStringName = call(); // Error
  const ignoreUndefinedAndNullName = call!(); //OK
}


二、可选链操作符(?.)

?. 操作符功能和 . 链式操作符相似,区别在于,在引用为空 (null 或者 undefined) 的情况下不会引起错误,如果给定值不存在,则直接返回 undefined


例如:

const obj = {
  project: {
    dir: {
      file: "name",
    },
  },
};
const file = obj?.project?.dir?.file; // name
const test = obj?.other?.dir; // undefined


三、空值合并运算符(??)与 逻辑或运算符( || )

当左侧操作数为nullundefined ,返回右侧的操作数,否则返回左侧的操作数。

空值合并运算符与逻辑或 || 运算符不同,逻辑或会在左操作数为false 值时返回右侧操作数。


例如:

const file = null ?? 'dir'; // dir
const num = 0 ?? 20;        // 0
const num1 = 0 || 20;       // 20


四、可选属性运算符(?:)

使⽤ interface 关键字可以声明⼀个接⼝:

interface Student {
    name: string;
    age: number;
    gender:number;
}


此时定义接口,若是缺少参数将会报错:

let student: Student = {
    name: "name1"
    age:12
}; //Error 


此时使用可选属性,再定义就OK:

interface Student {
    name: string;
    age: number;
    gender?:number;
}
let student: Student = {
    name: "name1"
    age:12
}; //ok 


五、运算符(&)

通过 & 运算符可以将多种类型叠加到⼀起合并为⼀个类型。

如下:

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


六、运算符(|)

TypeScript 中,联合类型表示取值可以为多种类型中的⼀种,联合类型通常与 null 或 undefined ⼀起使⽤。

运算符(|)常用在声明联合类型时,分隔每个类型。

const fun = (info:string | null | undefined) => {}


七、数字分隔符(_)

可以通过下划线作为分隔符来分组数字。

const number1 = 1234_5678
// 等价
const number2 = 12345678;



相关文章
|
6月前
|
JavaScript
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
136 1
|
JavaScript 索引
TypeScript-索引访问操作符
TypeScript-索引访问操作符
62 1
|
JavaScript 前端开发
TypeScript 运算符
TypeScript 运算符
33 0
|
JavaScript 前端开发
开心档之TypeScript 运算符
开心档之TypeScript 运算符
34 0
|
JavaScript 前端开发
TypeScript 运算符
TypeScript 运算符
|
JavaScript 前端开发 安全
TypeScript 4.9 beta 发布:鸽置的 ES 装饰器、satisfies 操作符、类型收窄增强、单文件级别配置等
TypeScript 已于 2022.09.23 发布 4.9 beta 版本,你可以在 [4.9 Iteration Plan](https://github.com/microsoft/TypeScript/issues/50457) 查看所有被包含的 Issue 与 PR。如果想要抢先体验新特性,执行: ```bash $ npm install typescript@beta ```
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
27天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
44 0
|
27天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
44 0