Programmingバックエンド開発者

TypeScriptでは、関数のオプショナルパラメーターとオブジェクトのオプショナルプロパティはどのように機能し、どのように異なるのか、また使用上の注意点は何ですか?典型的な問題やエラーの例を挙げてください。

Hintsage AIアシスタントで面接を突破

回答。

関数のオプショナルパラメーターは、パラメーター名の後に疑問符(?)を付けて指定します。オブジェクト(インターフェースまたは型)のオプショナルプロパティについても同様です。

  • 関数の場合:
function greet(name?: string) { console.log(`Hello, ${name ?? 'stranger'}`); } greet(); // Hello, stranger greet('John'); // Hello, John
  • オブジェクトの場合:
interface User { id: number; nickname?: string; } const u1: User = { id: 1 }; const u2: User = { id: 2, nickname: 'Bob' };

注意点:

  • オプショナルパラメーターは、関数を呼び出す際に指定しなくてもよく、その場合の値は undefined になります。
  • オプショナルプロパティは、オブジェクトに存在しない可能性があります。
  • 注意が必要です: インターフェースでプロパティがオプショナルとして指定されていない場合、それは必須です!
  • オプショナルパラメーターは、関数の引数リストの最後に配置する必要があります。

クイズの質問。

オプショナルタイプのstring(function fn(x?: string))のパラメーターを持つ関数が定義されている場合、明示的に undefined で呼び出すことはできますか?fn() と fn(undefined) はどう違いますか?

回答: はい、undefined で呼び出すことができます: fn(undefined)fn() の結果は同じですが、内部的には関数は x === undefined になります。しかし、シグネチャでデフォルト値が定義されている場合:

function fn(x: string = 'demo') { console.log(x); } fn(); // demo fn(undefined); // demo fn('abc'); // abc

もし引数がオプショナルとして指定されていない(? またはデフォルト値がない場合)、fn() の呼び出しはコンパイルエラーになります。

このトピックに関する知識不足から生じた実際のエラーの例。


事例

インターフェース user において、phone: string(?なし)なプロパティを指定したが、オブジェクトのインスタンスを作成する際に追加するのを忘れました。その結果、TypeScript コンパイラが必須プロパティの欠如を指摘しました。暫定的な解決策として phone: undefined を追加しましたが、string !== undefined であるため、型に矛盾し、バリデーションエラーが増加しました。


事例

関数にいくつかのオプショナルパラメーターを定義しましたが、それらを引数リストの最後に配置しませんでした。TypeScript がこの場合にエラーを出し、パラメーターの順序を入れ替えると渡された値がパラメーターに正しくマッチせず、関数が混乱し、正しく動作しませんでした。


事例

外部APIのデータ型を説明する際にオプショナルプロパティを忘れたため(例: 姓? string)、片方のスキーマが変更されるとこれらのフィールドの受信が停止され、もう片方では undefined チェックなしに読み取ろうとするとコードが落ちることになりました。