【TypeScript】関数の引数にデフォルト値をセット＋引数の省略可能を設定する方法ご紹介。

TypeScript

2021.12.13

今回の記事はTypeScriptで関数を使用する際に、引数にデフォルト値をセット＋引数の省略可能を設定する方法に関してご紹介する記事です。他言語と少し違う点がありつまづいたので、初心者の方など是非参考にしてみて下さい。

TypeScriptで関数を使う方法

TypeScriptで関数を使用する方法は簡単です。通常のfunctionとして記載するか、アロー関数形式で記載するかのどちらかになります。今回はfunctionの形で書いていきます。

function sample(x: number, y: number): number{
  return x * y
}

上記の関数を使用する場合は下記のように使います。

console.log(Sample(2,5));
//出力
//10

ではこの関数にデフォルト値を設定する方法をご紹介します。

TypeScriptの場合デフォルト値は下記のように書けます。

function sample(x: number=5, y: number): number{
  return x * y
}

ここで注意する点が実はこのデフォルト値を設定することで、省略可能にもできているという点です。

先ほどの章で説明した通りです。

function sample(x: number=5, y: number): number{
  return x * y
}

厳格な型定義を必要としている言語ですのでデフォルトで値が設定されている場合、型が指定されている分使い勝手が良いのです。

デフォルト値をセットせずに引数を省略可能にするとTypeScriptの悪い点が出ます。

function sample(x: number?, y: number): number{
  return x * y
}

上記はエラーになります。理由として、xが未入力の場合nullになるからです。

これを防ぐためにoptionl型を定義するなどの方法もありますが、簡単な方法は下記です。

function sample(x: number?, y: number): number{
  if (x===undefine) {
     x = 1
  }
  return x * y
}

これでxの方がundefine型の場合1を入力して関数を実行します。要はデフォルト値と同じ考えです。

では今回の記事は以上です。他にもTypeScript関連の記事を記載しております。気になる方は是非参考にしてみてください。