【TypeScript】オブジェクト型配列の使い方ご紹介。

TypeScript

2022.04.10

今回の記事はTypeScriptでオブジェクト型配列を使う方法をご紹介する内容です。初心者にも分かりやすいように記載するので是非参考にしてみてください。

オブジェクト型配列の定義
オブジェクト型配列の値取得
オブジェクト型配列に値追加

オブジェクト型配列の定義

オブジェクト型の定義は下記のように行うことができます。

ype Option = {
  id: number;
  value: string;
};

const sample:Option[] = [
  {id:1,value:'1'},
  {id:2,value:'2'},
  {id:3,value:'3'}
];

consoleなどで出力してみると値が確認できます。ではこの配列の値を取得してみます。

オブジェクト型配列の値取得

オブジェクト型の配列いってしまえば配列なので下記のように取得することができます。

type Option = {
  id: number;
  value: string;
};

const sample:Option[] = [
  {id:1,value:'1'},
  {id:2,value:'2'},
  {id:3,value:'3'}
];

console.log(sample[0]);

コンソールには配列の1番目に当たるものが出力されています。ここまでは通常の配列と同じですが、オブジェクト型の場合は下記のように各要素を取得することもできます。

type Option = {
  id: number;
  value: string;
};

const sample:Option[] = [
  {id:1,value:'1'},
  {id:2,value:'2'},
  {id:3,value:'3'}
];

console.log(sample[0]);
console.log(sample[0].id);
console.log(sample[0].value);

DBやAPI経由でデータを取得する際にModelと連携しやすいので便利です。

では次にオブジェクト型に値を追加する方法をご紹介します。

オブジェクト型配列に値追加

type Option = {
  id: number;
  value: string;
};

const sample:Option[] = [
  {id:1,value:'1'},
  {id:2,value:'2'},
  {id:3,value:'3'}
];

sample.push({id:4,value:'追加'});

console.log(sample);