オブジェクトの形を書く
INPUT · スライド
01 / 06
名簿でも商品一覧でも、実際のデータはたいてい「同じ形のオブジェクトが並んだもの」だよ。
書き方は章1の配列と同じで、中身の型のうしろに [] を付けるだけ。Shouhin[] なら「Shouhin の形のものだけが並ぶ配列」という意味になる。
interface Shouhin { namae: string; nedan: number;}const list: Shouhin[] = [ { namae: "りんご", nedan: 120 }, { namae: "みかん", nedan: 80 },];console.log(list.length);実行結果
2
02 / 06
配列をそのまま表示すると、中のオブジェクトも一緒に出るよ。
[ と ] の中に { ... } が並ぶ形だ。中身が多いと1行が長くなるので、確かめたいところだけ取り出して表示するほうが読みやすい。
interface Kudamono { namae: string; kazu: number;}const kago: Kudamono[] = [ { namae: "りんご", kazu: 2 },];console.log(kago);実行結果
[{ namae: "りんご", kazu: 2 }]03 / 06
1件ずつ処理するときは for...of を使う。ここが気持ちいいところだよ。
取り出した s は、書かなくても Shouhin だと分かってもらえる。だから s.namae の打ちまちがえも、その場で見つけてもらえるんだ。
interface Shouhin { namae: string; nedan: number;}const list: Shouhin[] = [ { namae: "ぺん", nedan: 120 }, { namae: "のーと", nedan: 200 },];for (const s of list) { console.log(s.namae);}実行結果
ぺん のーと
04 / 06
取り出した値の型が分かっているので、そのまま計算に使える。
s.nedan は number だと宣言してあるから、+ が足し算になると保証されているよ。もし文字列がまざっていたら、ここでつながってしまうところだ。
interface Shouhin { namae: string; nedan: number;}const list: Shouhin[] = [ { namae: "ぺん", nedan: 120 }, { namae: "のーと", nedan: 200 },];let goukei: number = 0;for (const s of list) { goukei = goukei + s.nedan;}console.log(goukei);実行結果
320
05 / 06
空の配列から始めて push で足していく書き方も、これまでと同じだよ。
足す値の形も見てもらえるので、あとから宣言と違うものが混ざることはない。
interface Todo { yaru: string; sumi: boolean;}const list: Todo[] = [];list.push({ yaru: "そうじ", sumi: false });console.log(list.length);実行結果
1
06 / 06
配列の中に、形の足りないオブジェクトを書くとエラーになる。「1件だけプロパティを書き忘れた」という事故が起きなくなるよ。
ここまでで、データの形をコードに書き残せるようになった。型はデータの設計図だ。ここから書いてみよう。
interface Shouhin { namae: string; nedan: number;}const list: Shouhin[] = [ { namae: "あめ" },];実行結果
型のエラー: プロパティ 'nedan' は型 '{ namae: string; }' にありませんが、型 'Shouhin' では必須です。