React und TypeScript – Verwenden Sie bedingte Parametertypen, wenn Requisiten vorhanden sind

Question

In React versuche ich, einen bedingten Typ in einem Funktionsparameter festzulegen, basierend darauf, ob eine Requisite in der Komponente übergeben wird.

Hier ist ein Beispiel, ich habe diese Komponente:

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

Was ich tun möchte, ist, wenn „objectKey“ als Requisiten übergeben wird, dann ist der Typ des „value“-Parameters in der Funktion „handleDateChange“ {[x: string]: Dayjs }, andernfalls ist er value: Dayjs.

Weiß jemand, wie man das umsetzt?

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处理来自父组件的特殊情况。