React dan TypeScript - Gunakan jenis parameter bersyarat jika props wujud

Question

Dalam React, saya cuba menetapkan jenis bersyarat dalam parameter fungsi berdasarkan sama ada prop diluluskan dalam komponen.

Berikut adalah contoh, saya mempunyai komponen ini:

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

Apa yang saya mahu lakukan ialah, jika "objectKey" diluluskan sebagai props, maka jenis parameter "value" dalam fungsi handleDateChange ialah { [x: string]: Dayjs }, jika tidak ia akan menjadi nilai: Dayjs.

Adakah sesiapa tahu bagaimana untuk melaksanakan ini?

Answer 1

Anda boleh mencapai kesan yang serupa melalui lebihan fungsi.

// 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;
}) {
  // ...
}

Menggunakan kaedah ini, DatePicker hanya boleh dipanggil mengikut definisi anda, tetapi bahagian pelaksanaan tidak mengetahui perkaitan antara handleDateChange dan objectKey, jadi ia masih perlu dikendalikan secara eksplisit.

Tanpa mengetahui sebarang butiran tentang DatePicker, saya fikir adalah lebih baik untuk hanya menggunakan tandatangan dan biarkan komponen induk membuat pelarasan pada DatePicker daripada meminta DatePicker mengendalikan kes khas daripada komponen induk.