Typescript | Warning about Missing Return Type of function, ESLint
I'd recommend using the types provided by react; they'll include the return type. If you're on the version 16.8.0 or later of react, do this:
const Component: React.FunctionComponent<Props> = (props) => (
Or use the shorthand:
const Component: React.FC<Props> = (props) => (
Prior to 16.8, you'd instead do:
const Component: React.SFC<Props> = (props) => (
Where SFC stands for "stateless functional component". They changed the name, since function components are no longer necessarily stateless.
For a function return type it goes after the arguments:
({ prop }: Props & T): JSX.Element => {}
JSX.Element
is what TypeScript will infer, it's a pretty safe bet.
If you're curious, you should be able to see what TypeScript infers as the return type by hovering over Component
, this will show the entire signature.
This is how I usually declare a component using typescript:
import * as React from 'react';type MyComponentProps = { myStringProp: String, myOtherStringProp: String};const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myStringProp, myOtherStringProp }): JSX.Element => { return ( <div> <h1>This is My Component</h1> </div> );};export default MyComponent;