Missing return type on function typescript

Last updated: May 27, 2023
Reading time · 4 min

banner

# Table of Contents

# Missing return type on function TypeScript ESLint error

The TypeScript ESLint error «Missing return type on function. eslint@typescript-eslint/explicit-function-return-type» occurs when you have a function whose return value you haven’t explicitly typed.

To solve the error, explicitly type the function or disable the ESLint rule.

Here is an example of how the error occurs.

Copied!
// ⛔️ Missing return type on function.eslint@typescript-eslint/explicit-function-return-type function example()  console.log('bobbyadz.com'); >

We didn’t explicitly set the function’s return type which caused the issue.

One way to solve the error is to explicitly type the function.

Copied!
function example(): void  console.log('bobbyadz.com'); >

Here are some more examples of explicitly setting the return type of functions.

Copied!
// 👇️ arrow function that returns a string const funcA = (): string =>  return 'bobbyhadz.com'; >; // -------------------------------------------- // 👇️ named function that returns a number function funcB(): number  return 1000; > // -------------------------------------------- // 👇️ arrow function that returns an object const funcC = (): id: number; name: string> =>  return id: 1, name: 'bobby hadz'>; >; // -------------------------------------------- // 👇️ named function that returns an array of objects function funcD(): id: number; name: string>[]  return [ id: 1, name: 'bobby'>, id: 2, name: 'hadz'>, ]; > // -------------------------------------------- // 👇️ class method that doesn't return anything class Example  method(): void  console.log(this); return undefined; > >

If you got the error in a React.js application, set the function’s return type to React.FC .

Copied!
type TagProps =  className?: string; >; export const Tag: React.FCTagProps> = (className = '', children>) => ( span className=`$className> inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-red-50 text-gray-800`> > children> span> );

Here is another example of a function that doesn’t take props.

Copied!
export const Button: React.FC = () =>  return button type="button">Clickbutton>; >;

Make sure to use an arrow function when using the React.FC utility type.

You can also explicitly set the return type of the component to JSX.Element .

Copied!
export const Header = (): JSX.Element =>  return h2>bobbyhadz.comh2>; >;

You can also use the React.ReactElement type.

Copied!
export const Header = (): React.ReactElement =>  return h2>bobbyhadz.comh2>; >;

I’ve also written detailed articles on:

# Disabling the @typescript-eslint/explicit-function-return-type ESLint rule

If you want to disable the @typescript-eslint/explicit-function-return-type ESLint rule, you have to edit your .eslintrc.js config.

Copied!
module.exports =  rules:  '@typescript-eslint/explicit-function-return-type': 'off', >, >;

If you manage your ESLint config in a JSON file (e.g. .eslintrc or .eslintrc.json ), use the following syntax instead.

Copied!
 "rules":  "@typescript-eslint/explicit-function-return-type": "off" > >

Notice that all string properties and values are double-quoted and there are no trailing commas.

You can also enable the rule only for files with certain extensions.

Copied!
 "rules":  // disable the rule for all files "@typescript-eslint/explicit-function-return-type": "off" >, "overrides": [  // enable the rule specifically for TypeScript files "files": ["*.ts", "*.mts", "*.cts", "*.tsx"], "rules":  "@typescript-eslint/explicit-function-return-type": "error" > > ] >

The example disables the ESLint rule for all files and enables it only for TypeScript files.

To disable the rule, set the value of the property to off .

Conversely, to enable the rule, set the value of the property to error .

# Disabling the @typescript-eslint/explicit-function-return-type rule for a single line

If you need to disable the @typescript-eslint/explicit-function-return-type rule for a single line, use the following comment.

Copied!
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type const example = () =>  return 'bobbyhadz.com'; >;

Note that the comment has to be placed directly above the function definition.

# Disabling the @typescript-eslint/explicit-function-return-type for a block of code or an entire file

You can use the following comments to disable the @typescript-eslint/explicit-function-return-type rule for a block of code.

Copied!
/* eslint-disable @typescript-eslint/explicit-function-return-type */ const example = () =>  return 'bobbyhadz.com'; >; /* eslint-enable @typescript-eslint/explicit-function-return-type */ // 👉️ The rule is enabled here

The first comment disables the rule and the second comment enables it.

If you want to disable the rule for the entire file, remove the second comment and make sure to add the first comment at the top of your file.

Copied!
/* eslint-disable @typescript-eslint/explicit-function-return-type */ const example = () =>  return 'bobbyhadz.com'; >;

The comment has to be added at the top of your file before any function definitions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

