Using TypeScript generics to create reusable components

Editor’s note: This post was updated on 1 May 2023 to include additional information about creating TypeScript classes using generics and passing conditional values to generics.

Generics are a powerful tool that can assist us in creating reusable functions. In TypeScript, variables and other data structures can be declared to be of a specific type, like an object, Boolean, or string type. With the help of generics, we can handle multiple types of these variables passed to a function.

In this article, we’ll learn how to achieve type safety via generics without sacrificing performance or efficiency. We can write a type parameter between angle brackets: <T>. We can also create generic classes, generic methods, and generic functions in TypeScript.

We’ll take a deep dive into the use of generics in TypeScript. We’ll demonstrate how to use generics to create functions, classes, and interfaces. We’ll look at passing default generic values, multiple values, and conditional values to generics. Lastly, we’ll discuss how to add constraints to generics.

Jump ahead:

• What are TypeScript generics?
• TypeScript generics in action
  • Creating functions without using generics
  • Creating functions using generics
  • Creating TypeScript classes using generics
• Using generics inside TypeScript interfaces
• Passing default generic values to generics
• Passing multiple generic values
• Passing conditional values to generics
• Adding constraints to generics

What are TypeScript generics?

Generics in TypeScript are a method for creating reusable components or functions that can handle multiple types. They allow us to build data structures without needing to set a concrete time for them to execute at compile time.

In TypeScript, generics serve the same purpose of writing reusable, type-safe code where the type of variable is known at compile time. This means that we can dynamically define the type of parameter or function that will be declared beforehand. This comes in really handy when we need to use certain logic inside of our application; with these reusable pieces of logic, we can create functions that take in and give out their own types.

We can use generics to implement checks at compile time, eliminate type castings, and implement additional generic functions across our application. Without generics, our application code would compile at some point, but we may not get the expected results, which could possibly push bugs into production.

By using generics, we can parameterize types. This powerful feature can help us create reusable, generalized, and type-safe classes, interfaces, and functions.

TypeScript generics in action

Creating functions without using generics

Let’s consider the following example. Below, we have a simple function that will add new properties to an array of objects. We have defined an interface for our object which will take in an id and a pet:

interface MyObject {
  id: number;
  pet: string;
}

const myArray: MyObject[] = [
  { id: 1, pet: "dog" },
  { id: 2, pet: "cat" },
];

const newPropertyKey = "checkup";
const newPropertyValue: string = '2023-12-03';
const newPropertyAddition = myArray.map((obj) => ({
  ...obj,
  [newPropertyKey]: newPropertyValue,
}));
console.log(newPropertyAddition);

As you can see, we have already introduced a few constraints inside of our code. Let’s say we have a property that accepts a string, and we want to add a new property that accepts a number. Instead of building another function, it would be great if we could simply reuse the original function.

This is the sweet spot where TypeScript generics kick in!

Creating functions using generics

Let’s take a look at the problem before we write our solution using generics. If we pass the above function an array of strings, it would throw us this error:

'Type ‘number’ is not assignable to type of ‘string’

We can fix this by adding any to our type declaration:

interface MyObject {
  id: number;
  pet: string;
}

const myArray: MyObject[] = [
  { id: 1, pet: "dog" },
  { id: 2, pet: "cat" },
];

const newPropertyKey = "checkup";
const newPropertyValue: any = 20231203;
const newPropertyAddition = myArray.map((obj) => ({
  ...obj,
  [newPropertyKey]: newPropertyValue,
}));
console.log(newPropertyAddition);

But there is no valid reason to use TypeScript if we aren’t dealing with any data types. Let’s refactor this piece of function to convert using generics:

type MyArray<T> = Array<T>;
type AddNewProperty<T> = {
  [K in keyof T]: T[K];
} & { newProperty: string }; // generic 'newProperty' set to the desired with a name and type
interface MyObject {
  id: number;
  pet: string;
}
const myArray: MyArray<MyObject> = [
  { id: 1, pet: "dog" },
  { id: 2, pet: "cat" },
];
const newPropertyAddition: MyArray<AddNewProperty<MyObject>> = myArray.map((obj) => ({
  ...obj,
  newProperty: "New value",
}));
console.log(newPropertyAddition);

Here, we denoted a type named <T>, which will make it act more generic. This will hold the type of data that is received by the function itself. This means the type of the function is now parameterized in terms of a type parameter <T>.

We first define a generic type that represents an array of objects and create another type, AddNewProperty, that adds a new property to each object in the array.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

To add more clarity, we could create a function that takes in a generic as an argument and returns a generic itself. This is what generics is all about — creating one function that can be reused in multiple places:

function genericsPassed<T>(arg: T): [T] {
  console.log(typeof(arg))
  return [arg]
}
/// type of argument passed through generics
genericsPassed(3)
//Passed a number
genericsPassed(new Date())
//Passed a date object
genericsPassed(new RegExp("/([A-Z])\w+/g"))
//Passed a regex

Creating TypeScript classes using generics

Let’s take a look at an example of using generics in classes. Consider the following:

class MyObject<T> {
  id: number;
  pet: string;
  checkup: T;
  constructor(id: number, pet: string, additionalProperty: T) {
    this.id = id;
    this.pet = pet;
    this.checkup = additionalProperty;
  }
}
const myArray: MyObject<string>[] = [
  new MyObject(1, "cat", "false"),
  new MyObject(2, "dog", "true"),
];
const newPropertyAddition: MyObject<number | boolean>[] = myArray.map((obj) => {
  return new MyObject(obj.id, obj.pet, obj.id % 2 === 0);
});
console.log(newPropertyAddition);

