Using generics in arrow functions in TypeScript is not a difficult task. This article will help you know how to do it through the assign symbol. It’s very helpful for you, let’s go into detail now.
Using generics in Arrow functions in TypeScript
With assign symbol
To use generics in an arrow function, you must set it between the assigned symbol and the function’s parameters. It looks like this:
Example:
const returnName = (name: string): string[] => { return [name]; }; const jalmes = returnName("Jalmes"); const thomas = returnName("Thomas"); const gwen = returnName("Gwen"); console.log(jalmes); console.log(thomas); console.log(gwen);
Output:
["Jalmes"]
["Thomas"]
["Gwen"]
We can also create constraints for your type that only some property can pass inside.
Example:
type Detail = { name: string, age: number, address: string, id: number[] }; type anotherDetail = { name: string, age: number, address: string, id: number[] }; const anArrowFunc = (obj: Detail): Detail => { console.log(obj.name); console.log(obj.age); console.log(obj.address); console.log(obj.id); return obj; }; const thomas: Detail = { name: "Thomas", age: 28, address: "England", id: [6, 8] }; const gwen: anotherDetail = { name: "Gwen", age: 20, address: "Scotland", id: [9, 3] }; console.log( anArrowFunc({ name: "Jalmes", age: 30, address: "France", id: [9, 3]}) ); console.log(anArrowFunc(thomas)); console.log(anArrowFunc(gwen));
Output:
Jalmes
30
France
[ 9, 3 ]
{ name: 'Jalmes', age: 30, address: 'France', id: [ 9, 3 ] }
Thomas
28
England
[ 6, 8 ]
{ name: 'Thomas', age: 28, address: 'England', id: [ 6, 8 ] }
Gwen
20
Scotland
[ 9, 3 ]
{ name: 'Gwen', age: 20, address: 'Scotland', id: [ 9, 3 ] }
Here I create a type called Detail, and I add the constraint to the arrow function type that can only pass and return a type that is equal to the Detail type.
If I don’t pass in a type that is not equal to the Detail function but some other type, I will get an error.
Example:
type Detail = { name: string, age: number, address: string, id: number[] }; const anArrowFunc = (obj: Detail): Detail => { console.log(obj.name); console.log(obj.age); console.log(obj.address); console.log(obj.id); return obj; }; console.log(anArrowFunc("Hello From Learn Share IT"));
The error:
Argument of type 'string' is not assignable to parameter of type 'Detail'.
The error happened because I passed in a string, not a type equal versus Detail type.
Use the ‘|’ symbol
You also can make your arrow function get multiple types and separate them by using the ‘|’ symbol.
Example:
const anArrowFunction = (values: string | number): string | number => { return values; }; console.log(anArrowFunction("Hello")); console.log(anArrowFunction(2));
Output:
"Hello"
2
In this example, my arrow function can get either string or number type.
Summary
In this tutorial, I show you two methods for using generics in arrow functions in TypeScript. I hope they are helpful to you. If you have any problems or any questions, please comment below. I will respond as possible. Thanks for reading!
Maybe you are interested:
- How to break a forEach() loop in TypeScript
- How To Declare Function With A Readonly Return Type In TypeScript
- Get the Type of a Function’s Arguments in TypeScript

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm