ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。