typescriptで連想配列の配列を宣言(型指定)したい

JSON.parseなどを利用するとAny型になってしまうので適切に型を宣言する。
何が嬉しいかというとコンパイル時にエラーを吐いてくれる、また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}
 },
]


複数の単純な宣言方法を組み合わせるというアプローチを取る。

単純な配列を型指定して宣言


let stringArray: Array<string> = ["", "", ""]

let stringArray: string[] = ["", "", ""]
でも可


単純な連想配列を型指定して宣言


let map: { key1: number; key2: string; }
    = { key1: 1, key2: "test1" }
この辺までならググればすぐ見つかる?



辞書型、ハッシュマップ



使用頻度はスタイルにもよるが結構高い。

let hash: { [key: string]: string; } = {}
hash['apple'] = 'りんご'
hash['banana'] = 'ばなな'
hash['orange'] = 'オレンジ'


連想配列の値に連想配列が含まれている値を型指定して宣言


このあたりから訳が分からなくなってくるか
let map: {
    key1: number;
    key2: {
      key2_1: number;
      key2_2: number;
    };
  } = {
      key1: 1,
      key2: {
        key2_1: 21,
        key2_2: 22,
      },
    }
上記の組み合わせである程度は行けるはず



サンプルソース


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使うんだし型は明確にしておかないとね
正直めんどくs




2017年4月24日月曜日