アロー関数に型をつける

01 / 05

アロー関数にも同じように型を書く

JavaScript コースで書いた => の形を思い出そう。const 名前 = () => { }; というあれだ。

型を足す場所は、変数や function のときと変わらない。引数の名前のうしろに : と型。それだけだよ。

const yobu = (namae: string) => {  console.log(namae + "さん");};yobu("ゆい");

実行結果

ゆいさん

02 / 05

返す値の型を書く場所も function と同じ。引数のかっこを閉じたすぐうしろに : と型を書く。

ちがうのは、そのあとに => が続くところだけだ。(引数): 戻り値 => { } の順だよ。

const bai = (n: number): number => {  return n * 2;};console.log(bai(21));

実行結果

03 / 05

{ } の中が return の1行だけのときは、{ } と return を省いて、=> の右に式をそのまま書ける。

意味は上とまったく同じ。実際のコードではこの短い形をよく見かけるよ。

const bai = (n: number): number =>  n * 2;console.log(bai(4));

実行結果

04 / 05

形を短くしても、型のチェックはそのまま働く。number を受け取ると書いた関数に文字列を渡せば、呼んだその行で止まってくれるよ。

短く書くことと、守ってもらうことは両立する。

const bai = (n: number): number =>  n * 2;console.log(bai("3"));

実行結果

型のエラー: 型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。

05 / 05

受け取るものが無いときは () のまま。そのうしろに戻り値の型を書く。表示するだけなら void だよ。

覚えることは1つだけ。型を書く場所は function と同じ。それじゃあ、書いてみよう。

const shirase = (): void => {  console.log("じゅんび完了");};shirase();

実行結果

じゅんび完了