ฉันใหม่กับ typescript และฉันต้องการถามคำถามเกี่ยวกับการส่งข้อมูลไดนามิกไปยังองค์ประกอบ React โดยจำกัดการตั้งค่าอุปกรณ์ประกอบฉาก

ฉันพบองค์ประกอบอย่างง่ายภายใต้ข้อ จำกัด ของ "RandomNumberProps" ส่วนประกอบยอมรับ "isPositive", "isNegative" หรือ "isZero"

type RandomNumberType = {
  value: number;
};

type PositiveNumber = RandomNumberType & {
  isPositive: boolean;
  isNegative?: never;
  isZero?: never;
};

type NegativeNumber = RandomNumberType & {
  isNegative: boolean;
  isPositive?: never;
  isZero?: never;
};

type Zero = RandomNumberType & {
  isZero: boolean;
  isPositive?: never;
  isNegative?: never;
};

type RandomNumberProps = PositiveNumber | NegativeNumber | Zero;

export const RandomNumber = ({
  value,
  isPositive,
  isNegative,
  isZero,
}: RandomNumberProps) => {
  return (
    <div>
      {value} {isPositive && "positive"} {isNegative && "negative"}{" "}
      {isZero && "zero"}
    </div>
  );
};

ฉันสามารถใช้องค์ประกอบดังนี้:

<RandomNumber value={10} isPositive></RandomNumber>

จากนั้นฉันพยายามปรับปรุงส่วนประกอบโดยใช้ข้อมูลจำลอง แต่ได้รับข้อผิดพลาดจาก typescript

const item = {
    value: 0,
    isPositive: false,
    isNegative: false,
    isZero: true,
  };

<RandomNumber
    value={item.value}
    {...item.isPositive && { isPositive: true }}
    {...item.isNegative && { isNegative: true }}
    {...item.isZero && { isZero: true }}
></RandomNumber>

ฉันขอทราบได้ไหม:

  1. สาเหตุของปัญหาคืออะไรและจะแก้ไขอย่างไร?
  2. เป็นเรื่องปกติหรือไม่ที่จะตั้งค่าอุปกรณ์ประกอบฉากแบบไดนามิก (isPositive, isNegative, isZero)
  3. สถานการณ์ที่จะใช้คืออะไร
  • อุปกรณ์ประกอบฉากแบบไดนามิก (isPositive, isNegative, isZero)
  • อุปกรณ์ประกอบฉากเดียวกันที่มีค่าต่างกัน (สถานะ: "บวก" | "ลบ" | "ศูนย์")

ขอบคุณ

ไม่พบคำตอบ