Отсутствует тип возврата в функции - в коде реагирования (машинопись) - PullRequest
Новая
       21

Отсутствует тип возврата в функции - в коде реагирования (машинопись)

0 голосов
/ 08 мая 2019

В моем App.tsx я получил это:

  • Отсутствует тип возвращаемого значения в function.eslint (@ typescript-eslint /licit-function-return-type)

И в моем основном компоненте класса я получил это:

  • Отсутствует модификатор доступности в определении метода render.eslint (@ typescript-eslint /licit-member-accessibility)
  • Отсутствует тип возвращаемого значения в function.eslint (@ typescript-eslint /licit-function-return-type)

Я использую React с TypeScript. Для линтера я использую ESLint, а для формирования кода - Prettier.

Я нашел эту информацию: https://github.com/typescript-eslint/typescript-eslint/blob/v1.6.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md, но я не знаю, как и где ее применить.

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

Редуктор и действия находятся в отдельных папках.

Компонент1 и Компонент2 аналогичны.

Кто-нибудь знает, как исправить эту ошибку?

1 Ответ

1 голос
/ 08 мая 2019 
Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)

Модификаторы доступности - это такие вещи, как public / private / protected. Для рендера это должно быть публично.

Итак, добавьте слово public для render (): 

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


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

У вас не должно быть этой ошибки здесь. Это говорит о том, что вы должны добавить возвращаемый тип для рендеринга, но поскольку вы расширили React.Component, он должен иметь возможность загружать тип из определений типов.

Вы добавили в свой проект @ types / реагировать & @ types / реагировать-дом?

Если нет, npm i -D @types/react @types/react-dom

Также похоже, что вам нужен @types/redux для вашего кода избыточности: (npm i -D @types/redux) import {Dispatch} из 'redux'; 

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

Последнее замечание - я не фанат правила доступа к общедоступным / частным в ESLint. Я бы просто отключил это. Более подробная информация здесь (пункт 1): https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680

...