スポンサーリンク

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

TypeScript
スポンサーリンク

今回の記事は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);

これ以外にも配列値をmapで全て出力する方法やfilter等の使い方もあります。mapに関しては別途記事を作成しているので下記より興味がある方はご確認ください。

【TypeScript】mapの使い方。

では今回の記事は以上です。他にもTypeScript関連の記事を多数記載しているので是非参考にしてみてください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました