Missing return type on function - in react (typescript) code

Question

In my App.tsx i got this:

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

And in my main class component i got these:

• Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)
• Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

I'm using React with TypeScript. For linter I use ESLint and for code formating Prettier.

I found this info: https://github.com/typescript-eslint/typescript-eslint/blob/v1.6.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md , but I don't know how and where to apply it.

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>
        );
    }
}

Component1.tsc

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' }),
    };
};

Reducer and actions are in separate folders.

Component1 and Component2 are similar.

Does someone knows how to fix this error?

Solution

Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)

Accessibility modifiers are things like public/private/protected. For render, this should be public.

So add the word public to render():

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


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

You shouldn't have that error here. This is telling you to add a return type to render, but since you've extended React.Component it should be able to load the type from the type definitions.

Have you added @types/react & @types/react-dom to your project?

If not, npm i -D @types/react @types/react-dom

Also looks like you need @types/redux for your redux code: (npm i -D @types/redux) import { Dispatch } from 'redux';

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

Final note - I'm not a fan of the public/private accessor rule in ESLint. I would just disable it. More info here (point 1): https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680

Comments

[zrna]

I found solution which removes errors. Adding this two line of code in .eslintrc.json under rules: "@typescript-eslint/explicit-function-return-type": "off" and "@typescript-eslint/explicit-member-accessibility": "off" .What do you think is better? Your code to add "public" and other stuff or just add this 2 rules?

[mbdavis]

It's down to personal preference. If the question is how to satisfy the linter then the above is how you do that. If you don't want the rules (imo, those aren't particularly useful linting rules), then yeah, turn them off!

[Antfish]

I'm still having this error even with the typings installed.

[Nick Bull]

Try const MyComponent = () : JSX.Element => ... for typing React Components, as of 2020/02/06 - the type seems to have changed a few times.

[BairDev]

@NickBull Your suggestion also works for the render method of a class, which extends React Component. Like: render() : JSX.Element { ... }.