省略できる引数

01 / 05

引数は足りないと怒られる

章1で作った関数は、引数を渡さずに呼ぶとエラーになる。TypeScript は引数の数まで見ているんだ。

「1 個の引数が必要ですが、0 個指定されました。」というのがそれだよ。

function yobu(namae: string): void {  console.log(namae + "さん");}yobu();

実行結果

型のエラー: 1 個の引数が必要ですが、0 個指定されました。

02 / 05

引数の名前のうしろに ? を付けると、「渡さなくてもいい引数」になる。渡さずに呼んでもエラーにならないよ。

そのかわり、省略して呼ぶと中には undefined が入っている。下の2回めの呼び出しを見てみよう。

function yobu(namae?: string): void {  console.log(namae);}yobu("ゆい");yobu();

実行結果

ゆい
undefined

03 / 05

? を付けた引数の型は、中では「その型 または undefined」になる。だから、そのまま計算に使おうとすると止められる。

「'b' は 'undefined' の可能性があります。」は、まさにそれを言っているよ。じゃまをされているのではなく、渡さずに呼ばれたときに壊れる場所を先に見せてくれているんだ。

function tasu(a: number, b?: number): number {  return a + b;}

実行結果

型のエラー: 'b' は 'undefined' の可能性があります。

04 / 05

直し方は章3でやった絞り込みと同じ。undefined かどうかを先に見てあげれば、そのあとは安心して使える。

if を抜けたあとの b は、TypeScript にとってもう number だよ。

function tasu(a: number, b?: number): number {  if (b === undefined) {    return a;  }  return a + b;}console.log(tasu(5));console.log(tasu(5, 3));

実行結果

5
8

05 / 05

もうひとつの手がある。省略されたときの値を = で決めておく書き方だよ。こう書くと中では必ず値が入っているので、undefined を気にしなくていい。

? は書かない。= "さん" を書いた時点で「省略できる」という意味になるからだ。

「省略されたらこれ」と決められるなら、こちらのほうが素直。それじゃあ、両方を書いてみよう。

function yobu(  namae: string,  keishou: string = "さん"): void {  console.log(namae + keishou);}yobu("ゆい");yobu("ゆい", "せんぱい");

実行結果

ゆいさん
ゆいせんぱい