如何在 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 中，介面的工作方式也與型別別名相同，因為它定義了物件或類別的結構。

之後，我們用interface1擴充了interface2。這意味著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() 函數。我們可以觀察到，如果參數類型是boolean，則傳回類型是字串。另外，如果參數類型為字串和數字，則傳回類型分別為數字和布林值。

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 的條件類型。它會取得值並根據值類型傳回類型。如果值的類型是數字，則傳回布林值；對於字串值，它會傳回一個數字，對於布林值，它會傳回字串類型。

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

// 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

由於我們已經對變數使用了條件類型，因此我們可以將其用於函數參數或傳回類型。

使用者在本教程中學習了建立條件類型，使我們能夠根據另一個變數的類型或值選擇特定變數。此外，我們也學習如何使用函數參數和傳回類型的條件類型。

以上是如何在 TypeScript 中建立條件類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！