4. TypeScript Generics in Hindi – बिना डर के लिखो Flexible Code

स्वागत है The Easy Master पर!

क्या तुमने कभी TypeScript में ऐसा code देखा है:

function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

और सोचा है – “ये K और V क्या है? अंग्रेजी के letters क्यों लिख रहे हो? ये काम कैसे करता है?”

अगर हाँ, तो तुम बिल्कुल सही जगह आए हो।

आज मैं TypeScript Generics in Hindi को इतने detail में समझाऊंगा कि तुम्हें कभी कोई confusion नहीं होगी। हर symbol, हर angle bracket, हर comma – सब समझाऊंगा।

चलिए शुरू करते हैं बिल्कुल zero से।

1. Problem Statement – बिना Generics के क्या problem है?

मान लो तुम्हें एक function लिखना है जो दो values को pair (जोड़ी) के रूप में return करे।

पहला तरीका – बिना types के (pure JavaScript):

function pair(key, value) {
  return [key, value];
}

Problem: TypeScript use kar rahe ho toh tumhe types chahiye. Yahan key aur value any ban jayenge – koi safety nahi.

दूसरा तरीका – specific types के साथ:

function pairStringNumber(key: string, value: number): [string, number] {
  return [key, value];
}

Problem: ये sirf string-number pair के लिए काम करेगा। अगर चाहिए number-boolean pair, string-string pair, User-Product pair – तो हर बार नया function लिखना पड़ेगा।

तीसरा तरीका – any का use:

function pairAny(key: any, value: any): [any, any] {
  return [key, value];
}

Problem: Type safety gayi tel lene. TypeScript use karne ka fayda hi khatam.

यहाँ आते हैं Generics – jo type ko variable ki tarah pass karne देता है।

2. Generics क्या है?

Generics TypeScript का एक feature है जिससे तुम type ko ek parameter bana sakte ho.

जैसे function (a, b) लेता है, वैसे ही generic <T, U> type parameters लेता है।

Example – सबसे simple generic function:

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

इसे पढ़ने का तरीका:

• <T> – ये बता रहा है कि ये function T नाम का एक type parameter accept करेगा।
• (value: T) – function का पहला parameter value है, जिसका type वही T होगा।
• : T – function jo return karega, उसका type भी T होगा।

जब तुम call करते हो:

let output = identity<string>("Hello");
// TypeScript समझ गया: T = string
// value: string, return: string

let output2 = identity(42);
// TypeScript automatically infer कर लेता है: T = number

मैजिक ये है: तुमने एक ही function लिखा, लेकिन वो string, number, boolean, किसी भी type के साथ काम करेगा – और type safety भी बनी रहेगी।

3. Generic Function – पहला दमदार example

अब हम एक ऐसा function लिखेंगे जो किसी भी type की array का पहला element निकाले:

function getFirstElement<T>(arr: T[]): T | undefined {
  if (arr.length === 0) return undefined;
  return arr[0];
}

// अब ये function किसी भी type की array के साथ काम करेगा
const firstNumber = getFirstElement([10, 20, 30]);    // type: number | undefined
const firstName = getFirstElement(["Alice", "Bob"]);  // type: string | undefined
const firstMixed = getFirstElement([1, "hello", true]); // type: string | number | boolean | undefined

Step-by-step समझो:

1. getFirstElement<T> – हमने एक type parameter T बनाया।
2. (arr: T[]) – function accept करता है T type की array। यानी अगर T = number, तो arr: number[].
3. : T | undefined – function return करेगा या तो T type की value (पहला element), या undefined (अगर array खाली हो)।
4. जब हम getFirstElement([10, 20, 30]) लिखते हैं, TypeScript देखता है array में number है, तो T = number infer कर लेता है।

बिना generics के यह कैसे होता? – अलग-अलग functions लिखने पड़ते getFirstNumber, getFirstString, आदि।

4. Multiple Type Parameters – K, V को detail में समझो

अब आता है तुम्हारा main doubt – pair<K, V> वाला example.

कोड:

function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

क्या है K और V?

• K और V type parameter names हैं। तुम कोई भी नाम रख सकते हो – T, U, KeyType, ValueType – लेकिन convention ये है कि single capital letters use करें।
• K – “Key” के लिए (जैसे object key, identifier)
• V – “Value” के लिए (जैसे value associated with key)

