TypeScript - 可選引數

TypeScript 中的可選引數允許我們在呼叫函式時指定函式引數是否可以提供。

當函式在呼叫時沒有為可選引數提供引數值時，可選引數的預設值為 undefined。因此，在函式體內部，我們需要處理可選引數。

可以透過在函式定義中在其名稱後面新增問號來使引數成為可選引數。

語法

在 TypeScript 中定義帶可選引數的函式的語法如下：

function functionName(para1:type1, para2?:type2): returnType{
   // function body
}

在上述語法中，函式functionName定義了兩個引數：para1 和 para2。第一個引數 para1 是必填引數，第二個引數 para2 是可選引數。

您可以定義一個具有多個可選引數的函式，但可選引數必須是最後一個引數。

JavaScript 預設支援可選引數，因為在 JavaScript 中，即使函式指定了引數，您也可以在不傳遞任何引數的情況下呼叫函式。

示例

讓我們透過一些 TypeScript 中的程式設計示例來了解函式可選引數。

示例：使用可選函式引數

在下面的示例中，函式 sum 接受三個引數：x、y 和 z。前兩個引數 x 和 y 是必填引數，第三個引數 z 是可選引數。

我們首先檢查可選引數是否為真。如果傳遞了，我們返回所有引數的和，否則我們只返回必填引數的和。請看示例。

function sum(x: number, y: number, z?: number): number {
   if (z){
      return x + y + z;
   }
   else{
      return x + y;
   }
}
console.log(sum(2,3));
console.log(sum(2,3,5));

編譯後，上述 TypeScript 程式碼將轉換為以下 JavaScript 程式碼。

function sum(x, y, z) {
    if (z) {
        return x + y + z;
    }
    else {
        return x + y;
    }
}
console.log(sum(2, 3));
console.log(sum(2, 3, 5));

上述示例程式碼的輸出如下：

5
10

請注意，當我們只用兩個引數（不帶可選引數）呼叫 sum 函式時，if 條件變為 false。可選引數（缺少引數）的預設值為 undefined。

示例：可選引數的型別守衛

我們可以使用型別守衛來檢查引數在使用前是否具有有效值。

在下面的示例中，我們使用型別守衛 typeof age === 'number' 來檢查 age 在使用前是否具有值。

function greet(name: string, age?: number): void {
  if (typeof age === 'number') {
    console.log(`You are ${age} years old.`);
  }
}
greet('Shahid', 35);

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

function greet(name, age) {
    if (typeof age === 'number') {
        console.log(`You are ${age} years old.`);
    }
}
greet('Shahid', 35);

上述示例程式碼的輸出如下：

You are 35 years old.

示例：可選引數必須是最後一個引數

可選引數必須放在引數列表中必填引數之後。

function add (x?: number, y: number = 30){
   return x + y;
}
console.log(add(2,3));

在上面的示例中，可選引數放在必填引數之前。TypeScript 編譯器將丟擲以下錯誤：

'x' is possibly 'undefined'.

示例：可選引數不能有預設值

可選引數不能初始化為預設值。在下面的示例中，我們將可選引數 y 初始化為預設值 30。

function add (x: number, y?: number = 30){
   return x + y;
}
console.log(add(2,3));

TypeScript 編譯器將顯示以下錯誤：

Parameter cannot have question mark and initializer.

錯誤表明我們不能將引數同時指定為可選引數和預設引數。

如何處理？預設引數也是可選引數。

示例：可選引數的預設值

預設引數自動成為可選引數。如果函式在呼叫時缺少值，則使用預設值來代替缺少的引數。

function greet(name: string, age: number = 35): void {
  console.log(`Hello, ${name}!`);
  console.log(`You are ${age} years old.`);
}
greet('Shahid');

在上面的示例中，我們定義了函式 greet，它有兩個引數：name 和 age。第二個引數 age 初始化為預設值。引數 age 在這裡充當可選引數。

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

function greet(name, age = 35) {
    console.log(`Hello, ${name}!`);
    console.log(`You are ${age} years old.`);
}
greet('Shahid');

上述示例程式碼的輸出如下：

Hello, Shahid!
You are 35 years old.

列印頁面