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?
3 Réponses :
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
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?
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 } ] } }
Essayez d'écrire le type de retour pour la fonction de rendu comme
render(): JSX.Element { // render code }
Cela fonctionne pour moi!
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 .