如何在 TypeScript 中建立條件型別？

---

在 TypeScript 中，我們需要為每個變數和物件定義型別，因為它是一種嚴格的語言，並且包含條件型別。

從“條件型別”這個詞中，我們可以預測我們需要根據特定條件選擇一個變數。是的，你沒聽錯。就像我們使用 if-else 語句根據特定條件執行特定程式碼塊一樣，我們也可以根據特定條件選擇變數的型別。

在本教程中，我們將學習如何在 TypeScript 中建立條件型別。

語法

使用者可以按照以下語法在 TypeScript 中建立條件型別。

first_type extends second_type ? true_type : false_type;

我們在上述語法中使用了三元運算子來建立條件型別。

運算元說明

• First_type - 它是一個型別或變數。

• Second_type - 它是一個型別，例如數字、字串、布林值等。

• True_type - 如果 first_type 包含 second_type，則 true_type 將分配給變數。

• False_type - 如果 first_type 不擴充套件 second_type，則 false_type 將分配給變數。

現在，我們將檢視不同的示例，以瞭解有關 TypeScript 中條件型別的更多資訊。

示例

在下面的示例中，我們定義了兩個介面。在 TypeScript 中，介面的工作方式與類型別名相同，因為它定義了物件或類的結構。

之後，我們將 interface2 擴充套件到 interface1。這意味著 interface2 包含 interface1 的所有屬性。之後，我們使用三元運算子將條件型別分配給 type1 和 type2 別名。

在輸出中，使用者可以檢視 var1 和 var2 變數的型別。

// Creating the first interface
interface interface1 {
   prop1?: string;
   prop2: boolean;
}

// creating the second interface and extending it with the interface1
interface interface2 extends interface1 {
   prop3?: number;
   prop4: boolean;
}

// type of the type1 is number as interface2 extends interface1
type type1 = interface2 extends interface1 ? number : string;
let var1: type1 = 20;

// type of the type2 is string as interface1 doesn't extends the interface2
type type2 = interface1 extends interface2 ? number : string;
let var2: type2 = "Hello";

console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

編譯後，它將生成以下 JavaScript 程式碼 -

var var1 = 20;
var var2 = "Hello";
console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

輸出

以上程式碼將產生以下輸出 -

The type of var1 variable is number
The type of var2 variable is string

我們學習了條件型別的基礎知識以及如何建立它。

為什麼使用條件型別？

我們將學習條件型別在現實開發中為什麼以及如何有用。

讓我們看看下面的程式碼，在其中我們透過根據引數型別更改其返回型別來過載 func1() 函式。我們可以觀察到，如果引數型別是布林值，則返回型別是字串。此外，如果引數型別是字串和數字，則返回型別分別是數字和布林值。

function func1(param1: boolean): string;
function func1(param1: string): number;
function func1(param1: number): boolean;
function func1(param1: any): any {
   // function body of the overloaded function
}

我們可以透過在一行中建立條件型別來過載函式，而不是在函式中編寫多個定義。

示例

在下面的示例中，我們建立了名為 test_type 的條件型別。它接受值並根據值型別返回型別。如果值的型別是數字，則返回布林值；對於字串值，則返回數字，對於布林值，則返回字串型別。

在輸出中，我們可以觀察到變數和 abc 變數的型別，這是我們從 test_type 獲得的。

// creating the conditional type
// it will accept the number, string, and boolean values
type test_type<T extends number | string | boolean> = T extends number
  ? boolean
  : T extends string
  ? number
  : string;
// getting the type of abc variable based on the value from the conditional test_type
let abc: test_type<"hello"> = 20;
console.log("The type of the variable abc is " + typeof abc);

let variable: test_type<typeof abc> = false;
console.log("The type of the variable is " + typeof variable);

編譯後，它將生成以下 JavaScript 程式碼

// getting the type of abc variable based on the value from the conditional test_type
var abc = 20;
console.log("The type of the variable abc is " + typeof abc);
var variable = false;
console.log("The type of the variable is " + typeof variable);

輸出

以上程式碼將產生以下輸出 -

The type of the variable abc is number
The type of the variable is boolean

由於我們已將條件型別用於變數，因此可以將其用於函式引數或返回型別。

在本教程中，使用者學習瞭如何建立條件型別，這使我們能夠根據另一個變數的型別或值選擇特定變數。此外，我們學習瞭如何將條件型別用於函式引數和返回型別。