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

JSON.parseなどを利用するとAny型になってしまうので適切に型を宣言する。
何が嬉しいかというとコンパイル時にエラーを吐いてくれる、またvscodeなどでインテリセンスが効くようになる。





具体的には以下のような構造を想定

keyとvalueをもつ連想配列。
keyとバリューも連想配列になっている。
上記がさらに配列になっている。

要するに下記のjson
[
 {"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}}
]


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

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


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

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


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


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



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


このあたりから訳が分からなくなってくるか
  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(`element:${element.key.id}, ${element.key.year}, ${element.key.month}, ${element.key.day}, `)
 console.log(`element:${element.value.value1}, ${element.value.value2} `)
})


せっかくTypeScript使うんだし型は明確にしておかないとね
正直めんどくs




2017年4月24日月曜日

0 件のコメント:

コメントを投稿