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

Using generics in Arrow functions in TypeScrip

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:

Leave a Reply

Your email address will not be published. Required fields are marked *