Explore the power of generics in TypeScript to write reusable and type-safe code. Learn how to implement generic functions, interfaces, and classes, and understand advanced patterns for expert developers.
Generics are a powerful feature in TypeScript that enable developers to create components that can work with a variety of data types while maintaining type safety. By allowing the definition of functions, interfaces, and classes with type parameters, generics enhance code reusability and flexibility. In this section, we will delve into the concept of generics, explore their syntax and usage, and examine advanced patterns that leverage generics for expert software engineering.
Generics allow you to define a placeholder for a type, which can be specified later when the function, class, or interface is used. This flexibility is particularly useful for creating reusable components that can operate on different data types without sacrificing type safety.
Let’s start by declaring a simple generic function. A generic function can accept a type parameter, which allows it to operate on a variety of types.
1// A generic function that returns the input value
2function identity<T>(value: T): T {
3 return value;
4}
5
6// Using the generic function with different types
7let num = identity<number>(42);
8let str = identity<string>("Hello, TypeScript!");
In the example above, T is a type parameter that acts as a placeholder for the actual type. When calling the identity function, we specify the type we want to use, such as number or string.
Generics can also be applied to interfaces and classes, allowing for more complex data structures and patterns.
A generic interface can define a contract for a function or a data structure that operates on a type parameter.
1// A generic interface for a function that compares two values
2interface Comparator<T> {
3 compare(a: T, b: T): number;
4}
5
6// Implementing the Comparator interface for numbers
7class NumberComparator implements Comparator<number> {
8 compare(a: number, b: number): number {
9 return a - b;
10 }
11}
Generic classes allow you to create data structures that can store and manipulate data of any type.
1// A generic stack class
2class GenericStack<T> {
3 private items: T[] = [];
4
5 push(item: T): void {
6 this.items.push(item);
7 }
8
9 pop(): T | undefined {
10 return this.items.pop();
11 }
12
13 peek(): T | undefined {
14 return this.items[this.items.length - 1];
15 }
16}
17
18// Using the GenericStack with different types
19let numberStack = new GenericStack<number>();
20numberStack.push(10);
21numberStack.push(20);
22console.log(numberStack.pop()); // Outputs: 20
23
24let stringStack = new GenericStack<string>();
25stringStack.push("TypeScript");
26console.log(stringStack.peek()); // Outputs: TypeScript
Sometimes, you may want to restrict the types that can be used with a generic function or class. This is where constraints come in, using the extends keyword.
1// A generic function that requires the type to have a length property
2function logLength<T extends { length: number }>(arg: T): void {
3 console.log(arg.length);
4}
5
6// Valid usage
7logLength("Hello");
8logLength([1, 2, 3]);
9
10// Invalid usage: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
11logLength(42);
TypeScript allows you to specify default types for type parameters, which can simplify the usage of generics.
1// A generic function with a default type parameter
2function createArray<T = string>(length: number, value: T): T[] {
3 return Array(length).fill(value);
4}
5
6// Using the function with and without specifying the type
7let stringArray = createArray(3, "default");
8let numberArray = createArray<number>(3, 42);
Generics can have multiple type parameters, allowing for more complex relationships between types.
1// A generic function with two type parameters
2function pair<K, V>(key: K, value: V): [K, V] {
3 return [key, value];
4}
5
6// Using the pair function
7let stringNumberPair = pair("age", 30);
8let booleanStringPair = pair(true, "success");
When working with generics, it’s important to use clear and consistent naming conventions for type parameters. Here are some common practices:
T for a single type).U, V for multiple types).K for key, V for value).Generics can be combined with other TypeScript features to create powerful patterns.
Conditional types allow you to create types based on conditions.
1// A conditional type that checks if a type is a string
2type IsString<T> = T extends string ? "Yes" : "No";
3
4// Using the conditional type
5type Test1 = IsString<string>; // "Yes"
6type Test2 = IsString<number>; // "No"
Mapped types transform properties of an existing type.
1// A mapped type that makes all properties optional
2type Partial<T> = {
3 [P in keyof T]?: T[P];
4};
5
6// Using the mapped type
7interface User {
8 name: string;
9 age: number;
10}
11
12type PartialUser = Partial<User>;
TypeScript provides several utility types that leverage generics, such as Partial, Readonly, Pick, and Record.
1// Using utility types
2type ReadonlyUser = Readonly<User>;
3type PickUser = Pick<User, "name">;
4type RecordUser = Record<"id", User>;
Generics play a crucial role in implementing design patterns, such as the Repository or Strategy patterns. They allow for flexible and reusable components that can adapt to different data types and business logic.
The Repository pattern can be implemented using generics to handle different entities.
1// A generic repository interface
2interface Repository<T> {
3 findById(id: number): T | undefined;
4 save(entity: T): void;
5}
6
7// Implementing the repository for a specific entity
8class UserRepository implements Repository<User> {
9 private users: User[] = [];
10
11 findById(id: number): User | undefined {
12 return this.users.find(user => user.id === id);
13 }
14
15 save(user: User): void {
16 this.users.push(user);
17 }
18}
The Strategy pattern can use generics to define interchangeable algorithms.
1// A generic strategy interface
2interface Strategy<T> {
3 execute(data: T): void;
4}
5
6// Implementing a specific strategy
7class LogStrategy implements Strategy<string> {
8 execute(data: string): void {
9 console.log(data);
10 }
11}
While generics offer many benefits, they can also introduce complexity. Here are some potential pitfalls and how to address them:
To better understand how generics work, let’s visualize the relationship between generic functions, interfaces, and classes.
classDiagram
class GenericFunction {
+T typeParameter
+identity(value: T): T
}
class GenericInterface {
+T typeParameter
+compare(a: T, b: T): number
}
class GenericClass {
+T typeParameter
+items: T[""]
+push(item: T): void
+pop(): T | undefined
+peek(): T | undefined
}
GenericFunction --> GenericInterface : uses
GenericFunction --> GenericClass : uses
This diagram illustrates how generic functions, interfaces, and classes can be interconnected through the use of type parameters.
To solidify your understanding of generics, try modifying the code examples provided:
identity function with custom types or objects.GenericQueue<T> class that supports enqueue and dequeue operations.Comparator interface to only accept types that implement a specific method.Generics are a cornerstone of TypeScript’s type system, enabling developers to write flexible, reusable, and type-safe code. By understanding how to declare and use generics, you can create robust applications that adapt to changing requirements. Remember, this is just the beginning. As you progress, you’ll discover even more powerful patterns and techniques that leverage the full potential of TypeScript’s generics. Keep experimenting, stay curious, and enjoy the journey!