Skip to content
DT
tutorialstypescriptprogramminggenerics1739145600000Mastering TypeScript Generics

Mastering TypeScript Generics

Deep dive into TypeScript generics and learn how to write reusable, type-safe code.

tutorials
#typescript #programming #generics
· 2 min read
Mastering TypeScript Generics

Mastering TypeScript Generics

Generics1 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.

Footnotes

  1. TypeScript Documentation - Generics ↩

Related Posts

2