TS时常忘记的运算符

发布时间 2023-07-01 13:03:37作者: oOLzYOo

1、可选链运算符?.

可选链运算符,对null和undefined及时停止运算,解放es5的繁琐逻辑判断

// ts
const val = a?.b
 
//es5
var val = a === null || a.b

支持的语法如下:

obj?.prop // 尝试访问可能不存在的属性
obj?.[exp] // 同上,计算属性写法
arr?.[index] // 尝试访问可能不存在的索引
func?.[args] // 尝试调用可能不存在的方法

2、 非空断言运算符!

非空断言运算符,用于断言操作的对象是非null和非undefined类型

从值域中排除nullundefined

unction test (params: number | undefined | null, callback: ()=>number | undefined )
{
    const count = params!;// 排除undefined 和null,不报错
    
    const number = callback!() // 除去undefined
} 

3、可选属性 ?:

主要用于类型声明时候对某个属性进行可选标记,这样在实例化时候缺少某个属性就编译器可以不报错

interface Person{
    name : string;
    age : number;
    gender? : string // 可选属性
}

Partial可将属性标记为可选

// Partial的源码实现
type Partial<T>={
    [key in  keyof T]? : T[key]
}

?表示可选,-?表示必选,回顾一下TS中内置泛型Required

type Required<T>={
    [key in keyof T]-? : T[key] 
}

4、空值合并运算符 ??

当左侧操作数为null或者undefined时,返回右侧的操作数,否则返回左侧的操作数,与||不同的是,逻辑或会在左侧操作数为falsy时(如:“”,0)返回右侧操作数,此时如果对空字符串或者0有意义时使用空值合并运算符会省去es5中的很多判断.

const data1 = 0
 
// 如果data1是undefined或者null,data2=100
const data2 = data1 ?? 100
 
// es5实现
const data2 = data1===undefined || data1===null ? 100 : data1

可用于短路,当空值合并运算符的做表达式不是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());
console.log(B() ?? C());

5、交叉类型运算符 &

用于将多种类型叠加到一起成为一个新类型

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

当混入的成员有类型覆盖时,新类型为never

interface X {
  c: string;
  d: string;
}
 
interface Y {
  c: number;
  e: string
}
 
type XY = X & Y;
type YX = Y & X;
 
let p: XY;
let q: YX;
 
// 生成的新类型
type XY={
    c : never;
    d :string;
    e : string
}

6、联合类型运算符 |

表示取值可以是多种类型中的一种,联合类型常与nullundefined一起使用

const sayHello = (name: string | undefined) => { /* ... */ };
 
// 参数可以不填
sayHello("semlinker");
sayHello(undefined);

7、数字分割符 _

不会改变字面量的值,用于逻辑分组便于阅读。

const inhabitantsOfMunich = 1_464_301;
const distanceEarthSunInKm = 149_600_000;
const fileSystemPermission = 0b111_111_000;
const bytes = 0b1111_10101011_11110000_00001101;
 
// 对应的 es5
"use strict";
var inhabitantsOfMunich = 1464301;
var distanceEarthSunInKm = 149600000;
var fileSystemPermission = 504;
var bytes = 262926349;

8、类型断言

在编译时起作用。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

as语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

9、私有字段

私有字段,在class中使用

  • 私有字段必须以#开头
  • 每个私有字段名称都唯一地限定于其包含的类
  • 不能在私有字段上使用Typescript可访问性修饰符,如:public或private
  • 私有字段不能在包含的类之外访问,甚至不能被检测到
valclass Person {
  #name: string;
 
  constructor(name: string) {
    this.#name = name;
  }
 
  greet() {
        console.log(`${this.#name}!`);
  }
}
 
let semlinker = new Person("Semlinker");

10、!!

非内置运算,是连续使用两次“非”运算

var o={flag1:true};  
var test1=!!o.flag1;//等效于var test1=o.flag1||false;  
console.log(test1);//true
var test2=!!o.flag2;//等效于var test2=o.flag2||false;  
console.log(test2);//false 而不是undefined 或 null

由于对null与undefined用 ! 操作符时都会产生true的结果,

所以用两个感叹号的作用就在于,如果设置了o中flag的值(非 null/undefined/0""/等值),自然test就会取跟o.flag一样的值;

如果没有设置,test就会默认为false,而不是 null或undefined。