2
votes

Comment écrire la surcharge de fonction de React Functional Component + TypeScript?

Je sais comment écrire la surcharge de fonctions React Functional Component et TypeScript +.

Mais lorsque ces deux éléments sont combinés, je suis confus!

Voici un exemple de code minimum pour illustrer ce que je veux à faire:

<Example type="type1" name="Joseph"/>
// => <div> type1, Joseph </div>

<Example type="type2" age={18}/>
// => <div> type2, 18 </div>

<Example type="type3" name="Joseph" age={18}/>
// => Compile Error!

L'utilisation de cet exemple devrait ressembler à ceci:

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

// How do I properly hook FunctionComponent + PropType1 + PropType2?
// It's called FunctionComponent right?

function Example({ type, name, age }) {
  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

Comment raccorder correctement FunctionComponent + PropType1 + PropType2?

Et ça s'appelle FunctionComponent, n'est-ce pas?

javascript reactjs typescript function

0 commentaires

3 Réponses :

2
votes

Vous pouvez essayer Types d'union et vérifier le type d'accessoires composant.

<Example type="type1" name="Joseph"/>
// => <div> type1, Joseph </div>

<Example type="type2" age={18}/>
// => <div> type2, 18 </div>

<Example type="type3" name="Joseph" age={18}/>
// => Compile Error: Type '"type3"' is not assignable to type '"type1" | "type2"'

<Example type="type1" age={18}/>
// => Compile Error

Utilisation

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropType1 | PropType2) {
  if (props.type === 'type1') {
    return (
      <div>
        {props.type}, {props.name}
      </div>
    );
  } else {
    return (
      <div>
        {props.type}, {props.age}
      </div>
    );
  }
}

export default Example;

Démo

1 commentaires

Cela semble fonctionner! Merci, j'attendrai encore quelques secondes s'il existe une solution d'implémentation de surcharge de fonctions.

2
votes

Essayez d'utiliser FC , composant fonctionnel, avec Type d'union .

FC type fournit des propriétés supplémentaires, par exemple displayName , defaultProps et ainsi de suite, pour rendre votre composant fonctionnel plus sûr.

Le type Union peut fournir des fonctionnalités similaires de surcharge de fonction. Il limite la combinaison de propriétés, qui choisit soit PropType1 ou PropType2

const Example: FC<PropType1 | PropType2> = (props) => {
  if (props.type === 'type1') {
    return (
      <div>
        {props.type}, {props.name}
      </div>
    );
  } else {
    return (
      <div>
        {props.type}, {props.age}
      </div>
    );
  }
}

0 commentaires

0
votes

Je l'ai résolu moi-même

import React, {
    PropsWithChildren,
    ReactElement
} from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropsWithChildren<PropType1>): ReactElement | null;
function Example(props: PropsWithChildren<PropType2>): ReactElement | null;

function Example(props: {
  type: 'type1' | 'type2';
  name?: string;
  age?: number
}) {

  const {type, name, age} = props

  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

0 commentaires