オプションプロパティで TypeScript オブジェクトの引数にデフォルト値を設定

2024-04-02

TypeScript オブジェクトの引数にデフォルト値を設定する方法

デフォルト値を設定するには、関数定義時に引数にデフォルト値を指定する。例えば、以下のコードでは、options オブジェクトの name プロパティにデフォルト値 "John" を設定している。

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: "Jane" }); // "Hello, Jane!"
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

デフォルト値は、引数が渡されなかった場合のみ使用される。引数が渡された場合は、デフォルト値は無視される。

オプションプロパティ

オブジェクトのすべてのプロパティにデフォルト値を設定したい場合は、Partial 型を使用する。Partial 型は、オブジェクトのすべてのプロパティをオプションにする型である。

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

greet({}); // "Hello, Unknown!"
greet({ name: "Jane" }); // "Hello, Jane!"
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

上記のコードでは、Partial 型を使用することで、name と age の両方のプロパティがオプションになっている。

デフォルト値の初期化

デフォルト値は、関数内で初期化することもできる。これは、複雑なデフォルト値を設定したい場合に役立つ。

function greet(person: { name: string, age?: number }) {
  if (!person.age) {
    person.age = 0;
  }

  console.log(`Hello, ${person.name}!`);
  console.log(`You are ${person.age} years old.`);
}

greet({ name: "Jane" }); // "Hello, Jane! You are 0 years old."
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

上記のコードでは、age プロパティが渡されなかった場合、デフォルト値として 0 が設定される。

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: "Jane" }); // "Hello, Jane!"
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

// オプションプロパティ
function greet(person: Partial<{ name: string, age: number }>) {
  console.log(`Hello, ${person.name ?? "Unknown"}!`);
  if (person.age) {
    console.log(`You are ${person.age} years old.`);
  }
}

greet({}); // "Hello, Unknown!"
greet({ name: "Jane" }); // "Hello, Jane!"
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

// デフォルト値の初期化
function greet(person: { name: string, age?: number }) {
  if (!person.age) {
    person.age = 0;
  }

  console.log(`Hello, ${person.name}!`);
  console.log(`You are ${person.age} years old.`);
}

greet({ name: "Jane" }); // "Hello, Jane! You are 0 years old."
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

このコードを実行することで、TypeScript オブジェクトの引数にデフォルト値を設定する方法を理解することができます。

TypeScript オブジェクトの引数にデフォルト値を設定する他の方法

? 演算子を使用すると、プロパティが存在しない場合にデフォルト値を返すことができます。

function greet(person: { name: string }) {
  const age = person.age ?? 0;

  console.log(`Hello, ${person.name}!`);
  console.log(`You are ${age} years old.`);
}

greet({ name: "Jane" }); // "Hello, Jane! You are 0 years old."
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

|| 演算子を使用すると、左側の値が undefined または null の場合に右側の値を返すことができます。

function greet(person: { name: string }) {
  const age = person.age || 0;

  console.log(`Hello, ${person.name}!`);
  console.log(`You are ${age} years old.`);
}

greet({ name: "Jane" }); // "Hello, Jane! You are 0 years old."
greet({ name: "John", age: 30 }); // "Hello, John! You are 30 years old."

デフォルト値を持つオブジェクトリテラルを使用することができます。

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

const defaultPerson = {
  name: "John",
  age: 30,
};

greet(defaultPerson); // "Hello, John! You are 30 years old."

上記のコードでは、defaultPerson オブジェクトは name と age プロパティのデフォルト値を持っています。

ファクトリー関数を使用して、デフォルト値を持つオブジェクトを作成することができます。

function createPerson(name: string, age?: number): { name: string, age: number } {
  return {
    name,
    age: age ?? 0,
  };
}

const person = createPerson("Jane");

console.log(`Hello, ${person.name}!`);
console.log(`You are ${person.age} years old.`);