オブジェクトデストラクチャリングを使用するべきかどうか

2024-04-02

オブジェクトデストラクチャリングにおける型

例:

const person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const { name, age } = person;

console.log(name, age); // "John Doe" 30

この例では、person オブジェクトの name と age プロパティを、name と age という個別の変数に割り当てています。

型

オブジェクトデストラクチャリングを使用する際には、各プロパティの型を指定することができます。これは、コードの安全性と信頼性を向上させるのに役立ちます。

interface Person {
  name: string;
  age: number;
  city: string;
}

const person: Person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const { name, age }: { name: string, age: number } = person;

console.log(name, age); // "John Doe" 30

この例では、Person インターフェースを使用して、name プロパティは string 型、age プロパティは number 型であることを定義しています。

デフォルト値

プロパティが存在しない場合に備えて、デフォルト値を指定することができます。

interface Person {
  name: string;
  age: number;
  city?: string; // オプションのプロパティ
}

const person: Person = {
  name: "John Doe",
  age: 30
};

const { name, age, city = "Unknown" }: { name: string, age: number, city?: string } = person;

console.log(name, age, city); // "John Doe" 30 "Unknown"

この例では、city プロパティはオプションのプロパティとして定義されており、デフォルト値は "Unknown" です。

エイリアス

プロパティにエイリアスを設定することができます。

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "John Doe",
  age: 30
};

const { name: fullName, age } = person;

console.log(fullName, age); // "John Doe" 30

この例では、name プロパティに fullName というエイリアスを設定しています。

基本的なオブジェクトデストラクチャリング

const person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const { name, age } = person;

console.log(name, age); // "John Doe" 30

interface Person {
  name: string;
  age: number;
  city: string;
}

const person: Person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const { name, age }: { name: string, age: number } = person;

console.log(name, age); // "John Doe" 30

interface Person {
  name: string;
  age: number;
  city?: string; // オプションのプロパティ
}

const person: Person = {
  name: "John Doe",
  age: 30
};

const { name, age, city = "Unknown" }: { name: string, age: number, city?: string } = person;

console.log(name, age, city); // "John Doe" 30 "Unknown"

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "John Doe",
  age: 30
};

const { name: fullName, age } = person;

console.log(fullName, age); // "John Doe" 30

ネストされたオブジェクト

const address = {
  street: "123 Main Street",
  city: "Morrow County, Oregon",
  zip: "97360"
};

const person = {
  name: "John Doe",
  age: 30,
  address
};

const { name, age, address: { city, zip } } = person;

console.log(name, age, city, zip); // "John Doe" 30 "Morrow County, Oregon" "97360"

配列のデストラクチャリング

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first, second, rest); // 1 2 [3, 4, 5]

これらのサンプルコードは、オブジェクトデストラクチャリングの基本的な使用方法を示しています。

スプレッド構文を使用して、オブジェクトのプロパティを別のオブジェクトにコピーすることができます。

const person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const newPerson = { ...person };

console.log(newPerson); // { name: "John Doe", age: 30, city: "Morrow County, Oregon" }

const person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

const newPerson = Object.assign({}, person);

console.log(newPerson); // { name: "John Doe", age: 30, city: "Morrow County, Oregon" }

for-in ループを使用して、オブジェクトのプロパティを個別に処理することができます。

const person = {
  name: "John Doe",
  age: 30,
  city: "Morrow County, Oregon"
};

for (const key in person) {
  console.log(key, person[key]);
}

// name John Doe
// age 30
// city Morrow County, Oregon