How to Set the return type of an arrow function in TypeScript
Declare functions returning Object or Array in TypeScript
Declare a function with a Promise return type in TypeScript
How to Declare a Function that throws an Error in TypeScript
[eslint] Delete CR eslint(prettier/prettier) issue
React ESLint Error: X is missing in props validation
eslint is not recognized as an internal or external command
Plugin «react» was conflicted between package.json » eslint-config-react-app
React: Unexpected use of ‘X’ no-restricted-globals in ESLint
TypeScript ESLint: Unsafe assignment of an any value [Fix]
ESLint error Unary operator ‘++’ used no-plusplus [Solved]
ESLint Prefer default export import/prefer-default-export

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

ESLint — missing return type on function react component — Typescript error explanation

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:,This is how I usually declare a component using typescript:,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.

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) => (

const Component: React.FC = (props) => (

Prior to 16.8, you’d instead do:

const Component: React.SFC = (props) => (

Answer by Jaden Barrera

How To Solve Typescript Warning about Missing return type on function.eslint Error ?,Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Typescript Warning about Missing return type on function.eslint in reactjs. So Here I am Explain to you all the possible solutions here.,To Solve Typescript Warning about Missing return type on function.eslint Error Just using the types provided by react; they’ll include the return type. If you’re on version 16.8.0 or later of react.

const Component: React.FunctionComponent = (props) => (

Answer by Theo Molina

The default rule, or any option set, Sponsor Sponsor typescript-eslint/typescript-eslint ,The rule does not use type information, so it does not and cannot interrogate the types of any interfaces or super classes to see what functions are defined.

Answer by Emmaline Hickman

For using the rule above, you should install the eslint-plugin-functional library. Execute the command below to install it.,Basically, React uses import/export, so select the JavaScript modules (import/export) option. Next, you can see the question like the below.,On the ESLint official site and the TypeScript official page, you can see the ESLint rules that you can configure.

npx create-react-app eslint_example --template=typescript

Answer by Vanessa Ball

I have a REACT-STATELESS-COMPONENT, in a project with TypeScript. It has an error, saying, that ,This is how I usually declare a component using typescript:,For a function return type it goes after the arguments:

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 = (< prop >: Props & T) => (  Some Component content.. ) : null> ); LicenseInfo.defaultProps: <>; export default Component;

Answer by Kendall Gardner

«problem» means the rule is identifying code that either will cause an error or create (function) returns an object with methods that ESLint calls to «visit» if a key is a node type or a selector, ESLint calls that visitor function while context.report( < node: node, message: "Missing semicolon", fix: function(fixer) < return fixer.,Prioritize and establish a few rules that are the most important. It is best to have only three or four rules. More than that can overwhelm children, setting them up,Require explicit return types on functions and class methods ( explicit-function-return-type ) Should indicate that no value is returned (void) function test() < return; >that you should use ESLint overrides to only enable the rule on .ts / .tsx files.

Answer by Noel Mullen

This is a valid function, but React will yell at you for returning undefined if `isVisible` is falsey. It’s better to explicitly set a return type to avoid incorrectly returning the wrong value. Yes, typescript will yell at you for attempting to use a Component that returns undefined, but I’m a big fan of the explicit-module-boundary-types eslint rule because of implicit return types causing us problems.,If you explicitly type the operations object you can avoid having to type every function:,Edit: Of course that will break his use of keyof typeof operations. yeah, that is annoying.

If you’re using React.FC and you don’t want to allow children, you can always type your props like this:

Also, while I agree that you shouldn’t set a return type that is too wide, not setting a return type can open up other bugs. For example:

 function Component(props: ) < if (props.isVisible) < return I'm Visible
; > >

Answer by Karson Meyers

Corresponding changes to add LibraryManagedAttributes definition to the JSX namespace in @types/React are still needed. Keep in mind that there are some limitations.,Expansion of spread expressions with tuple types into discrete arguments.,More on FunctionsHow to provide types to functions in JavaScript

If your functions are only able to handle string named property keys, use Extract in the declaration:

Источник

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) => (

const Component: React.FC = (props) => (

Prior to 16.8, you’d instead do:

const Component: React.SFC = (props) => (

Where SFC stands for «stateless functional component». They changed the name, since function components are no longer necessarily stateless.

Solution 2

For a function return type it goes after the arguments:

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.

Solution 3

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 = (< myStringProp, myOtherStringProp >): JSX.Element => < return ( This is My Component
 
 ); >; export default MyComponent;

Solution 4

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:

Solution 5

This rule aims to ensure that the values returned from functions are of the expected type.

The following patterns are considered warnings:

// 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; >>

// 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; >>

Источник