如何在 React Typescript 中允许某些道具组合？

Question

我有两个枚举：

enum Drink = {
 WATER = 0,
 COFFEE = 1,
}

enum Sugar = {
 LITTLE = 0,
 ALOT = 1,
}

enum Temperature = {
 COLD = 0,
 HOT = 1,
}

我想要一个反应组件，它只接受这个枚举的某些组合并拒绝其他的。

比如我想接受：

WATER & {HOT | COLD}
COFFEE & {LITTLE | ALOT}

但我想拒绝：

WATER & SUGAR
or
COFFEE & COLD

我尝试制作这种类型：

type someType = {
   drink: Drink.WATER
   temperature: Temperature.HOT | Temperature.COLD
} | 
{
   drink: Drink.COFFEE
   sugar: Sugar.LITTLE | Sugar.ALOT
}

但这并不好。

我希望将它们作为单独的道具，例如当用户尝试键入时：

<SpecificCompo drink={water} /*<-- here don't display sugar={} or if the user tries to type it, i want typescript to complain that type of water doesn't match with sugar --> */ />

对此有什么帮助吗？

Answer 1

enum Drink {
    WATER = 0,
    COFFEE = 1,
}

enum Sugar {
    LITTLE = 0,
    ALOT = 1,
}

enum Temperature {
    COLD = 0,
    HOT = 1,
}

interface BaseProps {
    // Whatever props
}

interface WaterProps extends BaseProps {
    drink: Drink.WATER,
    temperature: Temperature.HOT | Temperature.COLD
}

interface CoffeeProps extends BaseProps {
    drink: Drink.COFFEE,
    sugar: Sugar.LITTLE | Sugar.ALOT
}

export type ISpecificCompoProps = WaterProps | CoffeeProps;