TypeScript 如何支持函数中的可选参数，因为每个参数对于 JavaScript 中的函数都是可选的？

可选参数是那些在函数调用期间可能会或可能不会作为参数提供值的参数。当它们没有作为参数提供时，它们的值设置为undefined 。

它不同于我们在定义函数时需要为其提供默认值的默认参数。如果未提供它的参数，则使用此默认值。

在 javascript 中，默认情况下，如果您不为参数提供参数，则其值将设置为undefined 。

在下面的示例中，记录器函数记录参数中提供的消息的值。 arguments.length是一个内置属性，它返回函数调用中提供的多个参数。

Javascript

function logger(message) {
    console.log("number of arguments passed: ", arguments.length);
    if (message === undefined) {
        console.log("please provide a message to be logged");
    }
    else {
        console.log(message);
    }
    console.log();
}
logger("Welcome to GFG!");
logger();

输出：

number of arguments passed: 1
Welcome to GFG!

number of arguments passed: 0
please provide a message to be logged

在上面的例子中，我们可以看到，当我们没有为message参数提供参数时，它的值变成了undefined 。

但是，打字稿并非如此。要查看将上述代码复制粘贴到 typescript 文件（扩展名为 .ts ）并编译它，或者使用 Typescript 官方网站上提供的 TS Playground 等在线 typescript 编辑器。编译代码会报错，如下图：

错误由 typescript 显示错误使用可选参数。

我们收到了上述错误，因为 typescript 编译器假定message是必需的参数。因此，我们明确需要提及它是函数声明中的可选参数。为此，我们使用?参数名称后的符号。语法如下所示：

句法：

? : 

上述示例的正确打字稿代码如下所示：

Javascript

// Use ? to make a parameter optional
function logger(message?: string) {
    console.log("number of arguments passed: ", arguments.length);
    if (message === undefined) {
        console.log("please provide a message to be logged");
    }
    else {
        console.log(message);
    }
    console.log();
}
logger("Welcome to GFG!");
logger();

输出：

number of arguments passed: 1
Welcome to GFG!

number of arguments passed: 0
please provide a message to be logged

笔记：

在提供可选参数以及默认或必需参数时，请确保遵循以下顺序（其中 1 是第一个，3 是最后一个），其中应提供参数：

1. 必需参数：必须提供其值作为参数
2. 默认参数：可能提供也可能不提供谁的参数（如果不提供，则采用默认值）
3. 可选参数：谁的参数是可选的（如果没有提供参数，值被认为是未定义的）

下面是一个附加函数示例，显示了在 javascript 和 typescript 中使用可选参数以及默认参数和必需参数。请注意两种语言中函数声明的区别：

Javascript：

Javascript

// c is optional argument
function add(a, b = 1, c) {
    console.log("number of arguments provided is: ", arguments.length);
    if (c === undefined) {
        console.log("provide a value for third argument");
    }
    console.log("Result: ", (a + b + c));
    console.log();
}
  
add(1, 3);  // skipping value for optional parameter
add(1, 3, 4); // providing value for optional parameter

输出：

number of arguments provided is: 2
provide a value for third argument
Result: NaN

打字稿：

Javascript

// see the use of ? symbol for optional argument
function add(a: number, b = 1, c?: number) {
  console.log("number of arguments provided is: ", arguments.length);
  
  if(c === undefined){
    console.log("provide a value for third argument");
  }
  console.log("Result: ", (a + b + c));
  console.log();
}
  
add(1, 3);  // Skipping value for optional parameter
add(1,3,4); // Providing value for optional parameter

输出：

number of arguments provided is: 2
provide a value for third argument
Result: NaN

因此，我们看到在 javascript 中，默认情况下每个参数都是可选参数。而在打字稿中，我们明确需要使用?将参数提及为可选参数象征。