TypeScriptオブジェクトのデフォルト値 설정

TypeScriptで引数として渡されるオブジェクトのデフォルト値を設定する方法

TypeScriptでは、関数に渡されるオブジェクトのデフォルト値を設定することができます。これにより、引数が省略された場合でも、そのオブジェクトの特定のプロパティにデフォルト値が設定されます。

オブジェクトを直接デフォルト値として指定する

function greet(person: { name: string; age?: number }) {
  console.log(`Hello, ${person.name}!`);
  if (person.age) {
    console.log(`You are ${person.age} years old.`);
  }
}

greet({ name: "Alice" }); // 呼び出し時にageプロパティを省略

• 引数として渡されるオブジェクトにageプロパティが存在しない場合、そのプロパティはundefinedになります。
• age?: number のように、プロパティ名に?を付けることで、そのプロパティはオプションとなります。

デフォルト値を持つオブジェクトをデフォルト引数として指定する

function greet(person: { name: string; age: number } = { name: "Unknown", age: 0 }) {
  console.log(`Hello, ${person.name}!`);
  console.log(`You are ${person.age} years old.`);
}

greet(); // 引数を省略

• 引数を省略した場合、デフォルト値のオブジェクトが使用されます。
• 関数の引数にデフォルト値を持つオブジェクトを直接指定することで、そのオブジェクトがデフォルト値として使用されます。

デストラクチャリングとデフォルト値を組み合わせて使う

function greet({ name = "Unknown", age = 0 }: { name?: string; age?: number }) {
  console.log(`Hello, ${name}!`);
  console.log(`You are ${age} years old.`);
}

greet({ name: "Bob" });

• 引数として渡されるオブジェクトのプロパティが省略されている場合、デフォルト値が使用されます。
• デストラクチャリングとデフォルト値を組み合わせることで、より簡潔なコードを書くことができます。

TypeScriptで引数として渡されるオブジェクトのデフォルト値を設定する例について、より詳しく解説します。

function greet(person: { name: string; age?: number }) {
  console.log(`Hello, ${person.name}!`);
  if (person.age) {
    console.log(`You are ${person.age} years old.`);
  }
}

greet({ name: "Alice" }); // 呼び出し時にageプロパティを省略

• 関数呼び出しの際、age プロパティを省略してもエラーになりません。省略された場合は、person.age は undefined になります。
• person という名前のオブジェクト型の引数を定義しています。
  • name プロパティは必須で、文字列型です。
  • age プロパティはオプションで、数値型です。? を付けることで、このプロパティが省略可能になります。

function greet(person: { name: string; age: number } = { name: "Unknown", age: 0 }) {
  console.log(`Hello, ${person.name}!`);
  console.### TypeScriptで引数として渡されるオブジェクトのデフォルト値を設定する例について、より詳しく解説します。

### 1. オブジェクトを直接デフォルト値として指定する

```typescript
function greet(person: { name: string; age?: number }) {
  console.log(`Hello, ${person.name}!`);
  if (person.age) {
    console.log(`You are ${person.age} years old.`);
  }
}

greet({ name: "Alice" }); // 呼び出し時にageプロパティを省略

• 関数呼び出しの際、person 引数を省略すると、{ name: "Unknown", age: 0 } というオブジェクトがデフォルト値として使用されます。
• person という名前のオブジェクト型の引数を定義しています。

function greet({ name = "Unknown", age = 0 }: { name?: string; age?: number }) {
  console.log(`Hello, ${name}!`);
  console.log(`You are ${age} years old.`);
}

greet({ name: "Bob" });

• 関数呼び出しの際、name または age プロパティが省略された場合は、デフォルト値が使用されます。
• name と age にそれぞれデフォルト値を指定しています。
• 引数のオブジェクトをデストラクチャリングして、name と age という変数に代入しています。

• デストラクチャリングとデフォルト値を組み合わせる 方法は、コードを簡潔に書きたい場合に便利です。
• デフォルト値を持つオブジェクトをデフォルト引数として指定する 方法は、デフォルト値を一括で設定したい場合に便利です。
• オブジェクトを直接デフォルト値として指定する 方法は、引数の型を厳密に定義したい場合に便利です。

• TypeScriptのインターフェース を利用することで、より複雑なオブジェクトの型を定義することができます。
• オプションチェーン を使うと、undefined のプロパティへのアクセスを安全に行うことができます。

インターフェースとオプションチェーンの組み合わせ

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

function greet(person: Person) {
  console.log(`Hello, ${person.name ?? 'Anonymous'}!`);
  console.log(`You are ${person.age ?? 0} years old.`);
}

• オプションチェーン (?.) と null合体演算子 (??) を組み合わせることで、person.age が undefined の場合に、デフォルト値の 0 を設定します。
• インターフェース を定義することで、person オブジェクトの構造を明確化します。

spread構文とデフォルトオブジェクト

function greet(person: Person = { name: 'Unknown', age: 0 }) {
  const { name, age } = { ...defaultPerson, ...person };
  console.log(`Hello, ${name}!`);
  console.log(`You are ${age} years old.`);
}

• その後、person オブジェクトのプロパティを上書きすることで、渡された引数とデフォルト値をマージします。
• spread構文 を使用して、デフォルトオブジェクト defaultPerson のプロパティをすべて新しいオブジェクトに展開します。

TypeScript 3.7以降のNullish合体演算子

function greet(person: Person) {
  console.log(`Hello, ${person.name ?? 'Anonymous'}!`);
  console.log(`You are ${person.age ?? 0} years old.`);
}

• TypeScript 3.7以降で導入された Nullish合体演算子 (??) は、左側のオペランドが null または undefined の場合にのみ、右側のオペランドを返します。

カスタムフック (Reactの場合)

import { useState } from 'react';

function usePerson(initialPerson: Person = { name: 'Unknown', age: 0 }) {
  const [person, setPerson] = useState(initialPerson);
  // ...
}

• initialPerson にデフォルト値を設定することで、初期状態を制御できます。
• Reactの カスタムフック を利用することで、コンポーネント間で共通のロジックを再利用できます。

どの方法を選ぶべきか？

• Reactで状態管理を行う
  カスタムフックが適しています。
• TypeScript 3.7以降を使用している
  Nullish合体演算子を使うことで、より簡潔なコードになります。
• デフォルト値をカスタマイズしたい
  spread構文とデフォルトオブジェクトが便利です。
• シンプルで読みやすいコード
  インターフェースとオプションチェーンの組み合わせがおすすめです。

状況に応じて適切な方法を選択し、より良いコードを作成しましょう。

• 上記の例では、Person インターフェースを定義していますが、TypeScriptの型システムの機能を活用することで、より複雑なオブジェクトの型を定義することができます。