TS判斷類型詳解

一、基礎類型判斷

1、基礎類型判斷是TS最基本的功能。TS會在編譯過程中對基礎類型進行檢查，該類型是否符合聲明時的約定。

例如在聲明一個字符串類型時：

const name: string = '張三';

在這個例子中，我們聲明了一個字符串類型的變量name，並將其賦值為”張三”。TS將會在編譯時對其進行檢查，如果我們給它賦值為數字，就會報錯。

2、當我們聲明一個變量時，如果沒有明確給它賦值，那麼TS就會根據基礎類型判斷為undefined類型。例如：

let age: number;
console.log(age); // 輸出undefined

在這個例子中，我們聲明了一個數值類型的變量age，但是沒有明確給它賦值，因此TS會將它判斷為undefined類型。

3、我們可以使用typeof語句來獲取變量的類型。例如：

const name: string = '張三';
console.log(typeof name); // 輸出字符串類型string

在這個例子中，我們使用typeof語句來獲取變量name的類型，獲取結果是字符串類型string。

二、函數參數類型判斷

1、在TS中，我們還可以對函數的參數類型進行判斷。我們需要在函數聲明時對其參數類型進行明確的聲明。例如：

function add(num1: number, num2: number): number {
  return num1 + num2;
}

在這個例子中，我們聲明了一個函數add，它有兩個參數num1和num2，都是數值類型，並且它的返回值也是數值類型。

2、當我們在函數調用時，如果傳入的參數類型與函數聲明時不一致，就會報錯。例如：

function printName(name: string): void {
  console.log(name);
}

printName(123); // 報錯：類型「123」的參數不能賦給類型「string」的參數

在這個例子中，我們聲明了一個函數printName，它的參數name是字符串類型，返回值是undefined類型。但是在調用函數時，我們傳入的參數是數字類型，就會報錯。

3、在函數參數中，我們還可以使用可選參數和默認參數。例如：

function printName(firstName: string, lastName?: string, age: number = 0): void {
  const fullName = lastName ? `${firstName} ${lastName}` : firstName;
  console.log(fullName, age);
}

printName('張', '三', 18);
printName('李', 22); // 輸出：李 0

在這個例子中，我們聲明了一個函數printName，它有三個參數。其中，第二個參數lastName是可選參數，第三個參數age是默認參數，默認為0。當我們調用函數時，如果不傳入lastName，就會輸出firstName和age的值，如果不傳入age，就會輸出firstName和默認的age值0。

三、類型守衛

1、類型守衛是TS中的一種語法，它用於在編程時對變量的類型進行判斷。例如：

function printName(name: string | number): void {
  if (typeof name === 'string') {
    console.log(name.length);
  } else {
    console.log(name.toFixed(2));
  }
}

printName('張三'); // 輸出3
printName(123.456); // 輸出123.46

在這個例子中，我們聲明了一個函數printName，它的參數name可以是字符串類型或數字類型。我們使用if語句對它們進行判斷，並針對不同的類型執行不同的操作。

2、還有另外一種類型守衛語法，它使用TS中的is語法。例如：

interface Car {
  name: string;
  price: number;
}

interface Bike {
  name: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return 'price' in vehicle; 
}

function getPrice(vehicle: Car | Bike): number | undefined {
  if (isCar(vehicle)) {
    return vehicle.price;
  }
}

console.log(getPrice({name: '奔馳', price: 500000})); // 輸出500000

在這個例子中，我們聲明了兩個接口Car和Bike。然後我們定義了一個isCar函數，該函數判斷傳入的參數是否為Car類型，並返回布爾值。然後我們又定義了一個getPrice函數，它的參數類型是Car或Bike，返回值類型是數值類型或undefined。在函數內部，我們使用isCar函數對參數進行類型判斷，如果是Car類型，返回參數的price屬性值。

四、類型斷言

1、類型斷言是TS中一個非常有用的概念。通過類型斷言，我們可以告訴TS編譯器一個變量的類型，即強制將變量類型轉換為我們所期望的類型。例如：

let str: any = 'hello world';
let len = (str).length;

console.log(len); // 輸出11

在這個例子中，我們先聲明了一個any類型的變量str，並賦值為字符串類型。然後我們使用類型斷言來強制將其類型轉為字符串類型。接下來我們又聲明了一個變量len，將str的length屬性賦值給它。

2、我們還可以使用另一種語法來進行類型斷言，即使用as語法。例如：

let str: any = 'hello world';
let len = (str as string).length;

console.log(len); // 輸出11

在這個例子中，我們使用as語法對變量str進行類型斷言，將其轉為字符串類型。然後我們又聲明了一個變量len，將str的length屬性賦值給它。

五、泛型類型判斷

1、泛型是TS中一個非常重要的概念，它可以將類型參數化，從而使得函數或類可以適應不同的數據類型。在泛型函數或類中，TS可以根據傳入的類型參數進行類型判斷。

function identity(arg: T): T {
  return arg;
}

let str = identity('hello world');
let num = identity(123);

console.log(typeof str, typeof num); // 輸出string number

在這個例子中，我們聲明了一個泛型函數identity，它有一個類型參數T，參數類型和返回值類型都是T類型。在函數的返回語句中，我們直接返回arg參數，這裡arg的類型是T，所以返回值的類型也是T。當我們在調用函數時，需要明確給類型參數賦值，例如傳入字符串類型和數字類型，輸出它們的類型。

2、除了函數外，我們還可以在類中使用泛型。例如：

class Container {
  private data: T[] = [];

  add(item: T) {
    this.data.push(item);
  }

  remove(item: T) {
    this.data.splice(this.data.indexOf(item), 1);
  }

  getItems() {
    return this.data;
  }
}

let container = new Container();
container.add('張三');
container.add('李四');
console.log(container.getItems()); // 輸出['張三', '李四']

在這個例子中，我們聲明了一個泛型類Container，它有一個類型參數T，成員變量data是一個T類型的數組。然後我們又聲明了三個方法add、remove和getItems，它們的參數和返回值都是T類型。在調用這個類時，我們需要明確給類型參數賦值，例如傳入字符串類型，調用add方法向數組中添加兩個字符串，然後調用getItems方法獲取數組中的所有元素。