0
votes

Comment déclarer des fonctions avec une syntaxe normale et utiliser des enfants en réaction avec TS?

Je sais qu'il peut être tapé de plusieurs manières, dont deux en utilisant l'interface React.FC<YourInterface> ou en déclarant explicitement dans une interface le type d' enfants comme JSX.Element ou React.Node . Jusqu'à présent, je dois faire ceci:

const MyComponent: React.FC<MyInterface> = function({ x, children }) {} export default Mycomponent

Par syntaxe normale, j'entends la export default function Foo({ x, children }) . Sans avoir à déclarer au préalable une constante ou une variable. J'ai déjà essayé avec la function Foo({ x, children }): React.FC<MyInterface> mais le transpilateur TS donne une erreur.

Tous les tutoriels que j'ai vus sont peu nombreux et utilisent toujours la syntaxe de la fonction flèche. Je me sens juste plus à l'aise avec la syntaxe normale

reactjs typescript

0 commentaires

3 Réponses :

0
votes

Je ne suis pas sûr d'avoir bien compris ce que vous essayez de faire, mais peut-être que cela pourrait fonctionner

export default function Foo(props: YourInterface): JSX.Element {}

2 commentaires

J'ai déjà essayé cela, également avec React.FC , mais le transpilateur TS donne une erreur et mon éditeur de code linter remarque "les enfants ont n'importe quel type implicite"

Pas à mon bureau pour le moment, mais si vous essayez d'ajouter React.FC comme type réaccordé au lieu de JSX.Element?

1
votes

Ainsi, avec export default function () {...} d' export default function () {...} vous pouvez utiliser l'assertion de type avec le mot clé as . N'oubliez pas les parenthèses.

import React from 'react';

interface Props {
  text: string;
}

export default (function ({ text, children }) {
  return <div></div>;
} as React.FC<Props>);

Et réagir par exemple:

export default (function () {
  return 1 + 1;
} as () => number);

Cependant, à mon avis, il vaut mieux:

paramètres de type et valeur de retour, ou
créer une variable et faire une assertion de type normal dessus.

0 commentaires

1
votes

Vous pouvez essayer ceci pour un composant fonctionnel sans flèche:

interface YourInterface {
  x: string
}

export default function Foo({
  x,
  children,
}: React.PropsWithChildren<YourInterface>) {}

J'ai déjà essayé avec la fonction Foo ({x, children}): React.FC mais le transpilateur TS donne une erreur.

ans: Étant donné que votre composant est une fonction qui ne renvoie pas JSX , il renvoie un composant fonctionnel.

0 commentaires