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

TypeScript は現(xiàn)代の Web 開発の基礎(chǔ)であり、開発者がより安全で保守しやすいコードを作成できるようにします。 TypeScript は、JavaScript に靜的型付けを?qū)毪工毪长趣恰ⅴ偿螗靴ぅ霑r(shí)のエラーの検出に役立ちます。 2024 年の Stack Overflow Developer Survey によると、TypeScript は開発者の間で最も人気のあるスクリプト テクノロジの中で 5 ^位 にランクされています。

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

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

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

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

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

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

部分的

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

たとえば、ユーザー プロファイル更新関數(shù)を作成しているとします。この場(chǎng)合、ユーザーがすべてのフィールドを更新したくない場(chǎng)合は、部分タイプを使用して、必要なフィールドのみを更新できます。これは、すべてのフィールドが必須ではないフォームや 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 に設(shè)定してタイプを構(gòu)築します。これは、オブジェクトをデータベースに保存する前に、すべてのプロパティが利用可能であることを確認(rèn)するのに役立ちます。

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

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

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

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

updateUser({ name: 'Alice' });

読み取り専用

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

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

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

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

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

選ぶ

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

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

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 ユーティリティ タイプは、既存の型から特定のプロパティを除外して型を構(gòu)築します。

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

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

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

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

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

記録

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

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

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

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

除外する

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

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

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

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

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

抽出する

Extract ユーティリティ型は、共用體から特定の型を抽出して型を構(gòu)築します。

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

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

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 と 未定義 を除外して型を構(gòu)築します。

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

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

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

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

戻り値の型

ReturnType ユーティリティは、関數(shù)の戻り値の型を抽出します。

座標(biāo)などの複雑なオブジェクトを返す高階関數(shù)またはコールバックを操作する場(chǎng)合、

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

interface Config {
  apiEndpoint: string;
}

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

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

パラメータ

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

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

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

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

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

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

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

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

部分と必須の組み合わせ

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

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

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

この例では、

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

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

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

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

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

ここで、

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

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

特定の基準(zhǔn)に基づいてユニオンから特定の型をフィルタリングする必要がある狀況が発生する場(chǎng)合があります。

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

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 関數(shù)が受け入れのみを許可する有効な入力として 成功 または エラー を入力します。

ベストプラクティス

必要な場(chǎng)合のみ使用する

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

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

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

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

明瞭さを維持する

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

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

interface Config {
  apiEndpoint: string;
}

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

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

パフォーマンスに関する考慮事項(xiàng)

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

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

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

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

結(jié)論

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

関連ブログ

• JavaScript および TypeScript のトップ リンター: コード品質(zhì)管理の簡(jiǎn)素化
• すべての開発者が知っておくべき 7 つの JavaScript 単體テスト フレームワーク
• TypeScript での感嘆符の使用
• TypeScript の條件型を理解する

以上がTypeScript ユーティリティの種類: 完全ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。