Programmingフロントエンド開発者

TypeScriptでのRESTおよびパラメータの分割による関数の型付けはどのように機能しますか?そのような関数の不適切な型付けによってどのようなエラーが発生しますか?

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

回答

TypeScriptは、restパラメータ分割代入を使用して関数の厳密な型付けをサポートしています。これは、可変数の引数や複雑なオブジェクトを受け取る関数にとって特に重要です。

分割代入は関数のパラメータで期待されるプロパティの構造を明示的に示すことができます:

function printUser({ name, age }: { name: string; age: number }) { console.log(`${name} (${age})`); }

Restパラメータを使用すると、可変数の引数とその型を指定できます:

function sum(...numbers: number[]): number { return numbers.reduce((acc, cur) => acc + cur, 0); }

主なオブジェクトと追加のパラメータ配列を受け取る関数では、これらの組み合わせた使用が見られます:

function logEvent(event: { type: string }, ...meta: any[]) { console.log(event.type, meta.join(',')); }

正確な型付けは、コードの実行前にエラーを検出するのに役立ちますが、不適切な型付けは型の安全性の喪失とランタイムエラーを引き起こします。

注意が必要な質問

デフォルトの分割代入パラメータの型をどのように指定し、それをオプションにすることができますか?

多くの人がオブジェクトの型を指定しますが、各フィールドをオプションにすることやタイプと同時にデフォルト値を指定することを忘れがちです:

function foo({x = 1, y = 2}: {x?: number; y?: number} = {}) { console.log(x, y); }

ここでは、デフォルト値が指定され、すべてのパラメータが?を使ってオプションにされています。これがないと、引数なしの呼び出しはエラーを引き起こし、デフォルトが期待されているにもかかわらずエラーが発生します。

知識不足による実際のエラーの例


語り

プロジェクトでJavaScriptからTypeScriptへのパラメータのある関数の移行中に、オブジェクトにのみ型を指定し、個別のフィールドには指定しませんでした。その結果、引数なしで関数を呼び出した際に、分割代入エラーでアプリケーションがクラッシュしました:undefinedにはnameプロパティがありません。

語り

restパラメータを使用する際に、配列の型を明示的に指定するのを忘れました。関数の型がany[]だったため、数値以外のものも渡すことが許可されました。本番環境では、数値と文字列を結合してしまい、報告において不正確な結果を得ました。

語り

深くネストされたオブジェクトで分割代入を使用しましたが、ネストされた型を指定しませんでした。そのため、TSは適切に処理できず、オブジェクト内の必須フィールドの欠如を警告しなかったため、クライアント側でTypeError: Cannot read property 'id' of undefinedというエラーが発生しました。