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處理來自父元件的特殊情況。