Edit
Per @Thomas comment, in newer TS compilers, we can simply do:
const foo = <T,>(x: T) => x;
Original Answer
The full example explaining the syntax referenced by Robin... brought it home for me:
Generic functions
Something like the following works fine:
function foo<T>(x: T): T { return x; }
However using an arrow generic function will not:
const foo = <T>(x: T) => x; // ERROR : unclosed `T` tag
Workaround: Use extends on the generic parameter to hint the compiler that it's a generic, e.g.:
const foo = <T extends unknown>(x: T) => x;
Top answer 1 of 16
1180
Edit
Per @Thomas comment, in newer TS compilers, we can simply do:
const foo = <T,>(x: T) => x;
Original Answer
The full example explaining the syntax referenced by Robin... brought it home for me:
Generic functions
Something like the following works fine:
function foo<T>(x: T): T { return x; }
However using an arrow generic function will not:
const foo = <T>(x: T) => x; // ERROR : unclosed `T` tag
Workaround: Use extends on the generic parameter to hint the compiler that it's a generic, e.g.:
const foo = <T extends unknown>(x: T) => x;
2 of 16
364
If you're in a .tsx file you cannot just write <T>, but this works:
const foo = <T, >(x: T) => x;
As opposed to the extends {} hack, this hack at least preserves the intent.
Medium
medium.com › @szaranger › how-to-use-generics-with-arrow-functions-in-typescript-38be8fb6b175
How to use Generics with Arrow functions in TypeScript | by Sean Amarasinghe | Medium
June 5, 2024 - 💡 The generics are specified right before the function’s parameters using arrow brackets. The syntax for calling a generic function is the same. We don’t have to explicitly provide the generic when calling the function. TypeScript would be able to infer the type of the generic based on the type of the passed in argument.
Cannot define an arrow function with a single generic type parameter that has a default value with JSX
Bug Report 🔎 Search Terms typescript jsx tsx generic arrow function default value 🕗 Version & Regression Information This is the behavior in every version I tried, and I reviewed the FAQ for en... More on github.com
6
December 8, 2021Generic parameter in arrow function in .tsx file causes an error
Bug Report 🔎 Search Terms typescript, generic, .tsx, react, function 🕗 Version & Regression Information This is the behavior in every version I tried from 4.0.5+. ⏯ Playground Link Playground l... More on github.com
2
August 26, 2021How to return a generic type from a function?
type FooRet = (value: U) => U | undefined function foo(someOtherValue: unknown): FooRet { return (value: U): U | undefined => { return someOtherValue === value ? value : undefined } } More on reddit.com
17
14
December 18, 2022typescript - why generic type arrow function shows error? - Stack Overflow
That's not the correct syntax. A generic function has it's generic parameter just before the opening ( character. More on stackoverflow.com
Videos
Advanced TypeScript Arrow Functions, Generics & Higher ...
08:15
Generics in Array and Arrow functions in Typescript - YouTube
11:50
#13 - Arrow Functions in TypeScript - YouTube
05:38
18 Arrow Function - TypeScript Tutorial For Beginners - YouTube
13:07
Advanced TypeScript Arrow Functions, Generics & Higher ...
Ashby
ashbyhq.com › blog › engineering › generic-arrow-function-in-tsx
Using Generic Arrow Functions in .tsx Files | Ashby
July 23, 2021 - In standard Typescript, you can make an arrow function generic by declaring the type variable before the arguments:
Tim Mousk
timmousk.com › blog › typescript-arrow-function-generic
How To Make An Arrow Function Generic In TypeScript? – Tim Mouskhelichvili
March 6, 2023 - In TypeScript, generics allow ... to write reusable code. To make an arrow function generic, you must pass a generic argument before the function parameters....
Graphite
graphite.com › guides › typescript-generics
TypeScript generics - Graphite
In this example, genericArrowFunction is a generic arrow function that takes a value of type T and returns the same value.
Bobby Hadz
bobbyhadz.com › blog › typescript-arrow-function-generic
Using generics in Arrow functions in TypeScript | bobbyhadz
You can use a generic in an arrow function by setting it right before the function's parameters. The generic can be passed when the function is invoked.
Convex
convex.dev › core concepts › functions & methods › arrow
Arrow | TypeScript Guide by Convex
Generics make your arrow functions adaptable to different data types while maintaining strict type checking, which is essential for building reusable utilities.
Carl Rippon
carlrippon.com › generic-arrow-functions
Generic Arrow Functions
September 2, 2020 - This is enough for the transpilation process to treat the angle brackets as generic parameters. Arguably the simplest solution is to use a regular function as opposed to an arrow function: ... It works like a treat and no tricks! ... A comprehensive guide to building modern React applications with TypeScript.
GitHub
github.com › microsoft › TypeScript › issues › 47062
Cannot define an arrow function with a single generic type parameter that has a default value with JSX · Issue #47062 · microsoft/TypeScript
December 8, 2021 - Cannot define an arrow function with a single generic type parameter that has a default value with JSX#47062
Author giladgo
GitHub
github.com › microsoft › TypeScript › issues › 45589
Generic parameter in arrow function in .tsx file causes an error · Issue #45589 · microsoft/TypeScript
August 26, 2021 - The compiler doesn't recognize the generic parameter when using an arrow function in a .tsx file and gives an error like if you are using a JSX element as a function.
Author danfma
YouTube
youtube.com › watch
Generics with arrow functions in Typescript - YouTube
Generics with arrow functions in Typescript explains how to start with generics and we go even a bit further by using it in an arrow function and in a typesc...
Published May 15, 2022
Tutorial Teacher
tutorialsteacher.com › typescript › arrow-function
TypeScript Arrow Functions
Parameters are passed in the parenthesis (), and the function expression is enclosed within the curly brackets . ... In the above example, sum is an arrow function. (x:number, y:number) denotes the parameter types, :number specifies the return type.
GeeksforGeeks
geeksforgeeks.org › typescript › how-to-declare-the-return-type-of-a-generic-arrow-function-to-be-an-array
How to Declare the Return Type of a Generic Arrow Function to be an Array ? - GeeksforGeeks
July 23, 2025 - The syntax for declaring the return type of a generic arrow function to be an array: const function_name = (): Array<RetrunType> => { // Function Body } EXample: Creating an array of squared values from 1 to 25 using TypeScript arrow function with explicit return type.
Reddit
reddit.com › r/typescript › how to return a generic type from a function?
r/typescript on Reddit: How to return a generic type from a function?
December 18, 2022 -
For example, in typescript I create a function that returns a generic arrow function with a declaration that can look something like this:
function foo(someOtherValue: any): <U>(value: U) => U | undefined {
return <U>(value: U) => U | undefined {
return someOtherValue === value ? value : undefined;
};
}However, I would like to have a generic type that represents the above generic arrow function and have it being returned... Something like this:
type FooRet<U> = (value: U) => U | undefined;
function foo(someOtherValue: any): <U>FooRet<U> {
return <U>(value: U) => U | undefined {
return someOtherValue === value ? value : undefined;
}
}Obviously the above doesn't compile, hence my question. I tried to look it up online, but I'm not sure how to describe my problem to get the answer I'm looking for... Sorry if this has been answered already.
Top answer 1 of 6
5
type FooRet = (value: U) => U | undefined function foo(someOtherValue: unknown): FooRet { return (value: U): U | undefined => { return someOtherValue === value ? value : undefined } }
2 of 6
4
I'm not entirely sure what you are trying to do, but this was my way of making sense of it. That said I rarely ever have to use generics, and I have no formal training in TS. function buildGenericFunc(myOtherValue: any) { return (myValue: T):T|undefined => { return myOtherValue === myValue ? myValue : undefined } } Basically the only difference is that I carry the generic type from the root function into the lambda. I also skipped defining the return as it's inferred anyway.
TutorialsPoint
tutorialspoint.com › typescript › typescript_arrow_functions.htm
TypeScript - Arrow Functions
TypeScript - null vs. undefined ... Arrow functions are a concise way to write the anonymous functions in TypeScript. They are introduced in ES6 (ECMAScript 2015). They offer a shorter and more readable syntax compared to traditional function ...
BaseOF
baseof.dev › generic-arrow-functions-in-typescript
Demystifying Generic Arrow Functions in TypeScript | BaseOF
August 8, 2024 - In this guide, you’ll learn how to create Typescript arrow functions generic.
Learn TypeScript
learntypescript.dev › 06 › l2-generic-functions
Creating generic functions | Learn TypeScript
Generic parameters can be passed into arrow functions as well: Copy · const someVar = <T1, T2, ...>(...) => { ... } The type parameters are placeholders for the real types. We can choose any names we want for these.
Functionalbytes
functionalbytes.com › posts › typescript-generic-on-an-arrow-function
Functional Bytes - TypeScript: Generic on an Arrow Function
With TypeScript, there is risk of <T> being considered a tag. Therefor when using an arrow function, you need to either provide an trailing comma, a second generic, or an extends.
DEV Community
dev.to › michaeljota › using-typescript-generics-with-your-react-components-4dde
Using Typescript generics with your React components - DEV Community
October 10, 2021 - Typescript defines and uses generics the same way C# does, with angle brakes (< and >). So, in order to use generics we need to declare them with angle brakes. ... // Using inline typing and arrow function const identity: <Input>(arg: Input) ...