今回の記事は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関連の記事を多数記載しているので是非参考にしてみてください。
コメント