何が嬉しいかというとコンパイル時にエラーを吐いてくれる、またvscodeなどでインテリセンスが効くようになる。
具体的には以下のような構造を想定
keyとvalueをもつ連想配列。
keyとバリューも連想配列になっている。
上記がさらに配列になっている。
要するに下記のjson
[
{
"key":{"id":"001","day":27},
"value":{"value1":100,"value2":10}
},
{
"key":{"id":"001","day":28},
"value":{"value1":200,"value2":20}
},
]
複数の単純な宣言方法を組み合わせるというアプローチを取る。
単純な配列を型指定して宣言
1 2 3 | let stringArray: Array<string> = ["", "", ""]let stringArray: string[] = ["", "", ""] |
単純な連想配列を型指定して宣言
1 2 | let map: { key1: number; key2: string; } = { key1: 1, key2: "test1" } |
辞書型、ハッシュマップ
使用頻度はスタイルにもよるが結構高い。
1 2 3 4 | let hash: { [key: string]: string; } = {}hash['apple'] = 'りんご'hash['banana'] = 'ばなな'hash['orange'] = 'オレンジ' |
連想配列の値に連想配列が含まれている値を型指定して宣言
このあたりから訳が分からなくなってくるか
1 2 3 4 5 6 7 8 9 10 11 12 13 | let map: { key1: number; key2: { key2_1: number; key2_2: number; }; } = { key1: 1, key2: { key2_1: 21, key2_2: 22, }, } |
サンプルソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | const data: Array<{key: { id: string; year: number; month: number; day: number};value: { purified_mL_min: number, raw_mL_min: number,};}> = [ { "key": { "id": "001", "year": 2017, "month": 4, "day": 27 }, "value":{ "value1": 100, "value2": 10 } }, { "key": { "id": "001", "year": 2017, "month": 4, "day": 28 }, "value": { "value1": 200, "value2": 20 } }, { "key": { "id": "001", "year": 2017, "month": 4, "day": 29 }, "value": { "value1": 300, "value2": 30 } }, { "key": { "id": "001", "year": 2017, "month": 4, "day": 30 }, "value": { "value1": 400, "value2": 40 } }]data.forEach((element) => { console.log(`id:${element.key.id}`) console.log(`year:${element.key.year}`) console.log(`month:${element.key.month}`) console.log(`day:${element.key.day}`) console.log(`value1:${element.value.value1}`) console.log(`value2:${element.value.value2} `)}) |
せっかくTypeScript使うんだし型は明確にしておかないとね
