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.