TypeScript ユーティリティの種類: 完全ガイド-jsチュートリアル-php.cn

TL;DR: TypeScript ユーティリティタイプは、既存のタイプを変換する事前に構築された関数であり、コードをクリーンにして保守しやすくします。この記事では、ユーザープロファイルの更新、構成の管理、データの安全なフィルターの方法など、重要なユーティリティの種類について実際の例を示して説明します。

TypeScript Utility Types: A Complete Guide

TypeScript は現代の Web 開発の基礎であり、開発者がより安全で保守しやすいコードを作成できるようにします。 TypeScript は、JavaScript に静的型付けを導入することで、コンパイル時のエラーの検出に役立ちます。 2024 年の Stack Overflow Developer Survey によると、TypeScript は開発者の間で最も人気のあるスクリプトテクノロジの中で 5^位にランクされています。

TypeScript の素晴らしい機能が、その成功の主な理由です。たとえば、ユーティリティ型は、開発者が型の操作を簡素化し、定型コードを減らすのに役立ちます。ユーティリティタイプは TypeScript 2.1 で導入され、新しいリリースごとにユーティリティタイプが追加されています。

この記事では、TypeScript をマスターするのに役立つユーティリティの種類について詳しく説明します。

TypeScript ユーティリティの種類を理解する

ユーティリティ型は、既存の型を新しいバリアント型に変換できるようにする TypeScript の事前定義されたジェネリック型です。これらは、既存の型をパラメータとして受け取り、特定の変換ルールに基づいて新しい型を返す型レベルの関数と考えることができます。

これは、実際に型定義を複製する必要がなく、すでに存在する型の変更されたバリアントが必要になることが多いインターフェイスを操作する場合に特に便利です。

コアユーティリティタイプとその実際のアプリケーション

TypeScript Utility Types: A Complete Guide

部分的

Partial ユーティリティタイプはタイプを受け取り、そのすべてのプロパティをオプションにします。このユーティリティ型は、プロパティを再帰的にオプションにするため、型がネストされている場合に特に役立ちます。

たとえば、ユーザープロファイル更新関数を作成しているとします。この場合、ユーザーがすべてのフィールドを更新したくない場合は、部分タイプを使用して、必要なフィールドのみを更新できます。これは、すべてのフィールドが必須ではないフォームや API で非常に便利です。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

ログイン後にコピー

必須

Required ユーティリティタイプは、提供されたタイプのすべてのプロパティを required に設定してタイプを構築します。これは、オブジェクトをデータベースに保存する前に、すべてのプロパティが利用可能であることを確認するのに役立ちます。

たとえば、必須を車の登録に使用すると、新しい車のレコードを作成または保存するときに、ブランド、モデル、走行距離などの必要なプロパティを見逃すことがなくなります。これはデータの整合性の観点から非常に重要です。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

ログイン後にコピー

読み取り専用

Readonly ユーティリティタイプは、すべてのプロパティが読み取り専用であるタイプを作成します。これは、重要な設定を不要な変更から保護する構成管理において非常に役立ちます。

たとえば、アプリが特定の API エンドポイントに依存している場合、それらは実行中に変更されることがあってはなりません。これらを読み取り専用にすると、アプリのライフサイクル全体を通じてそれらが一定のままであることが保証されます。

次のコード例を参照してください。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

ログイン後にコピー

選ぶ

Pick** ユーティリティタイプは、既存のタイプからプロパティのセットを選択してタイプを構築します。これは、ユーザーの名前や電子メールなどの重要な情報をフィルターで除外して、ダッシュボードまたは概要ビューに表示する必要がある場合に便利です。データのセキュリティと明確性の向上に役立ちます。

次のコード例を参照してください。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

ログイン後にコピー

省略

Omit ユーティリティタイプは、既存の型から特定のプロパティを除外して型を構築します。

たとえば、省略は、電子メールアドレスなどの機密情報を含まないユーザーデータを第三者と共有したい場合に便利です。これを行うには、これらのフィールドを除外する新しい型を定義します。特に API では、API 応答の外部に何が送信されるかを監視するとよいでしょう。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

ログイン後にコピー

記録

Record ユーティリティタイプは、指定されたキーと値を持つオブジェクトタイプを作成します。これは、構造化マッピングを扱うときに便利です。

たとえば、在庫管理システムのコンテキストでは、Record タイプは品目と数量の間の明示的なマッピングを作成するのに役立ちます。このタイプの構造を使用すると、予想されるすべての成果が確実に考慮されていると同時に、在庫データに簡単にアクセスして変更できます。

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

ログイン後にコピー

除外する

Exclude** ユーティリティタイプは、共用体から特定の型を除外することによって型を構築します。

