TypeScript 如何支持函数中的可选参数

在 JavaScript 中，每个函数的参数都是可选的，这意味着你可以调用函数并且不传递任何参数。然而，你需要在函数内部进行条件检查来处理缺少的参数。TypeScript 引入了可选参数的概念，使得代码更加清晰和类型安全。

可选参数语法

在 TypeScript 中，你可以通过在参数名后面加上问号 ? 来表示一个可选参数。这样定义的参数可以不传递任何值，或者使用 undefined 来代替。

以下是一个示例：

function greet(name?: string) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log('Hello, stranger!');
  }
}

greet(); // 输出: Hello, stranger!
greet('John'); // 输出: Hello, John!

在上面的例子中，name 参数是可选的。如果调用 greet() 时不传递任何参数，它将输出 "Hello, stranger!"。如果传递了参数，它将输出 "Hello, {name}!"。

可选参数位置

在 TypeScript 中，可选参数必须位于必选参数的后面。也就是说，如果一个函数拥有多个参数，并且其中一个参数是可选的，那么这个可选参数必须位于参数列表的最后面。

以下是一个示例：

function showInfo(name: string, age?: number) {
  if (age) {
    console.log(`${name} is ${age} years old.`);
  } else {
    console.log(`${name} is ageless.`);
  }
}

showInfo('Alice'); // 输出: Alice is ageless.
showInfo('Bob', 30); // 输出: Bob is 30 years old.

在上面的例子中，showInfo 函数有两个参数，name 是必选参数，age 是可选参数。age 参数必须在 name 参数后面，这样才能正确地匹配函数的定义。

默认参数值

除了可选参数，TypeScript 还支持给参数设置默认值。如果一个参数被定义了默认值，那么可以不传递该参数的值，函数将使用默认值。

以下是一个示例：

function greetWithMessage(name: string, message: string = 'Hello') {
  console.log(`${message}, ${name}!`);
}

greetWithMessage('Alice'); // 输出: Hello, Alice!
greetWithMessage('Bob', 'Hi'); // 输出: Hi, Bob!

在上面的例子中，message 参数拥有一个默认值 'Hello'。如果调用 greetWithMessage 函数时不传递 message 参数的值，它将使用默认值 'Hello'。如果传递了 message 参数，它将使用传递的值。

总结

通过可选参数，TypeScript 可以让函数的参数更加灵活和易于使用。可选参数可以在不传递值的情况下使用默认值或忽略参数的存在。这使得代码更加可读，并且可以提前检测和处理缺少的参数。