Using Generics In Arrow Functions In TypeScript

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.

Table of Contents

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:

Brent Johnson

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

Using Generics In Arrow Functions In TypeScript – How to do It?