函数缺少返回类型 - 在反应（打字稿）代码中

Posted 2023-03-27

【中文标题】函数缺少返回类型 - 在反应（打字稿）代码中

【英文标题】：Missing return type on function - in react (typescript) code

【发布时间】：2019-09-26 05:44:45

【问题描述】：

在我的 App.tsx 中我得到了这个：

function.eslint(@typescript-eslint/explicit-function-return-type) 上缺少返回类型

在我的主类组件中，我得到了这些：

在方法定义 render.eslint(@typescript-eslint/explicit-member-accessibility) 上缺少可访问性修饰符 function.eslint(@typescript-eslint/explicit-function-return-type) 上缺少返回类型

我正在使用带有 TypeScript 的 React。 对于 linter，我使用 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>
        );
    

组件1.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 和操作位于不同的文件夹中。

Component1 和 Component2 相似。

有人知道如何解决这个错误吗？

【问题讨论】：

分享一些相关代码！我们无法猜测您的 App.js 和组件文件的内容

我更新了问题并添加了代码

【参考方案1】：

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

可访问性修饰符是诸如 public/private/protected 之类的东西。对于渲染，这应该是公开的。

所以在render()中添加public这个词：

class Main extends Component 
    public render() 
        ...
    



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

您不应该在此处出现该错误。这告诉你添加一个返回类型来渲染，但是由于你已经扩展了 React.Component 它应该能够从类型定义中加载类型。

您是否已将 @types/react 和 @types/react-dom 添加到您的项目中？

如果没有，npm i -D @types/react @types/react-dom

您的 redux 代码似乎还需要 @types/redux：(npm i -D @types/redux) 从'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

【讨论】：

我找到了消除错误的解决方案。在规则下的 .eslintrc.json 中添加这两行代码： "@typescript-eslint/explicit-function-return-type": "off" 和 "@typescript-eslint/explicit-member-accessibility": "off" 。你认为什么更好？您添加“公共”和其他内容的代码还是仅添加这两条规则？

这取决于个人喜好。如果问题是如何满足 linter，那么上面就是你如何做到这一点。如果你不想要这些规则（imo，那些不是特别有用的 linting 规则），那么是的，把它们关掉！

即使安装了类型，我仍然遇到此错误。

尝试const MyComponent = () : JSX.Element => ... 输入 React Components，截至 2020/02/06 - 类型似乎已经更改了几次。

@NickBull 您的建议也适用于类的 render 方法，它扩展了 React Component。喜欢：render() : JSX.Element ... .