TypeScript のデフォルトパラメータ

概要: このチュートリアルでは、TypeScript のデフォルトパラメータについて学びます。

TypeScript のデフォルトパラメータ入門

JavaScript は ES2015 (または ES6) 以降、次の構文でデフォルトパラメータをサポートしています。

function name(parameter1=defaultValue1,...) {
   // do something
}Code language: JavaScript (javascript)

この構文では、関数を呼び出すときに引数を渡さないか、undefined を渡すと、関数は省略されたパラメータにデフォルトで初期化された値を使用します。例:

function applyDiscount(price, discount = 0.05) {
    return price * (1 - discount);
}

console.log(applyDiscount(100)); // 95Code language: JavaScript (javascript)

この例では、applyDiscount() 関数は discount パラメータをデフォルトパラメータとして持っています。

discount 引数を applyDiscount() 関数に渡さないと、関数はデフォルト値である 0.05 を使用します。

JavaScript と同様に、TypeScript でも同じ構文でデフォルトパラメータを使用できます。

function name(parameter1:type=defaultvalue1, parameter2:type=defaultvalue2,...) {
   //
}Code language: JavaScript (javascript)

次の例では、applyDiscount() 関数にデフォルトパラメータを使用しています。

function applyDiscount(price: number, discount: number = 0.05): number {
    return price * (1 - discount);
}

console.log(applyDiscount(100)); // 95Code language: JavaScript (javascript)

関数型定義にデフォルトパラメータを含めることはできないことに注意してください。次のコードはエラーになります。

let promotion: (price: number, discount: number = 0.05) => number;Code language: JavaScript (javascript)

エラー

error TS2371: A parameter initializer is only allowed in a function or constructor implementation.Code language: JavaScript (javascript)

デフォルトパラメータとオプションパラメータ

オプションパラメータと同様に、デフォルトパラメータもオプションです。つまり、関数を呼び出すときにデフォルトパラメータを省略できます。

さらに、デフォルトパラメータと末尾のデフォルトパラメータは両方とも同じ型を共有します。たとえば、次の関数

function applyDiscount(price: number, discount: number = 0.05): number {
  // ...
}Code language: JavaScript (javascript)

と

function applyDiscount(price: number, discount?: number): number {
  // ...
}Code language: JavaScript (javascript)

は同じ型を共有します。

(price: number, discount?: number) => numberCode language: PHP (php)

オプションパラメータは、必須パラメータの後に来る必要があります。ただし、デフォルトパラメータは、必須パラメータの後に表示する必要はありません。

デフォルトパラメータが必須パラメータの前に表示される場合は、デフォルトで初期化された値を取得するために、undefined を明示的に渡す必要があります。

次の関数は、指定された月と年の日数を返します。

function getDay(year: number = new Date().getFullYear(), month: number): number {
    let day = 0;
    switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            day = 31;
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            day = 30;
            break;
        case 2:
            // leap year
            if (((year % 4 == 0) &&
                !(year % 100 == 0))
                || (year % 400 == 0))
                day = 29;
            else
                day = 28;
            break;
        default:
            throw Error('Invalid month');
    }
    return day;
}Code language: JavaScript (javascript)

この例では、引数を渡さないか、undefined 値を渡すと、年のデフォルト値は現在の年になります。

次の例では、getDay() 関数を使用して、2019年2月の日数を取得します。

let day = getDay(2019, 2);
console.log(day); // 28Code language: JavaScript (javascript)

現在の年2月の日数を取得するには、次のように year パラメータに undefined を渡す必要があります。

let day = getDay(undefined, 2);
console.log(day);Code language: JavaScript (javascript)

まとめ

パラメータにデフォルトで初期化された値を設定する場合は、デフォルトパラメータ構文 parameter:=defaultValue を使用します。
デフォルトパラメータはオプションです。
パラメータのデフォルトで初期化された値を使用するには、関数を呼び出すときに引数を省略するか、undefined を関数に渡します。

このチュートリアルは役に立ちましたか？