オブジェクトの形を書く

章1では、ひとつの値やひとまとまりの配列に型をつけた。この章で扱うのはオブジェクトだよ。

オブジェクトは、名前つきの値をいくつも持てる入れものだった。人なら名前と年齢、商品なら品名と値段。JavaScript コースで { namae: "ゆい", toshi: 20 } のように書いてきたあれだ。

配列との違いを思い出しておこう。配列は「同じ種類のものが並ぶ」入れもので、中身の型はひとつだった。オブジェクトは「ちがう種類のものが名前つきで集まる」入れものだ。だから型の書き方も変わる。中身ひとつぶんを書けばよかった配列に対して、オブジェクトはプロパティの名前と型を1つずつ並べて書く。

いちばん困るのは、名前を打ちまちがえたときだよ。toshi と書くつもりで tosi と書いてしまう。JavaScript はそれを教えてくれない。読み出すと undefined が返ってきて、計算に混ざって NaN になって、ずっと後ろの行でようやく気づく。型を書いておくと、打ちまちがえたその行で止まってくれる。この章でいちばん強く実感してほしいのはここだ。

そして、オブジェクトの型は同じものを何度も書くことになる。関数の引数にも、戻り値にも、配列の中身にも、同じ形が出てくるからだ。そこで形に名前をつける。書き方は2つあって、type で別名をつける方法と、interface で宣言する方法がある。どちらでもほとんど同じことができるよ。使い分けの目安もこの章で話す。

さらに、現実のデータには「あるときと無いときがある項目」がある。ニックネームを登録している人としていない人、というような。そういうプロパティは ? を付けてオプションにする。逆に、作ったあと変えてほしくない項目には readonly を付ける。どちらも1文字ぶんの手間で、あとから壊れる余地を減らせる。

次がオブジェクトの配列だ。名簿でも商品一覧でも、実際のデータはたいていこの形をしている。Shouhin[] と書けるようになると、for...of で1件ずつ取り出したときにも中身の型が分かっているので、プロパティ名の補完も打ちまちがいの検出もそのまま効く。

章の終わりでは、もう一歩ふみこんだ話を3つする。

ひとつめは、TypeScript が型の合う・合わないをどう決めているか。じつは名前では決めていない。形が同じなら合っているとみなすんだ。だから Hito と名乗っていないただのオブジェクトでも、必要なプロパティがそろっていれば Hito の場所に渡せる。ここが分かると、「なぜこれが通るのか」「なぜこれは通らないのか」が自分で説明できるようになるよ。

ふたつめは、キーの名前があらかじめ決まっていないオブジェクトの書き方。人ごとの点数のように、キーが実行してみないと分からないものがある。そういうときはプロパティ名を並べるかわりに「キーは文字列、値は数値」とまとめて書ける。

みっつめは、readonly の配列。プロパティに readonly を付けたのと同じことを配列にもできる。読むだけの配列だと宣言しておくと、うっかり push してしまう事故がその場で止まるよ。

この章を終えると、「このデータはこういう形をしている」ということをコードに書き残せるようになる。型はデータの設計図だ。ここが書けると、他人が書いた型定義を読んで「このアプリはこういうデータを扱っているんだな」と分かるようになる。