8️⃣ 🌐 TypeScript Generics & Reusability – Generic Functions, Interfaces, and Classes (2025)

---

🧲 Introduction – Why Learn Generics in TypeScript?

Generics are a core feature in TypeScript that enable you to create reusable, flexible, and type-safe components. Whether you’re building a utility function, reusable class, or API layer, generics let you write code that works across data types while maintaining strict typing. This leads to fewer bugs and cleaner code.

🎯 In this guide, you’ll learn:

• What generics are and how they improve code reusability
• How to define and apply generic constraints
• Using generics in interfaces and classes
• Real-world examples of generic usage

---

📘 Topics Covered

🧩 Topic	📌 Description
Generic Constraints	Restrict generic types to enforce structure or behavior
Generic Interfaces	Create flexible and reusable contracts using generics
Generic Classes	Define type-safe and reusable classes that work with multiple data types

---

🔁 What Are Generics in TypeScript?

Generics allow you to create functions, classes, and interfaces that work with any data type while preserving type safety.

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

console.log(identity<string>("Hello")); // "Hello"
console.log(identity<number>(42));      // 42

✅ The <T> is a placeholder that gets replaced with a specific type at usage.

---

🔐 Generic Constraints – Enforce Type Rules

function logLength<T extends { length: number }>(arg: T): void {
  console.log(arg.length);
}

logLength("TypeScript");     // ✅
logLength([1, 2, 3]);         // ✅
// logLength(123);           // ❌ Error: number has no length property

📌 Use extends to enforce that a generic type must match a structure.

---

🧱 Generic Interfaces – Reusable Contracts

interface Box<T> {
  value: T;
}

let stringBox: Box<string> = { value: "Hello" };
let numberBox: Box<number> = { value: 100 };

📦 Generic interfaces let you define contracts that adapt to different types.

---

🏗️ Generic Classes – Type-Safe and Reusable

class Container<T> {
  private data: T;
  constructor(value: T) {
    this.data = value;
  }
  getData(): T {
    return this.data;
  }
}

const strContainer = new Container<string>("Generic");
console.log(strContainer.getData()); // "Generic"

🔁 Generic classes are useful for collections, wrappers, and utilities.

---

📌 Summary – Recap & Next Steps

Generics enhance TypeScript by enabling reusability without losing type safety. They’re essential for building scalable, maintainable, and DRY code—especially in utility libraries, APIs, and data handling systems.

🔍 Key Takeaways:

• Use <T> or other identifiers for generic type variables
• Apply constraints to restrict the shape of accepted types
• Create flexible, typed interfaces and classes with generics
• Combine generics with functions, interfaces, and class hierarchies

⚙️ Real-World Relevance:
Generics reduce duplication and prevent bugs by allowing consistent type-safe behavior across various modules in large codebases.

---

❓ FAQ – TypeScript Generics

❓ Why use generics instead of any?

✅ Generics retain type information, while any disables type checking. Generics ensure reusability and type safety.

---

❓ Can I restrict what type a generic accepts?

✅ Yes. Use constraints with extends to limit the shape of the input.

---

❓ Are generics only for functions?

✅ No. Generics can be used in functions, interfaces, classes, and even type aliases.

---

❓ Can I use multiple generic types?

✅ Absolutely. You can use multiple type variables like <T, U> for more complex functions and classes.

---

Share Now :