TS學習筆記（四）

飞向火星發表於2024-10-30
筆記

1. 型別縮小(聯合型別)

對變數進行型別縮小，除了使用as斷言外，還可以使用if else（switch也行）。如下

function printId(
  id:number|string
) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

型別縮小是TS處理聯合型別的標準方法（說明處理聯合型別時，經常需要型別縮小），凡是遇到可能為多種型別的場合，都需要先縮小型別，再進行處理。

2.交叉型別

指的是多個型別組成一個新型別，&。其實就是邏輯並且的意思，都要包含才行。

let x:number&string;

上面事例中，變數x同時是數值和字串，這當然是不可能的，所以ts會認為x的型別實際上是never。

3.typeof運算子
js裡面，typeof 運算子只可能返回八種結果，而且都是字串。
而ts裡面，它的運算元依然是一個值，但是返回的不是字串，而是該值的型別。
它們兩個的一個重要區別是，編譯後，前者會保留，後者會被全部刪除。(type型別別名也是一樣，會被全部刪除)
4. 陣列
ts的陣列有一個根本特徵：所有成員的型別必須相同。
陣列型別宣告後，成員數量是不限制的，任意輸了的成員都可以，也可以是空陣列。
5. 元組
元組是ts特有的資料型別。它表示成員型別可以自由設定的陣列。
由於成員型別可以不一樣，所以元組必須明確宣告每個成員的型別。
const s:[string, string, boolean] = ['a', 'b', true];

元組型別的寫法與陣列有一個重大差異。陣列的成員型別寫在方括號外賣（number[]），元組的型別寫在方括號裡面（[number]）

由於需要宣告每個成員的型別，所以大多數情況下，元組的成員數量是有限的，從型別宣告就可以明確知道，元組包含多少個成員，越界的成員會報錯。

只讀元組是元組的父型別
6.symbol
Symbol值不存在字面量，
7. 函式型別
函式的實際引數個數，可以少於型別指定的引數個數，但是不能多於，即ts允許省略引數。
let myFunc:(a:number,b:number) => number;

myFunc = (a:number) => a;  // 正確

myFunc = (a:number,b:number,c:number)=> a+b+c // 報錯

這是因為js函式在宣告時往往有多餘的引數，實際使用可以只傳入一部分引數。比如,forEach的引數是一個函式，預設有三個引數（item,index,array）=>void，實際往往只使用第一個引數。因此，ts允許傳入的引數不足。

函式的型別宣告還有一種物件的寫法。這種寫法非常適合一種場景：函式本身存在物件,如下。

let foo:{
    (x:number):void;
    version:string
}

function f(x:number) {
  console.log(x);
}

f.version = '1.0';

8.Function型別

任何函式都屬於這個型別，Function型別的函式可以接收任意數量的引數，每個引數的型別都是any，返回值的型別也是any，代表沒有任何約束。牛逼！以後不知道函式的型別怎麼宣告，就用它。

9.可選引數
如果函式的某個引數可以省略，則在引數名後面加問號表示。
引數名帶有問號，表示該引數的型別實際上是原始型別 | undefined，
function f(x?:number){
    return x  
}
f()   // 正確
f(undefined)  // 正確

上面示例中，引數x是可選的，等同於說x可以賦值為undefined。

但是反過來就不成立，型別顯示設為undefined的引數，就不能省略。

function f(x:number|undefined) {
  return x;
}

f() // 報錯

函式的可選引數只能在引數列表的尾部，跟在必選引數的後面，放在必選引數前面會報錯。

10. 函式引數預設值

設有預設值的引數，如果傳入undefined，也會觸發預設值

function f(x = 456) {
  return x;
}

f(undefined) // 456

11. void型別

void型別可以返回undefined或null，返回其他值會報錯。

js規定，如果函式沒有返回值，就等同於返回undefined。

相關文章