web-dev-qa-db-fra.com

Type de retour manquant sur la fonction - Dans le code de réact (TypeScript)

Dans mon application, j'ai eu ceci:

  • Type de retour manquant sur la fonction.eslint (@ Typescript-Eslint/Explicit-Fonction-Type de retour)

Et dans ma composante de classe principale, je les ai eu:

  • Modificateur d'accessibilité manquante sur la définition de la méthode Render.eslint (@ TypeScript-Eslint/Explicit-Member-accessibilité)
  • Type de retour manquant sur la fonction.eslint (@ Typescript-Eslint/Explicit-Fonction-Type de retour)

J'utilise React avec dactylographie. Pour Linter, j'utilise Eslint et pour le code formant plus jolie.

J'ai trouvé ces informations: https://github.com/typescript -eslint/typescriptfeSlint/blob/v1.6.0/packages/eslint-plugin/docs/roules/explicite-function-return-type.md , mais je ne sais pas comment et où l'appliquer.

App.tsc

class Main extends Component {
    render() {
        return (
            <Router>
                <div>
                    <Link to="/">Home</Link>
                    <br />
                    <Link to="/component1">Component1</Link>
                    <br />
                    <Link to="/component2">Component2</Link>

                    <Route exact path="/" render={() => <h1>Home Page</h1>} />
                    <Route path="/component1" component={Component1} />
                    <Route path="/component2" component={Component2} />
                </div>
            </Router>
        );
    }
}

Composant1.tscc

interface Props {
    number: number;
    onNumberUp: any;
    onNumberDown: any;
}

const Component1 = (props: Props): JSX.Element => {
    return (
        <div>
            <h1>Component1 content</h1>
            <p>Number: {props.number}</p>
            <button onClick={props.onNumberDown}>-</button>
            <button onClick={props.onNumberUp}>+</button>
        </div>
    );
};

const mapStateToProps = (state: any) => {
    return {
        number: state.firstReducer.number,
    };
};

const mapDispachToProps = (dispach: any) => {
    return {
        onNumberUp: () => dispach({ type: 'NUMBER_UP' }),
        onNumberDown: () => dispach({ type: 'NUMBER_DOWN' }),
    };
};

Réducteur et actions sont dans des dossiers séparés.

Le composant1 et le composant2 sont similaires.

Est-ce que quelqu'un sait comment corriger cette erreur?

reactjstypescripteslintprettier
6
zrna
Missing accessibility modifier on method definition render.eslint(@TypeScript-eslint/explicit-member-accessibility)

Les modificateurs d'accessibilité sont des choses comme publique/privée/protégée. Pour rendre, cela devrait être public.

Ajoutez donc le mot public au rendu ():

class Main extends Component {
    public render() {
        ...
    }
}


Missing return type on function.eslint(@TypeScript-eslint/explicit-function-return-type)

Vous ne devriez pas avoir cette erreur ici. Cela vous dit d'ajouter un type de retour au rendu, mais comme vous avez étendu réact.component, il devrait pouvoir charger le type à partir des définitions de type.

Avez-vous ajouté @ Types/React & @ Types/React-Dom sur votre projet?

Sinon, npm i -D @types/react @types/react-dom

On dirait aussi que vous avez besoin @types/redux Pour votre code Redux: (npm i -D @types/redux) Importer {Dispatch} de 'Redux';

const mapDispatchToProps = (dispatch: Dispatch<any>) => {
    return {
        onNumberUp: () => dispatch({ type: 'NUMBER_UP' }),
        onNumberDown: () => dispatch({ type: 'NUMBER_DOWN' }),
    };
};

Note finale - Je ne suis pas fan de la règle d'accessoir public/privé à Eslint. Je voudrais juste le désactiver. Plus d'infos ici (point 1): https://medium.com/@martin_hotell/10-typescript-protscript-pattat-patterns-withro-hithout-react-5799488d668

1
mbdavis