特定のプリミティブ型 (文字列ではなく数値やブール値など) のみを受け入れる関数を設計する場合は、Exclude を使用できます。これにより、予期しない型によって実行中にエラーが発生する可能性があるバグを防ぐことができます。

次のコード例を参照してください。

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

ログイン後にコピー

抽出する

Extract ユーティリティ型は、共用体から特定の型を抽出して型を構築します。

混合型のコレクションから数値のみを処理する必要があるシナリオ (計算の実行など) では、Extract を使用すると、数値のみが確実に渡されます。これは、厳密な型指定により実行時エラーを防ぐことができるデータ処理パイプラインで役立ちます。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

ログイン後にコピー

Null 不可

NonNullable ユーティリティ型は、指定された型から null と 未定義 を除外して型を構築します。

ユーザー名や製品 ID など、一部の値を常に定義する必要があるアプリでは、値を NonNullable にすると、そのようなキーフィールドが null や未定義。これは、フォームの検証中や、値の欠落によって問題が発生する可能性がある API からの応答中に役立ちます。

次のコード例を参照してください。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

ログイン後にコピー

戻り値の型

ReturnType ユーティリティは、関数の戻り値の型を抽出します。

座標などの複雑なオブジェクトを返す高階関数またはコールバックを操作する場合、

ReturnType を使用すると、毎回手動で指定する必要がなく、予想される戻り値の型の定義が簡素化されます。これにより、型の不一致に関連するバグが減り、開発がスピードアップします。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

ログイン後にコピー

パラメータ

パラメータユーティリティは、関数のパラメータの型をタプルとして抽出します。

これにより、関数の周囲にラッパーを作成する場合など、関数パラメーターを動的に操作または検証したい場合に、パラメーターの型を簡単に抽出して再利用できます。関数シグネチャの一貫性を確保することで、コードベース全体でのコードの再利用性と保守性が大幅に向上します。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

ログイン後にコピー

ユーティリティタイプを組み合わせた高度なユースケース

これらのユーティリティタイプを組み合わせると、TypeScript でアプリを開発するときに強力な結果が得られます。複数のユーティリティタイプが効果的に連携するいくつかのシナリオを見てみましょう。

部分と必須の組み合わせ

特定のフィールドを必要とする型を作成し、他のフィールドをオプションにすることができます。

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

ログイン後にコピー

この例では、

UpdateUser には id プロパティが必要ですが、名前と電子メールはオプションです。このパターンは、識別子が常に存在する必要があるレコードを更新する場合に役立ちます。

柔軟な API レスポンスの作成

特定の条件に基づいてさまざまな形状を持つことができる API 応答を定義することができます。

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

ログイン後にコピー

ここで、

ApiResponse を使用すると、API 呼び出しに対する柔軟な応答タイプを作成できます。 Pick を使用すると、関連するユーザーデータのみが応答に含まれるようになります。

フィルタリングタイプとして除外と抽出を組み合わせる

特定の基準に基づいてユニオンから特定の型をフィルタリングする必要がある状況が発生する場合があります。

次のコード例を参照してください。

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

ログイン後にコピー

ここでは、Exclude ユーティリティを使用して、元の ResponseTypes 共用体から loading を除外する型 ( NonLoadingResponses ) を作成します。 handleResponse 関数が受け入れのみを許可する有効な入力として成功または エラー を入力します。

ベストプラクティス

必要な場合のみ使用する

ユーティリティ型は非常に強力ですが、使いすぎるとコードが複雑で読みにくくなる可能性があります。これらのユーティリティの活用とコードの明瞭性の維持との間でバランスを取ることが重要です。

次のコード例を参照してください。

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

ログイン後にコピー

明瞭さを維持する

各ユーティリティのユースケースの目的が明確であることを確認してください。あまりにも多くのユーティリティを一緒にネストしないでください。型の意図した構造が混乱する可能性があります。

次のコード例を参照してください。

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

ログイン後にコピー

パフォーマンスに関する考慮事項

TypeScript 型はコンパイル後に消えるため、実行時にパフォーマンスに影響することはほとんどありませんが、複雑な型は TypeScript コンパイラーの速度を低下させ、開発速度に影響を与える可能性があります。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

ログイン後にコピー

結論

TypeScript が Web 開発者の間で最も人気のある言語の 1 つであることは疑いの余地がありません。ユーティリティタイプは、正しく使用すると TypeScript の開発エクスペリエンスとコードの品質を大幅に向上させる、TypeScript のユニークな機能の 1 つです。ただし、パフォーマンスとコードの保守性の問題が発生する可能性があるため、すべてのシナリオでこれらを使用するべきではありません。