山かっこを読む

01 / 05

山かっこは読めれば怖くない

ここまでで、変数にも配列にも関数にもオブジェクトにもクラスにも型を書けるようになった。最後に、他人のコードを読むときに必ず出てくるものをひとつだけ片づけておこう。

Array<string> のような、山かっこの付いた型だよ。初めて見るとぎょっとするけれど、じつは中身はもう知っているものだ。

02 / 05

結論から言うと、これは「文字列を入れる配列」のことだよ。

つまり章1で書いた string[] と、まったく同じ意味。同じものに書き方が2つあるだけだ。

const iro: Array<string> = ["あか", "あお"];console.log(iro);

実行結果

["あか", "あお"]

03 / 05

関数がかっこの中に値を受け取るように、型も山かっこの中に型を受け取ることがある。

Array は「配列という型を作る道具」だと思ってほしい。そこに number を渡せば数値の配列ができあがる。渡すものを変えれば、別の配列の型になるんだ。

const tensuu: Array<number> = [80, 65, 92];console.log(tensuu.length);

実行結果

04 / 05

Array<number> と書いた配列には、数値しか入れられない。文字列をまぜようとすると、これまでと同じように止めてくれるよ。

山かっこは見た目が変わっただけで、はたらきは章1で書いた配列の型と何も変わらない。

const nedan: Array<number> = [120, "80"];

実行結果

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

05 / 05

同じ意味なので、書きたいほうで書いていい。ふだんは短いほうがよく使われるけれど、山かっこのほうを見かけることもある。

大事なのはどちらも読めることだよ。ここから山かっこの付いた型を自分で書いて、目を慣らしていこう。

const a: Array<string> = ["ゆい"];const b: string[] = a;console.log(b);

実行結果

["ゆい"]