You are viewing the Articles published in

Facilitating Reuse with TypeScript Generics

As is so often emphasized in my articles, facilitating reuse is perhaps one of the most import aspects of system design. For over a decade, languages such as Java, and C# have used generics as one of the primary mechanisms for reuse (I recall first hearing about them in C# back in 2005). Fortunately, Generics have been a key feature of TypeScript since the very beginning.

This article aims to briefly illustrate some of the main benefits of leveraging Generics in TypeScript to simplify implementations and maximize reuse.

Typescript Generics are a language feature that allow for providing reusable implementations based on type deferment. This means you can create a function, interface, or class with a placeholder for a type, thus affording the flexibility to use any type without losing the safety and robustness of type checking.

With Generics, types can be defined as an abstraction such that the types can be specified by clients based on their context. This affords the ability to allow implementations to adapt to the types specified while still ensuring type integrity is preserved.

Generics are defined within angle brackets <>, typically specified as “T” (for “Type”), where “T” is simply an arbitrary placeholder name which is used to denote and reference the type.

For example, consider the following function:

Using Generics, we can implement the function to accept a Generic Type rather than a fixed type:

In the above example, we define the generic within angle brackets, and reference the Type via the “T” value passed to the generic. Now, rather than only allowing strings to be logged, any type can be provided.

We can then use the generic by simply specifying the type when we invoke the function:

Note that in the above, we explicitly set the type to string; however, this isn’t necessary when the type can be inferred, in which case the type can be omitted if preferred:

We can also pass any type to the function’s generic as well:

Generics are not limited to functions. They can also be applied to interfaces and classes as well:

As can be seen in the above, just as with functions, we can define Generics for interfaces and classes using the same syntax.

TypeScript’s Generics also support more advanced features such as constraints, default types, and using multiple types, allowing for more precise and robust implementations.

Using Constraints
Using constraints in Generics allows for specifying requirements for the generic types. For instance, we can define a function which only operates on types that have a certain property or method.

Consider a getLength function which only accepts arguments that have a length property, ensuring the argument is array-like or a string:

Default Types
Default types in generics offer a way to specify a fallback type to be used when a type is not explicitly provided. This is quite useful for providing default implementations, while still affording the flexibility of allowing clients to override the default type.

For example, we can create a generic getData function that fetches data and returns a response of the provided type, or fallback to a default type if not provided:

Using Multiple Types
Multiple types can also be used in Generics, allowing for creating functions, interfaces, or classes that can handle more than one type of input, and / or return more than one type of output, offering greater flexibility and precision.

For instance, consider a simple merge function which combines two different objects into one, while preserving their distinct types:

We can also expand on this to include constraints to ensure the merge function only accepts parameters that are object-like:

TypeScript Generics offer a powerful way to build flexible, reusable, and type-safe solutions. By abstracting over types, Generics allow for providing implementations which can operate on a variety of data types, resulting in increased scalability and maintainable.gnificantly enhance the robustness and versatility of your code.