6
votes

"Type de retour manquant sur la fonction" pour chaque méthode de classe React

Je suis un composant React avec état dans mon projet Typescript. Je le lint avec ESLint en utilisant @typescript-eslint/parser et @typescript-eslint/eslint-plugin . J'ai activé la règle @typescript-eslint/explicit-function-return-type .

Mon composant ressemble à ceci:

interface Props = {
  name: string;
}

interface State = {
  score: number
}

class Person extends Component<Props, State> {
  state = {
    score: 2,
  };

  componentDidMount() {
    ...
  }

  render() {
    ...
  }
}

Dans le composant ci-dessus, j'obtiens l'erreur ESLint sur les méthodes componentDidMount et de render :

Missing return type on function - @typescript-eslint/explicit-function-return-type

J'aime assez la règle de lint en général, mais je n'ai sûrement pas à déclarer un type de retour pour toutes ces méthodes React. J'ai installé @types/react et @types/react-dom , donc ces types de retour ne sont-ils pas déjà couverts?

javascript reactjs typescript

7 commentaires

Avez-vous vérifié les paramètres d'une option permettant d'autoriser les types hérités?

@AvinKavish Je n'ai pas vérifié mais je le ferai maintenant. Mes extensions ESLint sont: "plugin:react/recommended", "plugin:@typescript-eslint/recommended" alors aurait-il bien que ce soit par défaut?!

Oh, je voulais dire dans le plugin que vous avez installé, sans parler de je viens de vérifier, il n'y avait pas une telle option. Vous voudrez peut-être envisager d'ouvrir un numéro sur GitHub et de demander directement aux auteurs.

@AvinKavish D'accord, merci pour votre aide

Cela pourrait aider partiellement, github.com/typescript-eslint/typescript-eslint/issues/493

Je pense qu'il doit y avoir un bug avec ça. Même avec les options supplémentaires pour autoriser les types inférés, des erreurs se produisent uniquement sur les méthodes React et non sur les miennes personnalisées, donc si quelque chose les options supplémentaires aggravent les choses!

Continuons cette discussion en chat .

3 Réponses :

0
votes

Je peux me tromper ici car je n'ai pas personnellement utilisé @typescript-eslint/explicit-function-return-type mais son nom sonne comme si vous aviez besoin d'un return dans chaque fonction écrite, y compris les méthodes de cycle de vie. N'oubliez pas que ESLint et React ne sont pas les mêmes. ESLint exécute simplement votre code pour signaler les erreurs potentielles . La bibliothèque React devrait toujours pouvoir s'exécuter sans problème si vous n'incluez pas ces instructions de return

2 commentaires

Je ne pense pas que vous ayez compris la question. Il dit que l'inférence de type devrait fonctionner sur la classe car il hérite de Component qui définit déjà ces méthodes avec des types de retour

Il s'agit d'un problème épineux, pas de savoir si le code s'exécutera ou non. @types/react définit le type de componentDidMount avec un type de retour. Alors, comment se fait-il de le peloter en me disant de le définir à nouveau?

2
votes

Je viens de le faire fonctionner en ajoutant la règle dans .eslintrc.json avec { "allowTypedFunctionExpressions": true }

.eslintrc.json

"@typescript-eslint/eslint-plugin": "^1.10.2",
"@typescript-eslint/parser": "^1.10.2",
"eslint": "^6.0.0",

les versions

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      { "allowTypedFunctionExpressions": true }
    ]
  }
}

0 commentaires

1
votes

Essayez d'écrire le type de retour pour la fonction de rendu comme

render(): JSX.Element {
  // render code
}

Cela fonctionne pour moi!

0 commentaires