TypeScript オプションパラメータの謎：疑問符 (?) の意味とは？

TypeScript パラメータ名の疑問符 (?) について

例

function myFunction(param1: string, param2?: number) {
  // ...
}

// パラメータ2を指定
myFunction("Hello", 10);

// パラメータ2を省略
myFunction("Hello");

上記の例では、myFunction 関数は2つのパラメータを持ちます。

• param1: 必須パラメータ。常に値を指定する必要があります。
• param2: オプションパラメータ。指定しても、指定しなくても構いません。

myFunction 関数を呼び出す際に、param2 パラメータを省略すると、undefined 値が割り当てられます。

オプションパラメータを使用することで、関数の呼び出しをより柔軟にすることができます。

• 関数の使い方がシンプルになる
• デフォルト値を設定できる

オプションパラメータを使用する際は、以下の点に注意する必要があります。

• 必須パラメータよりも前に記述する
• デフォルト値を設定する場合は、デフォルト値の後に ? を付ける

• オプションパラメータは、デフォルト値を設定することで、より使いやすくなります。
• オプションパラメータは、複数のオプションパラメータをまとめて指定できる ... 演算子と組み合わせて使用することができます。

オプションパラメータの例

function myFunction(param1: string, param2?: number, param3?: string) {
  // ...

  console.log(`param1: ${param1}`);
  console.log(`param2: ${param2}`);
  console.log(`param3: ${param3}`);
}

// 全てのパラメータを指定
myFunction("Hello", 10, "World");

// param2 と param3 を省略
myFunction("Hello");

// param2 のみ指定
myFunction("Hello", 10);

• param1: 必須パラメータ

デフォルト値の例

function myFunction(param1: string, param2: number = 10) {
  // ...

  console.log(`param1: ${param1}`);
  console.log(`param2: ${param2}`);
}

// param2 を省略
myFunction("Hello");

// param2 を指定
myFunction("Hello", 20);

上記コードは、2つのパラメータを持つ myFunction 関数です。

複数のパラメータをまとめて指定

function myFunction(param1: string, ...params: any[]) {
  // ...

  console.log(`param1: ${param1}`);
  console.log(`params: ${params}`);
}

myFunction("Hello", 10, "World", true);

上記コードは、param1 パラメータと、それ以降のパラメータをまとめて受け取る myFunction 関数です。

myFunction 関数を呼び出す際に、param1 パラメータ以降のパラメータは ... 演算子を使ってまとめて指定することができます。

オプションパラメータを指定する他の方法

デフォルト値

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

function myFunction(param1: string, param2 = 10) {
  // ...
}

// param2 を省略
myFunction("Hello");

undefined チェック

パラメータが undefined かどうかをチェックすることで、オプションパラメータであることを実現できます。

function myFunction(param1: string, param2: number) {
  if (param2 === undefined) {
    // param2 が省略された場合の処理
  } else {
    // param2 が指定された場合の処理
  }
}

// param2 を省略
myFunction("Hello");

オブジェクトリテラル

パラメータをオブジェクトリテラルとして受け取ることで、オプションパラメータを表現できます。

function myFunction(options: {
  param1: string;
  param2?: number;
}) {
  // ...
}

// param2 を省略
myFunction({ param1: "Hello" });

// param2 を指定
myFunction({ param1: "Hello", param2: 10 });

rest パラメータ

function myFunction(param1: string, ...params: number[]) {
  // ...
}

// param2 を省略
myFunction("Hello");

// param2 を指定
myFunction("Hello", 10, 20);

• デフォルト値で済む場合は、デフォルト値を使うのが最もシンプルです。
• パラメータが undefined かどうかをチェックする必要がある場合は、undefined チェックを使うのが適切です。
• 複数のオプションパラメータをまとめて受け取りたい場合は、オブジェクトリテラルや rest パラメータを使うのが便利です。

TypeScript では、疑問符 (?) を使う以外にも、オプションパラメータを指定する方法はいくつかあります。状況に合わせて適切な方法を選びましょう。