React et TypeScript - Utilisez des types de paramètres conditionnels si des accessoires existent

Question

Dans React, j'essaie de définir un type conditionnel dans un paramètre de fonction en fonction du fait qu'un accessoire est passé dans le composant.

Voici un exemple, j'ai ce composant :

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

Ce que je veux faire, c'est que si "objectKey" est passé comme accessoire, alors le type de paramètre "value" dans la fonction handleDateChange sera { [x: string]: Dayjs }, sinon ce sera valeur: Dayjs.

Est-ce que quelqu'un sait comment mettre en œuvre cela ?

Answer 1

Vous pouvez obtenir des effets similaires grâce à une surcharge de fonctions.

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

En utilisant cette méthode, DatePicker ne peut être appelé que selon votre définition, mais la partie implémentation ne connaît pas l'association entre handleDateChange et objectKey, elle doit donc toujours être gérée explicitement.

Sans connaître aucun détail sur DatePicker, je pense qu'il est préférable d'utiliser simplement une signature et de laisser le composant parent apporter des ajustements au DatePicker plutôt que de laisser le DatePicker gérer les cas particuliers du composant parent.