函数上缺少返回类型-在React(TypeScript)代码中 [英] Missing return type on function - in react (typescript) code
问题描述
在我的App.tsx中我得到了这个信息:
In my App.tsx i got this:
- 在function.eslint(@ typescript-eslint / explicit-function上缺少返回类型-return-type)
在我的主要课程组件中,我得到了这些内容:
And in my main class component i got these:
- 方法定义render.eslint(@ typescript-eslint / explicit-member-accessibility)上缺少可访问性修饰符
- 在function.eslint上缺少返回类型@ typescript-eslint / explicit-function-return-type)
我正在使用带有TypeScript的React。
对于短绒毛衫,我使用ESLint进行代码格式化。
I'm using React with TypeScript. For linter I use ESLint and for code formating Prettier.
我找到了以下信息: https://github.com/typescript-eslint /typescript-eslint/blob/v1.6.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md ,但我不知道如何以及在何处使用它。
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
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和Component2相似。
Component1 and Component2 are similar.
有人知道如何解决此错误吗?
Does someone knows how to fix this error?
推荐答案
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.
因此,将public一词添加到render():
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)
您不应该在这里遇到该错误。这是告诉您添加一个返回类型以进行渲染,但是由于您已经扩展了React.Component,它应该能够从类型定义中加载该类型。
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.
具有您添加了@ types / react& @ types / react-dom到您的项目?
Have you added @types/react & @types/react-dom to your project?
如果没有,则 npm i -D @ types / react @ types / react-dom
看起来您还需要 @ types / redux
作为您的redux代码:( npm i -D @ types / redux
)
从 redux导入{Dispatch};
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' }),
};
};
最后的注释-我不喜欢ESLint中的公共/私有访问者规则。我只是禁用它。更多信息在这里(第1点): https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-react-5799488d6680
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
这篇关于函数上缺少返回类型-在React(TypeScript)代码中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!