キーの名前が決まっていないとき

01 / 06

プロパティ名を並べて書けないとき

ここまでのオブジェクトの型は、namae や toshi のようにプロパティの名前をあらかじめ並べて書いてきた。人や商品のように、持ちものが決まっているデータならこれでいい。

でも「人ごとの点数」のようなデータはどうだろう。キーになるのは人の名前で、何がキーになるかは動かしてみるまで分からない。1つずつ並べては書けないよ。

02 / 06

キーのところに `[key: string]`

そういうときは、プロパティ名を書く場所に [key: string] と書く。「キーは何かしらの文字列、値はぜんぶ number」という意味だよ。

key のところは好きな名前でいい。読む人に「ここに入るのはキーだよ」と伝えるための名前だ。

type Tensuu = {  [key: string]: number;};const ten: Tensuu = {  yui: 80,  rin: 70,};console.log(ten.yui);

実行結果

03 / 06

キーが変数のときは `[]` で取り出す

ten.yui のように . でも取り出せるけれど、キーが変数に入っているときは . では書けない。かわりに [] の中に変数を入れるよ。

ten[k] は「k に入っている文字列をキーにした値」という意味だ。キーが決まっていないデータを扱うなら、こちらが主役になる。

type Tensuu = {  [key: string]: number;};const ten: Tensuu = { yui: 80 };const k: string = "yui";console.log(ten[k]);

実行結果

04 / 06

`Object.keys` で全部回す

入っているキーを全部知りたいときは Object.keys を使う。オブジェクトを渡すと、キーを並べた配列が返ってくるよ。あとは覚えたての for...of で1件ずつ回すだけだ。

オブジェクトを回す書き方はほかにもあるけれど、Object.keys なら「配列を回している」とそのまま読める。こちらを使おう。

type Tensuu = {  [key: string]: number;};const ten: Tensuu = {  yui: 80,  rin: 70,};for (const k of Object.keys(ten)) {  console.log(k + ":" + ten[k]);}

実行結果

yui:80
rin:70

05 / 06

無いキーを読んでも止まらない

ここが落とし穴だよ。インデックス型は「キーは何でもよい」と言っているので、入っていないキーを書いてもエラーにならない。

型のうえでは number のつもりでも、実際に返ってくるのは undefined だ。名前を打ちまちがえてもその場では気づけない。使う前に !== undefined で確かめるくせをつけよう。

type Tensuu = {  [key: string]: number;};const ten: Tensuu = { yui: 80 };console.log(ten["rin"]);

実行結果

undefined

06 / 06

決まっているならプロパティを並べる

便利そうに見えるけれど、使いすぎないことが大事だよ。

キーの名前があらかじめ決まっているなら、namae: string; と1つずつ並べる型のほうがいい。打ちまちがえをその場で見つけてもらえる
キーが動かしてみないと分からないときだけ、インデックス型を使う

書きやすさと引きかえに、名前のチェックを手放しているということを覚えておこう。ここから書いてみよう。