ホームページ > ウェブフロントエンド > jsチュートリアル > typescript で条件付きタイプを使用するにはどうすればよいですか?

typescript で条件付きタイプを使用するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-06 12:46:02
オリジナル
485 人が閲覧しました

How to use Conditional Types in typescript?

TypeScript での条件付きプロパティの使用: 実践的な例

TypeScript では、条件付きプロパティを使用して、特定の条件に基づいて適応する柔軟でタイプセーフなインターフェイスを作成できます。これは、特定のプロパティが特定の状況下でのみ存在する必要がある複雑なデータ構造を扱う場合に特に役立ちます。このブログ投稿では、報酬グループを含む実際の例を使用して、条件付きプロパティの使用方法を検討します。

シナリオ

さまざまな種類の報酬を管理するシステムがあると想像してください。各報酬は、「FINANCE」や「SHIPPING」などの特定のタイプにすることができます。

報酬の種類に応じて、特定の属性を含めるか除外する必要があります。たとえば、金銭的報酬には財務属性を含める必要があり、配送報酬には配送属性を含める必要があります。さらに、特定の属性が報酬タイプと条件に基づく報酬にのみ含まれるようにしたいと考えています。

型の定義

まず、使用する基本的な型とインターフェイスを定義しましょう:

type RewardType = "FINANCE" | "SHIPPING" | "OTHER"; // Example values for RewardType

interface ItemConditionAttribute {
  // Define the properties of ItemConditionAttribute here
}

interface RewardAttributes {
  // Define the properties of RewardAttributes here
}

interface ShippingAttributes {
  // Define the properties of ShippingAttributes here
}

interface FinanceAttributes {
  // Define the properties of FinanceAttributes here
}

interface RewardGroupBase {
  groupId: number;
  rewardType: RewardType;
  rewardOn: string;
  itemConditionAttributes: ItemConditionAttribute[];
}
ログイン後にコピー

条件型の使用

rewardType が「FINANCE」の場合にのみfinanceAttributes が含まれ、rewardOn が「Finance」の場合にはrewardAttributes が含まれないようにするには、条件付きタイプを使用できます。 RewardGroup タイプを定義する方法は次のとおりです:

type RewardGroup = RewardGroupBase & (
  { rewardType: "FINANCE"; rewardOn: "Finance"; financeAttributes: FinanceAttributes; rewardAttributes?: never; shippingAttributes?: never } |
  { rewardType: "SHIPPING"; rewardOn: Exclude<string, "Finance">; shippingAttributes: ShippingAttributes; financeAttributes?: never; rewardAttributes: RewardAttributes } |
  { rewardType: Exclude<RewardType, "FINANCE" | "SHIPPING">; rewardOn: Exclude<string, "Finance">; financeAttributes?: never; shippingAttributes?: never; rewardAttributes: RewardAttributes }
);
ログイン後にコピー

説明

ベースインターフェース:
RewardGroupBase には、報酬の種類に関係なく常に存在する共通のプロパティが含まれています。

条件型:
条件付きプロパティを処理するには、3 つのタイプの共用体を使用します。

  • rewardType が「FINANCE」で、rewardOn が「Finance」の場合、financeAttributes が必要です。
    およびrewardAttributesとshippingAttributesは許可されません。

  • rewardType が「SHIPPING」で、rewardOn が「Finance」でない場合、shippingAttributes が必須で、financeAttributes は許可されませんが、rewardAttributes は含まれます。

  • 「Finance」ではない他のrewardTypeとrewardOnの場合、rewardAttributesは含まれますが、financeAttributesもshippingAttributesも含まれません。

使用例

RewardGroup タイプを実際に使用する方法は次のとおりです。

const financeReward: RewardGroup = {
  groupId: 1,
  rewardType: "FINANCE",
  rewardOn: "Finance",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ }
};

const shippingReward: RewardGroup = {
  groupId: 2,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  shippingAttributes: { /* properties */ },
  rewardAttributes: { /* properties */ }
};

// This will cause a TypeScript error because financeAttributes is not allowed for rewardType "SHIPPING"
const invalidReward: RewardGroup = {
  groupId: 3,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ } // Error: financeAttributes
};
ログイン後にコピー

以上がtypescript で条件付きタイプを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート