极客教程TypeScript 如何支持函数中的可选参数
可选参数是那些在函数调用期间可以选择是否提供作为参数的参数。当它们未被提供作为参数时，它们的值被设置为undefined。
这与默认参数不同，对于默认参数，我们需要在定义函数时提供默认值。如果未提供其参数的参数，则将使用该默认值。
在JavaScript中，默认情况下，如果不为参数指定参数，则其值将被设置为undefined。
在下面的示例中，logger函数记录提供的参数中的消息的值。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 中并非如此。将上述代码复制粘贴到一个 TypeScript 文件中（使用 .ts 扩展名），然后编译它，或者使用 TypeScript 官方网站上提供的在线 TypeScript 编辑器 TS Playground。在编译代码时，您将会得到以下错误：
我们之前收到上述错误是因为 TypeScript 编译器假设 message 是一个必需的参数。所以，在函数声明中，我们需要明确说明它是一个可选参数。为此，我们在参数名后使用 ? 符号。语法如下所示：
语法：
<parameter-name>? : <parameter-type>
上面示例的正确typescript代码如下：
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代表最后一个）提供参数：
- 必需参数： 它的值必须作为参数提供
- 默认参数： 它的参数可以提供也可以不提供（如果不提供，默认值将被采用）
- 可选参数： 它的参数是可选的（如果不提供参数，则值被视为未定义）
下面是一个示例，展示了在 JavaScript 和 TypeScript 中使用默认和必需参数以及可选参数的添加函数的用法。注意在两种语言中函数声明的差异：
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
Typescript:
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中，每个参数默认都是一个可选参数。而在typescript中，我们需要使用 ? 符号来明确说明一个参数是可选的。