TypeScript - 默认参数

---

---

默认参数

在 TypeScript 中，我们可以为函数参数赋予默认值。这些参数可以显式地传递值，被称为默认参数。

当函数调用时缺少参数或参数值为 undefined 时，函数将使用这些默认初始化值。

语法

TypeScript 默认参数的语法如下：

function functionName(param1[:type], param2[:type] = defaultValue)

这里函数 functionName() 接受两个参数 - param1 和 param2。第一个参数 param1 是必需参数，而第二个参数 param2 是默认参数。param2 初始化为默认值 defaultValue。当 functionName() 函数调用时未传递 param2 的值时，defaultValue 将用作 param2 的值。

让我们通过一些 TypeScript 示例程序来了解函数默认参数。

示例：简单的默认参数

让我们看下面的例子：

function greet(name: string, age: number = 30){
console.log(`Hi ${name}, your age is ${age}.`)
}
greet('John', 50);
greet('John');

在上面的例子中，参数 age 是一个默认参数，初始化值为 30。参数 name 是必需参数。

编译后，它将生成以下 JavaScript 代码。（此处应插入生成的JavaScript代码）

function greet(name, age = 30) {
    console.log(`Hi ${name}, your age is ${age}.`);
}
greet('John', 50);
greet('John');

输出 （此处应插入输出结果）

Hi John, your age is 50.
Hi John, your age is 30.

示例：必需参数后的默认参数

默认参数应该在函数定义中位于必需参数之后

在下面的例子中，我们将默认参数 y 放置在必需参数 x 之后。（此处应插入代码）

function sum(x: number, y: number=10): number{
    return x + y;
}
console.log(sum (20,30));
console.log(sum (30));

编译后，它将生成以下 JavaScript 代码。（此处应插入生成的JavaScript代码）

function sum(x, y = 10) {
    return x + y;
}
console.log(sum(20, 30));
console.log(sum(30));

输出结果如下：（此处应插入输出结果）

50
40

示例：必需参数前的默认参数

但是，如果将默认参数放在必需参数之前，并且在不为默认参数传递值的情况下调用函数，则会显示错误。让我们看下面的例子：（此处应插入代码）

function sum(x: number=10, y:number):number{
    return x + y;
}
console.log(sum(20,30)); // 50
console.log(sum(30)); // NaN

上面的 TypeScript 程序将显示以下错误：（此处应插入错误信息）

Expected 2 arguments, but got 1.

并产生以下输出：（此处应插入输出结果）

50
NaN

示例：将函数作为默认参数的值传递

在下面的例子中，我们将参数 b 初始化为 getNum() 函数作为默认值。getNum() 函数返回数字 10。当第二个参数缺失时，getNum() 函数返回的值将用作函数内部参数的值。（此处应插入代码）

function getNum(): number {
    return 10;
}
function mul(a: number, b = getNum()) {
    return a * b;
}
console.log(mul(20, 5));
console.log(mul(20))

输出 （此处应插入输出结果）

100
200

可选参数与默认参数

我们可以不传递默认参数的值来调用函数。我们也可以不传递可选参数的值来调用函数。

示例：默认参数

在下面的例子中，age 参数的默认值为 30。这意味着如果您不为 age 参数传递值，则函数将对 age 使用默认值 30。（此处应插入代码）

function greet(name: string, age: number = 30){
console.log(`Hi ${name}, your age is ${age}.`);
}
greet('John', 50);
greet('John');

编译后，它将生成以下 JavaScript 代码。（此处应插入生成的JavaScript代码）

function greet(name, age = 30) {
    console.log(`Hi ${name}, your age is ${age}.`);
}
greet('John', 50);
greet('John');

上述示例代码的输出如下：（此处应插入输出结果）

Hi John, your age is 50.
Hi John, your age is 30.

示例：可选参数

在下面的例子中，age 参数是可选的。这意味着您可以不为 age 参数传递值来调用 greet 函数。当不传递 age 参数的值时。（此处应插入代码）

function greet(name: string, age?:number){
    if (age) {
        console.log(`Hello ${name}, you are ${age} years old`);
    }
    else{
        console.log(`Hello ${name}`);
    }
}
greet ('Shahid', 35);
greet ('Shahid');

编译后，它将生成以下 JavaScript 代码。（此处应插入生成的JavaScript代码）

function greet(name, age) {
    if (age) {
        console.log(`Hello ${name}, you are ${age} years old`);
    }
    else {
        console.log(`Hello ${name}`);
    }
}
greet('Shahid', 35);
greet('Shahid');

上述代码的输出如下：（此处应插入输出结果）

Hello Shahid, you are 35 years old
Hello Shahid

我们不能同时声明一个参数为可选和默认。

function greet(name: string, age?: number = 30){
console.log(`Hi ${name}, your age is ${age}.`);
}

上面的程序将显示以下错误：（此处应插入错误信息）

Parameter cannot have question mark and initializer.