如何让TypeScript强制React组件必须传入三个时间属性中的恰好两个？

你的问题出在当前的联合类型定义上：当你传入三个属性时，组件props同时满足所有三个分支的类型约束（因为每个分支只要求存在对应两个属性，不限制第三个），所以TypeScript不会报错。要解决这个问题，需要给每个分支明确排除第三个属性，通过将第三个属性的类型设为never来实现。

修改后的类型定义如下：

type RangeProps =
  | {
      from: Date;
      to: Date;
      duration?: never; // 禁止传入duration
    }
  | {
      from: Date;
      duration: number;
      to?: never; // 禁止传入to
    }
  | {
      duration: number;
      to: Date;
      from?: never; // 禁止传入from
    };

原理说明 #

• 每个分支除了声明必填的两个属性，还通过?: never明确指定第三个属性不能存在（或只能是undefined/never类型）。
• 当你传入三个属性时，props会同时与所有分支的类型冲突（比如同时传入from/to/duration时，第一个分支要求duration是never，但实际传入的是number，类型不匹配），TypeScript就会触发报错。

验证效果 #

• 合法场景：只传from+to、from+duration、to+duration，均能通过类型检查。
• 非法场景：传入全部三个属性，TypeScript会提示类似类型“{ from: Date; to: Date; duration: number; }”不能赋值给类型“RangeProps”的错误。

内容的提问来源于stack exchange，提问作者callum