Here, we created a simple class, named MyObject, that contains a variable that is an array of id, pet, and checkup. We also define a generic class, MyObject<T> that represents an object with properties id, pet, and an additional property, additionalProperty, of type T. The constructor accepts values for these properties.

Using generics inside TypeScript interfaces

Generics are not specifically tied to functions and classes. We can also use generics in TypeScript inside of an interface as well. Let’s take a look at an example of how can we use it in action:

const currentlyLoggedIn = (obj: object): object => {
 let isOnline = true;
 return {...obj, online: isOnline};
}

const user = currentlyLoggedIn({name: 'Ben', email: '[email protected]'});

const currentStatus = user.online

With the above lines written, we get an error with a squiggly line telling us that we cannot access the property of isOnline from the user:

Property 'isOnline' does not exist on type 'object'.

This is primarily because the function currentlyLoggedIn does not know the type of object it is receiving through the object type we added to the parameter. We can get around this by making the use of a generic:

const currentlyLoggedIn = <T extends object>(obj: T) => {
 let isOnline = true;
 return {...obj, online: isOnline};
}
boolean
const user = currentlyLoggedIn({name: 'Benny barks', email: '[email protected]'});

user.online = false;

The shape of the object we are currently dealing with in our function can be defined in an interface:

interface User<T> {
 name: string;
 email: string;
 online: boolean;
 skills: T;
}

const newUser: User<string[]> = {
 name: "Benny barks",
 email: "[email protected]",
 online: false,
 skills: ["chewing", "barking"],
};

const brandNewUser: User<number[]> = {
 name: "Benny barks",
 email: "[email protected]",
 online: false,
 skills: [2456234, 243534],
};

Here is another example of how we can use an interface with generics. We defined an interface with Greet, which will take in a generic, and that specific generic will be the type that is passed into our skills property.

With this, we can pass the desired value to the skills property in our Greet function:

interface Greet<T> {
 fullName: "Ben Barks";
 skills: T
 messageGreet: string
}

const messageGreetings = (obj: Greet<string>): Greet<string> => {
 return {
   ...obj,
   messageGreet: `${obj.fullName} welcome to the app`,
 skills: 'sd'
 };
};

Passing default generic values to generics

We can also pass in a default generic type to our generic. This is useful in cases where we don’t want to pass in the data type we are dealing with in our function by force. By default, we are setting it to a number:

function removeRandomArrayItem<T = number>(arr: Array<T>): Array<T> {
 const randomIndex = Math.floor(Math.random() * arr.length);
 return arr.splice(randomIndex, 1);
}
console.log(removeRandomArrayItem([45345, 3453, 356753, 3562345, 3567235]));

This snippet reflects how we made use of the default generic type on our removeRandomArray function. With this, we are able to pass a default generic type of number.

Passing multiple generic values

If we want our reusable blocks of functions to take in multiple generics, we can do the following:

function removeRandomAndMultiply<T = string, Y = number>(arr: Array<T>, multiply: Y): [T[], Y] {
 const randomIndex = Math.floor(Math.random() * arr.length);
 const multipliedVal = arr.splice(randomIndex, 1);
 return [multipliedVal, multiply];
}
console.log(removeRandomAndMultiply([45345, 3453, 356753, 3562345, 3567235], 608));

Here, we created a modified version of our previous function so that we can introduce another generic parameter. We denoted it with the letter Y, which is set to a default type of number, because it will multiply the random number we picked from the given array.

Since we’re multiplying numbers, we are definitely dealing with a number type, so we can pass the default generic type of number.

Passing conditional values to generics

In some cases, we may want to pass a definitive number of values that pass a required condition. We can achieve this by defining a class with a conditional generic type parameter like the following:

class MyNewClass<T extends { id: number }> {
  petOwner: T[];
  constructor(pets: T[]) {
    this.petOwner = pets;
  }
  processPets<X>(callback: (pet: T) => X): X[] {
    return this.petOwner.map(callback);
  }
}
interface MyObject {
  id: number;
  pet: string;
}
const myArray: MyObject[] = [
  { id: 1, pet: "Dog" },
  { id: 2, pet: "Cat" },
];
const myClass = new MyNewClass(myArray);
const whichPet = myClass.processPets((item) => {
  // Add conditional logic based on item properties
  if (item.pet === 'Dog') {
    return "You have a dog as a pet!";
  } else {
    return "You have a cat as a pet!";
  }
});
console.log(whichPet);

In the above code, we’ve defined a class, MyNewClass<T extends { id: number }>, that will take in a generic type of parameter <T> which will extend an object with an id property with a number type. The class has an empty array property, petOwner, of type T to hold the items.

The processPets method of MyNewClass accepts a callback that will go through each item and check the defined condition. The returned value of whichPet will be an array of values based on the conditions provided in the callback function. We can add conditions and define logic to fine-tune our requirements according to needs and specificity.

Adding constraints to generics

Generics allow us to work with any data types that are passed as arguments. We can, however, add constraints to the generic to limit it to a specific type.

A type parameter can be declared that is limited by another type parameter. This will help us add constraints upon the object, making sure we don’t obtain a property that possibly doesn’t exist.

function getObjProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
 return obj[key];
}

let x = { name: "Benny barks", address: "New York", phone: 7245624534534, admin: false };

getObjProperty(x, "name");
getObjProperty(x, "admin");
getObjProperty(x, "loggedIn"); //property doesn't exist

In the above example, we created a constraint to the second parameter the function receives. We can invoke this function with the respective arguments and everything will work, unless we pass a property name that does not exist in the object type with the value of x. This is how we can constrict object definition properties using generics.

Conclusion

In this article, we explored how we can use generics, and created reusable functions inside our codebase. We demonstrated how to implement generics to create a function, class, interface, method, multiple interfaces, and default generics to write more reusable functions across our codebase.

LogRocket: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free.