📘 TypeScriptでオブジェクト操作をマスターしよう!

post-cover

TypeScriptのオブジェクトについて学習していきましょう!

オブジェクトとは連想配列です。 他のプログラミング言語では、辞書型、ハッシュといった名前で呼ばれることもあります。

オブジェクトリテラル

プロパティ名: 式

の形。 catch, default などの変数名に使用できない予約後もプロパティ名として使用可能。

ex)

const member = {
  name: 'taro',
  age: 20
}

{} の中に情報を書く。 , カンマ区切り。  

省略記法

プロパティ名と値に設定する変数名が同じ場合は省略して記述することができる。

const name = 'taro'
const member = {
  name,
  age: 20
}

文字列リテラル

プロパティ名として、シングルクォーテーションや、ダブルクォーテーションで囲んだ名前を使用することもできる。 利点としては、識別子として使えないような文字列をプロパティ名として使用することができる。

ex)

const member = {
  "first name": 'taro',
  age: 20
}

数値リテラル

プロパティ名に数字を利用することもできる。 ただ数字をプロパティ名として記載したとしても、プロパティ名は文字列として扱われる。

ex)

const obj = {
  1: 'taro',
  2.01: 20
}

obj['1']
obj['2.01']

プロパティの参照方法

ex)

const member = {
  name: 'taro',
  age: 20
}
member.name
member['age']

プロパティ名を動的に

プロパティ名を動的に決めることもできる。

ex)

const key = "foo"
const obj = {
  [key]: 'taro',
}

obj.foo

スプレッド構文

...式と書くことで、他のオブジェクトを展開し、そのプロパティをコピーすることが可能。

const member = {
  name: 'taro',
  age: 20
}

const taro = {
  ...member,
  favorite: '勉強'
}

// {name: 'taro', age: 20, favorite: '勉強'}

Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
Profile picture
michael ☻︎ 🇯🇵
Web Engineer(PHP/Laravel, Python/FastAPI/Flask, TypeScript/Vue/React, AWS/GCP, etc.) / Freelance /
FebMarAprMayJunJul
© 2024, PWE