क्यों use किए?

क्योंकि हमें दो independent types की जरूरत है।

• पहला parameter key का कोई type हो सकता है – string, number, User, आदि।
• दूसरा parameter value का कोई अलग type हो सकता है – boolean, Product, आदि।

Agar hum sirf ek type parameter T use karte:

function pairWrong<T>(key: T, value: T): [T, T] {
  return [key, value];
}

तो ये गलत होगा क्योंकि ये force करेगा कि key और value दोनों का type same हो। हमें तो अलग-अलग types चाहिए।

Isliye do type parameters – K (key ka type) और V (value ka type).

कैसे काम करता है? – Example के साथ

const result1 = pair("id", 123);
// TypeScript infer करता है:
// key = "id" (string) → K = string
// value = 123 (number) → V = number
// Return type: [string, number]

const result2 = pair(101, "Active");
// K = number, V = string
// Return type: [number, string]

const result3 = pair({ name: "Rahul" }, true);
// K = { name: string }, V = boolean
// Return type: [{ name: string }, boolean]

कहाँ use होगा real life में?

Use case 1: Map data structure

class MyMap<K, V> {
  private storage: Map<K, V> = new Map();
  
  set(key: K, value: V): void {
    this.storage.set(key, value);
  }
  
  get(key: K): V | undefined {
    return this.storage.get(key);
  }
}

const userRoles = new MyMap<string, string>();
userRoles.set("alice", "admin");  // ✅ K=string, V=string
userRoles.set(123, "user");       // ❌ Error: 123 number not assignable to string K

Use case 2: Object entries बनाना

function createObjectFromPair<K extends string | number, V>(key: K, value: V): Record<K, V> {
  return { [key]: value } as Record<K, V>;
}

const obj = createObjectFromPair("status", "success");
// obj = { status: "success" } with proper types

Use case 3: API response with different data types

type ApiPair<K, V> = {
  key: K;
  value: V;
  timestamp: Date;
}

const apiResponse: ApiPair<string, number> = {
  key: "temperature",
  value: 36.5,
  timestamp: new Date()
};

तुम्हारे लिए important rule:

जब तुम्हें दो अलग-अलग types की जरूरत हो, तो दो type parameters लिखो – जैसे <T, U> या <K, V>।

5. Generic Interface – API Wrapper बनाओ

अब हम interface को generic बनाएंगे। ये बहुत common pattern है real-world APIs में।

interface ApiResponse<T> {
  data: T;           // T type ka data – jo bhi ho sakta hai
  status: number;    // HTTP status code
  message: string;   // Success ya error message
}

// Different uses:
type User = { id: number; name: string };
type Product = { id: number; price: number };

const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Priya" },
  status: 200,
  message: "User fetched"
};

const productResponse: ApiResponse<Product[]> = {
  data: [{ id: 1, price: 100 }, { id: 2, price: 200 }],
  status: 200,
  message: "Products list"
};

Detail में समझो:

• ApiResponse<T> – एक generic interface है जो T type parameter लेता है।
• data: T – यानी data का type वही होगा जो तुम T की जगह दोगे।
• जब तुम ApiResponse<User> लिखते हो, तो T की जगह User आ जाता है।

Why powerful? – तुम एक ही interface से हर API response को type-safe बना सकते हो।

6. Generic Class – Stack, Queue खुद बनाओ

Class को generic बनाने से तुम एक ही class से अलग-अलग types के objects बना सकते हो।

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }

  size(): number {
    return this.items.length;
  }
}

// Number stack
const numStack = new Stack<number>();
numStack.push(10);
numStack.push(20);
console.log(numStack.pop()); // 20

// String stack
const strStack = new Stack<string>();
strStack.push("Hello");
strStack.push("World");
console.log(strStack.pop()); // "World"

// Custom type stack
type Task = { id: number; title: string };
const taskStack = new Stack<Task>();
taskStack.push({ id: 1, title: "Learn Generics" });

Detail में:

• class Stack<T> – class एक type parameter T लेती है।
• private items: T[] – items array सिर्फ T type के elements store करेगी।
• push(item: T) – sirf T type ki values accept karega.
• pop(): T | undefined – T type return karega ya undefined.

