显式函数返回类型创建功能组件在打字稿中做出反应

Question

const App: FC = () => {
   const addItem = () => {
      useState([...items, {id:1,name:'something'])
   }
   return<div>hello</div>
}

linter 在我的 App.tsx 上给了我错误。

warning  Missing return type on function  @typescript-eslint/explicit-function-return-type

我必须关闭显式函数返回类型，如何修复上面的代码？ AddItem 不必返回任何东西。

Answer 1

我不确定您使用的是哪个版本的 react，但是使用 TypeScript 和 React 16.8 为您的功能组件提供类型的所谓正确方法是使用React.FC或React.FunctionComponent 。 以下在大多数TsLint配置上运行良好。 您可以尝试在@typescript-eslint上运行的项目中使用以下@typescript-eslint

import * as React from 'react';

const App: React.FC = () => {
   // do something

   return <div>hello</div>;
}

但是，如果上述方法不起作用，您可能需要通过执行以下操作来显式键入返回值：

import * as React from 'react';

const App: React.FC = (): JSX.Element => {
   // do something

   return <div>hello</div>;
}