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; shippingAttributes: ShippingAttributes; financeAttributes?: never; rewardAttributes: RewardAttributes } |
  { rewardType: Exclude; rewardOn: Exclude; 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
};