7. Constraints – extends से type को बांधो

कभी-कभी तुम generic type पर restriction लगाना चाहते हो – “ये type sirf wahi ho sakta hai jiske paas length property हो” या “ये HasName interface को follow करे”।

तब use करो extends keyword.

Example 1: Length constraint

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

logLength("hello");      // ✅ string has length
logLength([1, 2, 3]);    // ✅ array has length
logLength({ length: 10 }); // ✅ object with length
// logLength(123);        // ❌ number has no length property

Example 2: Interface constraint

interface HasName {
  name: string;
}

function greet<T extends HasName>(obj: T): string {
  return `Hello ${obj.name}!`;
}

greet({ name: "Amit", age: 25 }); // ✅
// greet({ age: 30 }); // ❌ Property 'name' missing

Why constraint? – Bina constraint ke TypeScript error dega agar tum obj.name access karoge, kyunki pata nahi name hai ya nahi. Constraint promise karta hai ki T mein name hoga.

8. keyof operator – Object properties की safety

keyof किसी type की सभी keys का union type बना देता है।

interface Person {
  name: string;
  age: number;
  city: string;
}

type PersonKeys = keyof Person; // "name" | "age" | "city"

Ab generics के साथ मिलाकर use करते हैं:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = { name: "Neha", age: 22, city: "Delhi" };

const nameValue = getProperty(person, "name"); // string ✅
const ageValue = getProperty(person, "age");   // number ✅
// getProperty(person, "salary"); // ❌ Error: 'salary' is not in keys

Detail breakdown:

• <T, K extends keyof T> – दो type parameters: T (object type), K (key type) जो T की keys में से कोई एक हो।
• obj: T – पहला parameter object hai type T का।
• key: K – दूसरा parameter key है type K का।
• : T[K] – return type वो है जो obj[key] की value का type होता है।

Real use case: Safe update function

function updateProperty<T, K extends keyof T>(
  obj: T,
  key: K,
  value: T[K]
): T {
  obj[key] = value;
  return obj;
}

const config = { theme: "dark", fontSize: 14 };
updateProperty(config, "theme", "light");   // ✅
// updateProperty(config, "theme", 123);   // ❌ 123 not string
// updateProperty(config, "fontSize", "large"); // ❌ string not number

9. Real-world Projects में Generics

Example 1: API Service (जैसे fetch)

async function apiRequest<T>(
  url: string,
  options?: RequestInit
): Promise<T> {
  const response = await fetch(url, options);
  if (!response.ok) throw new Error(response.statusText);
  return response.json() as Promise<T>;
}

// Use
interface User { id: number; name: string; }
const users = await apiRequest<User[]>("/api/users");
console.log(users[0].name); // TypeScript knows it's string

interface Product { id: number; price: number; }
const product = await apiRequest<Product>("/api/products/1");
console.log(product.price);

Example 2: Type-safe Event Emitter

type EventMap = {
  login: { userId: string };
  logout: void;
  dataUpdate: { newData: any };
};

class EventEmitter<T extends Record<string, any>> {
  private listeners: { [K in keyof T]?: ((data: T[K]) => void)[] } = {};

  on<K extends keyof T>(event: K, callback: (data: T[K]) => void): void {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event]!.push(callback);
  }

  emit<K extends keyof T>(event: K, data: T[K]): void {
    this.listeners[event]?.forEach(cb => cb(data));
  }
}

const emitter = new EventEmitter<EventMap>();
emitter.on("login", (data) => console.log(data.userId)); // data type is { userId: string }
emitter.emit("login", { userId: "123" }); // ✅
// emitter.emit("login", { wrong: "data" }); // ❌ Error

10. Common Mistakes (बिल्कुल practical)

Mistake 1: Generic parameter का unnecessary use

// ❌ जरूरत नहीं है
function toString<T>(value: T): string {
  return String(value);
}

// ✅ सही – simple type use करो
function toStringSimple(value: unknown): string {
  return String(value);
}

Mistake 2: Constraint भूल जाने पर error

// ❌ Error: Property 'length' does not exist on type 'T'
function logLengthBad<T>(arr: T): void {
  console.log(arr.length);
}

// ✅ Constraint add करो
function logLengthGood<T extends { length: number }>(arr: T): void {
  console.log(arr.length);
}

