React和TypeScript - 如果props存在，则使用条件参数类型

Question

在React中，我正在尝试根据组件中是否传递了prop来设置一个条件类型在函数参数中。

这是一个例子，我有这个组件：

const DatePicker = ({
  handleDateChange,
  value,
  objectKey,
}: {
  handleDateChange: (value: Dayjs | { [x: string]: Dayjs }) => void;
  value: Dayjs;
  objectKey?: string;
}) => JSX

我想要做的是，如果"objectKey"作为props传递，那么handleDateChange函数中的"value"参数的类型将是{ [x: string]: Dayjs }，否则它将是value: Dayjs。

有人知道如何实现这个吗？

Answer 1

你可以通过函数重载来实现类似的效果。

// first overload signature
function DatePicker({
  handleDateChange,
  value,
}: {
  handleDateChange: (value: Dayjs) => void;
  value: Dayjs;
}): JSX;
// second overload signature
function DatePicker({
  handleDateChange,
  value,
  objectKey,
}: {
  handleDateChange: (value: { [x: string]: Dayjs }) => void;
  value: Dayjs;
  objectKey?: string;
}): JSX;
// implementation
function DatePicker({
  handleDateChange,
  value,
  objectKey,
}: {
  handleDateChange: ((value: Dayjs) => void) | ((value: { [x: string]: Dayjs }) => void);
  value: Dayjs;
  objectKey?: string;
}) {
  // ...
}

使用这种方法，DatePicker只能按照你的定义进行调用，但是实现部分不知道handleDateChange和objectKey之间的关联，因此仍然需要显式处理。

不了解DatePicker的任何细节，我认为最好只使用一个签名，让父组件对DatePicker进行调整，而不是让DatePicker处理来自父组件的特殊情况。