TypeScriptでオブジェクトリテラルを使って省略可能なパラメータを渡す

2024-04-02

TypeScriptで省略可能なパラメータを渡す方法

デフォルト値

パラメータにデフォルト値を設定することで、そのパラメータを省略できます。

function greet(name: string, message?: string) {
  console.log(`Hello, ${name}! ${message || "How are you?"}`);
}

greet("John"); // "Hello, John! How are you?"
greet("Jane", "Good morning!"); // "Hello, Jane! Good morning!"

この例では、messageパラメータはデフォルト値"How are you?"が設定されているので、省略しても問題ありません。

undefined

省略可能なパラメータにundefinedを渡すことで、そのパラメータを省略できます。

function greet(name: string, message?: string) {
  console.log(`Hello, ${name}! ${message || "How are you?"}`);
}

greet("John", undefined); // "Hello, John! How are you?"

この例では、messageパラメータにundefinedを渡しているので、省略されたものと同じように処理されます。

オブジェクトリテラル

複数の省略可能なパラメータをまとめて渡す場合は、オブジェクトリテラルを使うことができます。

function greet(name: string, options?: { message?: string, age?: number }) {
  console.log(`Hello, ${name}! ${options?.message || "How are you?"}`);
  console.log(`Your age is ${options?.age || "unknown"}`);
}

greet("John", { message: "Good morning!" }); // "Hello, John! Good morning!"
greet("Jane", { age: 30 }); // "Hello, Jane! How are you? Your age is 30"

この例では、optionsパラメータはオブジェクトリテラルで渡されます。messageとageはどちらも省略可能で、省略された場合はデフォルト値が使用されます。

デストラクチャリング

オブジェクトリテラルと同様に、デストラクチャリングを使って省略可能なパラメータを個別に渡すこともできます。

function greet(name: string, { message = "How are you?", age }?: { message?: string, age?: number }) {
  console.log(`Hello, ${name}! ${message}`);
  console.log(`Your age is ${age}`);
}

greet("John", { message: "Good morning!" }); // "Hello, John! Good morning!"
greet("Jane", { age: 30 }); // "Hello, Jane! How are you? Your age is 30"

TypeScriptで省略可能なパラメータを渡す方法はいくつかあります。どの方法を使うかは、状況によって異なります。

シンプルな場合は、デフォルト値を使うのがおすすめです。
個別にパラメータを渡したい場合は、デストラクチャリングを使うのがおすすめです。

これらの方法を理解することで、TypeScriptでより柔軟なコードを書くことができます。

function greet(name: string, options?: { message?: string, age?: number }) {
  console.log(`Hello, ${name}! ${options?.message || "How are you?"}`);
  console.log(`Your age is ${options?.age || "unknown"}`);
}

// デフォルト値
greet("John"); // "Hello, John! How are you?"

// undefined
greet("Jane", undefined); // "Hello, Jane! How are you?"

// オブジェクトリテラル
greet("John", { message: "Good morning!" }); // "Hello, John! Good morning!"
greet("Jane", { age: 30 }); // "Hello, Jane! How are you? Your age is 30"

// デストラクチャリング
greet("John", { message: "Good morning!" }); // "Hello, John! Good morning!"
greet("Jane", { age: 30 }); // "Hello, Jane! How are you? Your age is 30"

このコードを参考に、TypeScriptで省略可能なパラメータをうまく活用してください。

? 演算子を使って、パラメータがundefinedかどうかをチェックし、undefinedの場合はデフォルト値を設定することができます。

function greet(name: string, message?: string) {
  console.log(`Hello, ${name}! ${message ? message : "How are you?"}`);
}

greet("John"); // "Hello, John! How are you?"
greet("Jane", "Good morning!"); // "Hello, Jane! Good morning!"

この例では、messageパラメータがundefinedかどうかをチェックし、undefinedの場合は"How are you?"を返しています。

function greet(name: string, message?: string) {
  console.log(`Hello, ${name}! ${message || "How are you?"}`);
}

greet("John"); // "Hello, John! How are you?"
greet("Jane", "Good morning!"); // "Hello, Jane! Good morning!"

型ガードを使って、パラメータの型をチェックし、型によって処理を変えることができます。

function greet(name: string, message?: string) {
  if (typeof message === "string") {
    console.log(`Hello, ${name}! ${message}`);
  } else {
    console.log(`Hello, ${name}! How are you?`);
  }
}

greet("John"); // "Hello, John! How are you?"
greet("Jane", "Good morning!"); // "Hello, Jane! Good morning!"