Types de Type de réaction / Typescriptf pour un élément qui retourne une entrée ou une textarea

Question

J'essaie de créer un composant de saisie de texte générique pour notre application à l'aide de React et TypeScript. Je veux que cela soit capable d'être un élément d'entrée ou un élément textarea basé sur un accessoire donné. Il semble donc un peu comme ça:

import {TextArea, Input} from 'ourComponentLibrary'

export const Component = forwardRef((props, ref) => {
  const Element = props.type === 'textArea' ? TextArea : Input

  return (
    <Element ref={ref} />
  )
})

Ce code fonctionne bien. Cependant, lorsque vous essayez d'incorporer des types, cela devient un peu de dés. Le type REF doit être soit HTMLInputElement ou HTMLTextAreaElement basé sur la transecte type accessoire. Dans ma tête, ça ressemblerait à ceci:

interface Props {
  ...
}

export const Component = forwardRef<
  HTMLInputElement | HTMLTextAreaElement,
  Props
>((props, ref) => {
  ...
});

Cependant, je sais que ce n'est pas exactement ce dont j'ai besoin. Par conséquent, l'erreur: Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap

En résumé, je veux que les types alignent de sorte que si la version type app s'agisse textArea alors le type ref doit être HTMLTextAreaElement, et si le type de type est input alors le type REF doit être HTMLInputAreaElement

Aucun conseil?

Merci.

Answer 1

Je sais que je suis vraiment en retard pour répondre à cela, mais c'est comme ça que j'ai résolu ce problème. Peut-être que cela aidera quelqu'un d'autre un jour.

type InputElement = 'input' | 'textarea'

export type InputProps<E extends InputElement> = {
    multiline: E extends 'textarea' ? true : false
    /* rest of props */
}

const Component = React.forwardRef(function Component<E extends InputElement>(
    props: InputProps<E>,
    ref: React.Ref<HTMLElementTagNameMap[E] | null>,
) {