Generic Classes in TypeScript

Overview

Generics in TypeScript is a tool that provides a way to create reusable components. It works with a variety of data types rather than a single data type. They provide type safety without compromising performance or productivity. We are required to write a type parameter between open < and close > brackets, which makes the generics strongly typed collections. They use a special kind of type variable <T> that denotes types. The collections of generics have similar types of objects. In TypeScript, Generic Classes, Generic Functions, Generic Methods, and Generic Interfaces can be created.

What are Generic Classes in TypeScript?

TypeScript supports generic classes. The generic type parameter is declared in angle brackets <> following the name of the class. We can have more than one type parameter separated by a comma. We can mark the same type parameter to mark the type of the function to let us change the parameter and return the type of methods within the class.

A generic class has generic fields or methods. It certifies that the specified data types are used consistently throughout the class. Generic classes encapsulate the operations that are not specific to a particular data type. A common use of the generic class is with collections like trees, stacks, queues, hash tables, etc.

Syntax of Declaring Generic Classes in TypeScript

The syntax for declaring a generic class is:

TypeScript allows us to have multiple generic types in the type parameter list.

The generic constraints are applied to the generic types in the class:

When we place the type parameter on the class, this allows us to develop methods and properties that work with the same type.

Basic Implementation of Generic Classes

Code

Output

Explanation

In the above code snippet, we have created a generic class named KeyPairVal with a type variable in the angle brackets <T, U>. The KeyPairVal class can have two private generic member variables and a generic function setPairVal that takes in two input arguments of type T and U. This allows us to create an object of keyPairVal with a type of key and the value.

The Generic Class can also implement a Generic Interface.

Code

Output

Explanation

In the above code snippet, The generic class setKeyValue implements the generic interface KeyValueProcess. It doesn't specify the type parameters T and U, rather it allows users to set the parameters on their own. Hence, the setKeyValue class can be used with any type of key and value. A variable is defined as the generic interface with fundamental types for T and U. Therefore, we don't need to set the generic types for setKeyValue.

Conclusion

Generics can be used to create mapped and conditional types.
TypeScript fully supports generics as a way to introduce type-safety into components that accept arguments and return values whose type will be indeterminate when they are not written later in our code.
Using generics correctly can save us from repeating code over and over again, and make the types more flexible.
When the developer makes a component generic, then the component will have the ability to accept and enforce typing that improves code flexibility.
We make use of an interface to specify properties that are used in a class.
We can make use of the extends keyword to denote the type that has a list of properties defined in the interface.