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?

Answer 1

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