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;



相关文章
|
8月前
|
JavaScript
TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
|
1月前
|
JavaScript
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
85 1
|
8月前
|
JavaScript 索引
TypeScript-索引访问操作符
TypeScript-索引访问操作符
31 1
|
8月前
|
JavaScript 前端开发
TypeScript 运算符
TypeScript 运算符
22 0
|
8月前
|
JavaScript 前端开发
开心档之TypeScript 运算符
开心档之TypeScript 运算符
27 0
|
8月前
|
JSON JavaScript 网络架构
关于 TypeScript 展开运算符在 Angular 应用开发中的应用一例
关于 TypeScript 展开运算符在 Angular 应用开发中的应用一例
|
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 ```
|
JavaScript
TypeScript Non-null Assertion Operator 非空断言操作符 - 感叹号
TypeScript Non-null Assertion Operator 非空断言操作符 - 感叹号
200 0
TypeScript Non-null Assertion Operator 非空断言操作符 - 感叹号
|
JavaScript
TypeScript里的类型合并操作符&
TypeScript里的类型合并操作符&
439 0
TypeScript里的类型合并操作符&