TypeScript のユーティリティ型の力を解き放つ-jsチュートリアル-php.cn

TypeScript のユーティリティ型の力を解き放つ

Patricia Arquette

リリース： 2024-11-11 18:44:03

オリジナル

192 人が閲覧しました

Unleashing the Power of Utility Types in TypeScript

こんにちは、TypeScript 戦士! ?さて、あなたは TypeScript を深く理解していて、「型を管理するためだけにコードがこんなにたくさんあるのはなぜだろう?」 と疑問に思ったことがあるかもしれません。心配しないでください。あなたは一人ではありません。私たちは皆、このワイルドで静的に型付けされた乗り物に一緒に乗っています。

今日は、TypeScript の最もクールなツールであるユーティリティタイプについて詳しく説明します。これらは、コードの高速化と簡素化に役立つビデオゲームの小さなチートコードのようなものです。それでは、力を合わせて、TypeScript で最も便利なユーティリティ型と、それらがコードの悩みを軽減する方法についての楽しいツアーに参加しましょう。

えっ？さらに種類が増えました。

すべてを最初から作成せずに、TypeScript の型を操作しようとしていると想像してください (そんな時間は誰にあるでしょうか?)。ユーティリティタイプを使用すると、他のタイプの一部を変換または再利用して、新しいタイプを作成できます。余分な労力を必要とせずに、スライスしてさいの目に切ることができるおしゃれなキッチン用品と考えてください。時間を節約し、冗長性を減らし、コードの管理がずっと簡単になります。一つずつ詳しく見ていきましょう!

部分的な

機能: 型内のすべてのプロパティをオプションにします。はい、とても簡単です。

気に入っていただける理由: オブジェクトの一部が必要ではあるが、すべてではない場合に最適です。

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

ログイン後にコピー

必須<タイプ>

機能: 型内のすべてのプロパティを必須にします。「どのフィールドもスキップしないでください!」という TypeScript のちょっとした表現

気に入っていただける理由: 場合によっては、オプションがオプションではない場合があります。特に特定のプロパティが以前はオプションだった場合は、すべてをロックしてロードする必要があります。

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!

ログイン後にコピー

レコード<キー、タイプ>

内容: キー Key と値 Type を使用してオブジェクトタイプを作成します。これは、TypeScript の「独自の辞書を作成する」機能と考えてください。

なぜあなたが私を好きになるのか: このタイプは、データを迅速かつ簡単に計画する方法が必要な場合、特に事前に鍵がわかっている場合に最適です。

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};

ログイン後にコピー

を選択します。

What It Does: 既存のタイプを取得し、指定したプロパティのみを選択します。これは、「短くてわかりやすくしましょう」という TypeScript の言い方だと考えてください。

気に入っていただける理由: すべてをドラッグせずに既存のタイプのサブセットを作成するのに最適です。なぜなら、それが私のお気に入りの 1 つだからです。

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick<User, "id" | "name">;

ログイン後にコピー

を省略します。

内容: Pick の逆です。これにより、型から特定のプロパティを除外できます。

気に入っていただける理由: 型がある場合は便利ですが、望ましくない厄介なフィールドが 1 つだけあります。

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

ログイン後にコピー

Exclude

内容: 共用体から特定の型を削除します。 TypeScript の「グループチャットからの追い出し」です。

気に入っていただける理由: 大規模な組合があるが、一部のケースのみを処理する必要がある場合に、非常に便利です。

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!

ログイン後にコピー

抽出

機能: Exclude、Extract の双子の兄弟は、指定された共用体に一致する型のみを保持します。

気に入っていただける理由: このタイプは、結合タイプを関連する部分のみに絞り込みます。

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};

ログイン後にコピー

これで完成です! ? Extract と Pickmay は似ていますが、それぞれ異なるジョブに適しています。Extract は共用体タイプのフィルターであり、Picklet はオブジェクトタイプからプロパティを選択します。対応する Exclude と Omit にも同じことが当てはまります。

これらのユーティリティタイプは小さいですが強力です。時間を節約し、コードの冗長性を減らし、物事を整理整頓します。したがって、次回型と格闘するときは、これらのヘルパーを思い出してください。これらは、TypeScript の使用を簡素化し、もう少し楽しくするために用意されています。コーディングを楽しんでください。あなたの型が常にあなたが必要とするものになりますように! ?

以上がTypeScript のユーティリティ型の力を解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。