I have a REACT-STATELESS-COMPONENT, in a project with TypeScript. It has an error, saying, that
Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)
I am not sure what it wants me to do. Here is my code:
import React, { Fragment} from 'react';
import IProp from 'dto/IProp';
export interface Props {
prop?: IProp;
}
const Component = <T extends object>({ prop }: Props & T) => (
<Fragment>
{prop? (
<Fragment>
Some Component content..
</Fragment>
) : null}
</Fragment>
);
LicenseInfo.defaultProps: {};
export default Component;
Can you tell me what I need to do. I need to read about TS, but currently I don't get it at all. And I can't commit right now cause of this.
5 Answers
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;
If you use @types/react you don't have to provide return types for React components. You can disable this rule for react components like this. Just add this to your .eslintrc.js:
overrides: [
{
files: ['*.jsx', '*.tsx'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': ['off'],
},
},
],
This rule aims to ensure that the values returned from functions are of the expected type.
The following patterns are considered warnings:
Problem :
// Should indicate that no value is returned (void)
function test() {
return;
}
// Should indicate that a number is returned
var fn = function () {
return 1;
};
// Should indicate that a string is returned
var arrowFn = () => 'test';
class Test {
// Should indicate that no value is returned (void)
method() {
return;
}
}
solution :
// No return value should be expected (void)
function test(): void {
return;
}
// A return value of type number
var fn = function (): number {
return 1;
};
// A return value of type string
var arrowFn = (): string => 'test';
class Test {
// No return value should be expected (void)
method(): void {
return;
}
}
Link :
