總結TS中常用的運算子

阿新 • • 發佈：2022-04-03

最近在使用ts開發專案，開發中經常有想用某個操作符但是因掌握不熟不知道該用哪個，本文就整理了使用ts在日常開發中常用的運算子和操作符，理解記憶之餘便於溫故知新

一、 `？.`

可選鏈運算子，對null和undefined可及時停止運算，可解放es5繁瑣的判斷邏輯，如:

// ts
const val = a?.b

//es5
var val = a === null || a.b
複製程式碼

支援的語法如下：

obj?.prop // 嘗試訪問可能不存在的屬性
obj?.[exp] // 同上，計算屬性寫法
arr?.[index] // 嘗試訪問可能不存在的索引
func?.[args] // 嘗試呼叫可能不存在的方法
複製程式碼

二、`!`

非空斷言運算子，用於斷言操作的物件是非null和非undefined型別

從值域中排除null和undefined

function test (params: number | undefined | null, callback: ()=>number | undefined )
{
    const count = params!;// 排除undefined 和null，不報錯
    
    const number = callback!() // 除去undefined
}
複製程式碼

三、 `?:`

可選屬性，主要用於型別宣告時候對某個屬性進行可選標記，這樣在例項化時候缺少某個屬性就編譯器可以不報錯

interface Person{
    name : string;
    age : number;
    gender? : string // 可選屬性
}
複製程式碼

上一篇文章梳理過TS中常見的內建泛型，其中Partial可將屬性標記為可選，再來回顧一下

// Partial的原始碼實現
type Partial<T>={
    [key in  keyof T]? : T[key]
}
複製程式碼

?表示可選，那麼-?顧名思義表示必選，尤其回顧一下TS中內建泛型Required

type Required<T>={
    [key in keyof T]-? : T[key] 
}
複製程式碼

四、`??`

空值合併運算子，當左側運算元為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());
複製程式碼

五、`&`

交叉型別運算子，用於將多種型別疊加到一起成為一個新型別

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
}
複製程式碼

六、`|`

聯合型別運算子，表示取值可以是多種型別中的一種，聯合型別常與null或undefined一起使用

const sayHello = (name: string | undefined) => { /* ... */ };

// 引數可以不填
sayHello("semlinker");
sayHello(undefined);
複製程式碼

七、`_`

數字分割符，不會改變字面量的值，用於邏輯分組便於閱讀。

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;
複製程式碼

八、`<Type>`

型別斷言，在編譯時起作用。

“尖括號”用法

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;
複製程式碼

九、`#`

私有欄位，在class中使用

私有欄位必須以#開頭
每個私有欄位名稱都唯一地限定於其包含的類
不能在私有欄位上使用Typescript可訪問性修飾符，如：public或private
私有欄位不能在包含的類之外訪問，甚至不能被檢測到

class Person {
  #name: string;

  constructor(name: string) {
    this.#name = name;
  }

  greet() {
        console.log(`${this.#name}!`);
  }
}

let semlinker = new Person("Semlinker");
複製程式碼