Generic Types in TypeScript

Have you ever heard of Generic Types in TypeScript? If you're familiar with TypeScript, you might have encountered this term before. Generic Types are a powerful feature in TypeScript that allows you to write code that is more flexible and reusable. In this brief introduction, we'll give you an overview of what Generic Types are and how they can benefit your TypeScript code. Whether you're a seasoned TypeScript developer or just starting out, understanding Generic Types is essential to mastering TypeScript.

What is a Generic Type?

In TypeScript, a generic type is a way to define a type or a function that can operate on a range of different types. It allows you to create reusable code that works with different types of data without repeating the same logic for each data type.

A generic type is defined using the angle bracket syntax "<>" and a type parameter. The type parameter is a placeholder for the actual type that will be passed to the generic type at runtime.

For example, the following code defines a generic type called "ArrayWrapper" that takes a type parameter T, which can be any type:

type ArrayWrapper<T> = {
  array: T[],
  length: number
}

In this example, "ArrayWrapper" is a generic type that wraps an array of a certain type and also provides the length of the array. The actual type of the array is specified by the type parameter T.

To use a generic type, you need to provide the actual type for the type parameter. For example, you can create an "ArrayWrapper" for an array of numbers as follows:

function createArrayWrapper<T>(array: T[]): ArrayWrapper<T> {
  return {
    array,
    length: array.length
  };
}

const numberArrayWrapper: ArrayWrapper<number> = createArrayWrapper([1, 2, 3]);

console.log(numberArrayWrapper)

Here, the type parameter T is replaced with the number type, and "numberArrayWrapper" is a variable of type "ArrayWrapper" that wraps an array of numbers and provide you with the length of that Array you passed as a property value of this numberArrayWrapper.

Second Example

A Generic Type is a type that can be parameterized with other types. It allows for creating reusable and flexible code that can work with different data types without having to write separate implementations for each type.

Here's another example of defining a generic type:

function identity<T>(arg: T): T {
  return arg;
}

In this example, the identity function takes a parameter arg of type T and returns a value of the same type T. The syntax before the function name indicates that T is a generic type parameter. This could be any letter or name, but as an standard we use the T as per TypeScript's Documentation.

We can call the identity function with different types:

let firstUse = identity<string>("My Name is Alvison"); 
// firstUse has the type 'string'
let secondUse = identity<number>(42); 
// secondUse has the type 'number'

In the first call, T is inferred to be string, and the return type of identity is string. In the second call, T is inferred to be number, and the return type of identity is number.

Wrap-up

In TypeScript, generic types are a powerful tool for creating adaptable and safe code. Whether you're working with functions, classes, or interfaces, generics allow you to write code that can handle multiple data types with ease. By using generics, you can create code that's more flexible and reusable, making your programming tasks easier and more efficient.

Thanks for reading this article, I hope you enjoyed it as much as I did writing it. Until next time, dear readers!

❤️ Enjoyed the article? Your feedback fuels more content.
💬 Share your thoughts in a comment.
🔖 No time to read now? Well, Bookmark for later.
🔗 If it helped, pass it on, dude!