関数を型で守る

INPUT · スライド

配列メソッドと型推論

01 / 06

渡す関数の引数は書かなくていい

string[]map をかけると、渡した関数が受け取るのは文字列だとTypeScript のほうが先に知っている。だから (k) に型を書かなくていいんだ。

この働きを型推論(型を推し量って決めること)と呼ぶよ。

const kudamono: string[] = ["りんご", "もも"];const nagasa = kudamono.map(  (k) => k.length);console.log(nagasa);

実行結果

[3, 2]

02 / 06

書いてもいいけれど、書かない

もちろん (n: number) => n * 2 と書いてもいい。でも配列の型からもう決まっていることなので、ふだんは書かないほうがすっきりする。

分かりきっているところは書かない。これが型と付き合うコツだよ。

const su: number[] = [1, 2, 3];const bai = su.map((n) => n * 2);console.log(bai);

実行結果

[2, 4, 6]

03 / 06

返ってくる配列の型も決まる

map が返す配列の型は、渡した関数の戻り値から決まる。number[] に「数を文字にする関数」を渡せば、返ってくるのは string[] だよ。

だから const moji: string[] = と書いても通る。決まっている型と合っているからだ。

const su: number[] = [1, 2];const moji: string[] = su.map(  (n) => n + "こ");console.log(moji);

実行結果

["1こ", "2こ"]

04 / 06

合わない型を書けば止まる

決まっている型とちがう型をわざわざ書くと、その行でエラーになる。map が返すのは配列なので、string の変数には入らない。

書かなくても分かってもらえるし、まちがえて書いたら教えてもらえる。どちらでも損はしないよ。

const kudamono: string[] = ["りんご"];const nagasa: string = kudamono.map(  (k) => k.length);

実行結果

型のエラー: 型 'number[]' を型 'string' に割り当てることはできません。

05 / 06

`filter` は中身の型が変わらない

filter は条件に合うものを選ぶだけなので、返ってくる配列の中身の型は元と同じ。渡す関数は boolean を返すよ。

number[]filter すれば、出てくるのも number[] だ。

const su: number[] = [1, 2, 3, 4];const gu = su.filter((n) => n % 2 === 0);console.log(gu);

実行結果

[2, 4]

06 / 06

どこに書いて、どこは任せるか

線引きの目安はひとつ、他人との境目には書く

  • 関数の引数と戻り値は境目だから書く
  • map に渡す関数の引数のように、すぐそばの型から決まるものは書かない

型は「全部書くほど偉い」ものではない。読む人に伝わる分だけ書くのがちょうどいいよ。それじゃあ、書いてみよう。