Mistake 3: Multiple type parameters में order गलत समझना

function wrongOrder<U, T>(a: T, b: U): [T, U] {
  return [a, b];
}
// ये चलेगा लेकिन confusing है। Convention: <T, U> या <K, V>

Mistake 4: Generic callback में type inference fail होना

// ऐसे लिखोगे तो TypeScript infer नहीं कर पाएगा
function mapArray<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}
// call time pe specify karo ya arrow function use karo, kaam karega
const result = mapArray([1,2,3], (x) => x.toString()); // ✅

11. FAQ – हर सवाल का जवाब

Q1: <T> में T क्यों लिखते हैं? Kya koi aur letter likh sakte hain?
हाँ, कोई भी valid identifier likh sakte ho – Type, Item, Key, Value. Convention ये है कि single capital letters (T, U, V, K, P) use karte hain.

Q2: Kya multiple type parameters ke beech mein comma lagana zaroori hai?
हाँ, <K, V> – comma se separate karte hain.

Q3: Generic function call mein types explicitly likhna kab zaroori hai?
Jab TypeScript infer nahi kar paata, ya tum specific type force karna chahte ho. Example: pair<string, number>("id", 123).

Q4: Kya generic interface ko implement karne wali class bhi generic honi chahiye?
Zaroori nahi – agar class specific types use kar rahi hai, toh non-generic ho sakti hai.

Q5: Generic default type kya hota hai?
<T = string> – agar type specify na karo toh default string le lega.

Q6: React component mein generics kaise use karein?

const MyList = <T,>({ items, render }: { items: T[], render: (item: T) => React.ReactNode }) => { ... }

(ध्यान रखना <T,> comma lagta hai JSX confusion se bachne ke liye)

Q7: Kya generic type variable ka use runtime mein kar sakte hain?
Nahi – generics compile-time feature hai. Runtime mein type information nahi bachti.

Q8: T extends object ka kya matlab hai?
Matlab T sirf non-primitive types (object, array, function, class instance) ho sakta hai – string, number, boolean nahi.

Q9: Utility types (Partial, Pick) generics par based hain?
Haan! Partial<T>, Pick<T, K> sab generics use karte hain.

Q10: Generics aur union types mein kya farak hai?
Union (string | number) multiple types mein se ek allow karta hai. Generics type ko capture karta hai aur poori type safety maintain karta hai.

12. Conclusion

बहुत हो गया पढ़ाई? 😅

लेकिन सच में, आज हमने TypeScript Generics in Hindi को इतने detail में कवर किया है कि अब तुम:

• समझ गए होगे कि K और V क्या है और क्यों use होते हैं।
• Generic functions, interfaces, classes खुद लिख सकते हो।
• Constraints और keyof का use karna aa gaya.
• Real-world projects (API, EventEmitter) में generics kaise help karte hain.

Mera personal advice:
Generics ko practice karo. Pehle ek simple generic function likho – identity. फिर pair बनाओ। फिर ek generic Stack class. Real project mein ek API helper banao.

Error aayenge? Haan, definitely.
Lekin har error tumhe ek cheez sikhayegi. Main khud generics seekhte waqt 100+ errors face kiye. Aaj tumhe aasan tarika bata raha hoon.

अब तुम्हारी बारी!

Comment में बताओ:

1. तुम्हें कौन सा concept पहले मुश्किल लगता था, और अब आसान लग रहा है?
2. क्या तुमने pair<K,V> वाला example पूरा समझ लिया? अगर नहीं, तो क्या doubt है?
3. अगला topic क्या चाहिए? (Utility Types? Conditional Types? Decorators? Type Guards?)

Share this article with your coding friends – ताकि वो भी generics को डरावना न समझें।

The Easy Master पर बने रहो। Happy Coding! 💻🚀

Resources

• TypeScript Generics Handbook
• TypeScript Playground – Try Generics
• Understanding keyof and Generics – FreeCodeCamp

Additional Resources

• Master ES6: A Complete Feature Guide with Examples
• Top 10 React Libraries and Tools Every Developer Must Know in 2025
• Top 10 Free APIs for Practice in 2026
• JavaScript Deep Dive 2026: Closures, Promises & Event Loop