ネストしたオブジェクトの書き方【TypeScript】

オブジェクトの書き方と取得方法がわからなくなる時が多々あるので備忘録として残しておきます。

ネストしたオブジェクトの書き方
オブジェクトの取得方法（書き方）
まとめ

ネストしたオブジェクトの書き方

ネストしたオブジェクトは次のように記載します。そのままですけど・・・

オブジェクト名:{
  オブジェクト名:{ }
}

以下実装例です。

const product:{
  id: string;
  price: number;
  colors: string[],
  details: {
    title: string;
    description: string;
  }
} = {
  id: 'ab-123',
  price: 123.4,
  colors: ['red', 'green', 'black'],
  details: { //ネストされたオブジェクト
    title: 't-shirt',
    description: 'Large size T-shirt'
  }
}

※id: string などの型指定はTypeScriptの型推論に任せればいいので書く必要はない。

オブジェクトの取得方法（書き方）

const product = {
  id: 'ab-123',
  price: 123.4,
  colors: ['red', 'green', 'black'],
  details: {
    title: 't-shirt',
    description: 'Large size T-shirt'
  }
}

console.log(product.id);
console.log(product.colors[2]);
console.log(product.details.title);

ab-123
black
t-shirt

まとめ

よく、オブジェクトと配列を間違えてしまいます。もっとコードに触れる時間をつくって見慣れた風景にしていきたいと思います（何年かかることやら・・・）。