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.