Mastering TypeScript Generics

Generics¹ are one of TypeScript’s most powerful features. They allow you to write flexible, reusable code while maintaining type safety.

What Are Generics?

Generics enable you to create components that work with multiple types rather than a single one. Think of them as type variables that can be specified when the component is used.

Basic Generic Function

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

const result = identity<string>('hello')

Generic Constraints

You can constrain generics to ensure they have certain properties:

interface HasLength {
 length: number
}

function logLength<T extends HasLength>(arg: T): T {
 console.log(arg.length)
 return arg
}

Generic Interfaces

interface ApiResponse<T> {
 data: T
 status: number
 message: string
}

interface User {
 id: number
 name: string
}

const response: ApiResponse<User> = {
 data: { id: 1, name: 'John' },
 status: 200,
 message: 'Success',
}

Practical Example: Repository Pattern

interface Repository<T> {
 findById(id: string): Promise<T | undefined>
 findAll(): Promise<T[]>
 create(item: T): Promise<T>
}

class UserRepository implements Repository<User> {
 async findById(id: string): Promise<User | undefined> {
 // Implementation
 return undefined
 }

 async findAll(): Promise<User[]> {
 return []
 }

 async create(item: User): Promise<User> {
 return item
 }
}

Conclusion

Generics make your TypeScript code more reusable and type-safe. Practice using them in your projects to become more proficient.

TypeScript Documentation - Generics ↩

Tag: generics

All Tags

Mastering TypeScript Generics

Search & Filter