TypeScript Generics — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— TypeScript Generics
📋Basic Generic
⚙️Constraints
🔄Generic Types
✅infer
🎯 Next: Test →
Step 1 / 4
Speed
Basic Generic
identity<T> — type-safe placeholder for any type💡 Analogy
Like a labeled container — it remembers what type you put in and guarantees you get the same type back.
T is a type variable — a placeholder that TypeScript fills in at call site. identity<string> makes T=string everywhere in the signature.
Console Output
> identity<string>("hello") → "hello" : string
> identity(42) → 42 : number  (T inferred)
> No runtime cost — generics are erased to JS
●generics.ts
Basic GenericL2–4
1// Basic generic function — T is a type variable
2function identity<T>(arg: T): T { return arg; }
3const s = identity<string>('hello');   // T = string
4const n = identity(42);                 // T inferred = number
5 
6// Generic constraint — T must have .length
7function getLength<T extends { length: number }>(arg: T): number {
8  return arg.length;
9}
10getLength('hello');    // 5 — string has .length
11getLength([1, 2, 3]);  // 3 — array has .length
12// getLength(42);      // Error — number has no .length
13 
14// Generic interface — Repository<T> for any entity
15interface Repository<T extends { id: string }> {
16  findById(id: string): Promise<T | null>;
17  save(entity: T): Promise<T>;
18  delete(id: string): Promise<boolean>;
19}
20 
21// Multiple type params — merge two objects
22function merge<T extends object, U extends object>(a: T, b: U): T & U {
23  return { ...a, ...b };
24}
25const merged = merge({ name: 'Alice' }, { age: 30 });
26// merged: { name: string; age: number }
27 
28// infer — extract return type from function type
29type ReturnType<T extends (...args: any) => any> =
30  T extends (...args: any) => infer R ? R : never;
31type Num = ReturnType<typeof Math.random>; // number
31 lines
Timeline — 4 Steps
Basic Generic
identity<T> — type-safe placeholder for any type💡 Analogy
Like a labeled container — it remembers what type you put in and guarantees you get the same type back.
T is a type variable — a placeholder that TypeScript fills in at call site. identity<string> makes T=string everywhere in the signature.
Console Output
> identity<string>("hello") → "hello" : string
> identity(42) → 42 : number  (T inferred)
> No runtime cost — generics are erased to JS

Was this page helpful?

Discussion

identity<T> — type-safe placeholder for any type

💡 Analogy

Like a labeled container — it remembers what type you put in and guarantees you get the same type back.

T is a type variable — a placeholder that TypeScript fills in at call site. identity<string> makes T=string everywhere in the signature.

Console Output

> identity<string>("hello") → "hello" : string
> identity(42) → 42 : number  (T inferred)
> No runtime cost — generics are erased to JS

identity<T> — type-safe placeholder for any type

💡 Analogy

Like a labeled container — it remembers what type you put in and guarantees you get the same type back.

T is a type variable — a placeholder that TypeScript fills in at call site. identity<string> makes T=string everywhere in the signature.

Console Output

> identity<string>("hello") → "hello" : string
> identity(42) → 42 : number  (T inferred)
> No runtime cost — generics are erased to JS