Welcome to LeviFREE's Blog

1
// Without generics — loses type information
2
function first(arr: any[]): any {
3
  return arr[0];
4
}
5

6
// With generics — type-safe and flexible
7
function first<T>(arr: T[]): T | undefined {
8
  return arr[0];
9
}
10

11
const num = first([1, 2, 3]);       // type: number
12
const str = first(['a', 'b', 'c']); // type: string

1
interface HasLength {
2
  length: number;
3
}
4

5
function logLength<T extends HasLength>(item: T): T {
6
  console.log(item.length);
7
  return item;
8
}
9

10
logLength("hello");    // ✅ string has .length
11
logLength([1, 2, 3]);  // ✅ array has .length
12
logLength(42);         // ❌ number has no .length

1
interface ApiResponse<T> {
2
  data: T;
3
  status: number;
4
  message: string;
5
}
6

7
interface User {
8
  id: number;
9
  name: string;
10
  email: string;
11
}
12

13
// The response is strongly typed
14
const response: ApiResponse<User> = {
15
  data: { id: 1, name: 'LeviFREE', email: 'levi@example.com' },
16
  status: 200,
17
  message: 'OK',
18
};

1
interface User {
2
  id: number;
3
  name: string;
4
  email: string;
5
  password: string;
6
}
7

8
type PublicUser = Omit<User, 'password'>;
9
type UserUpdate = Partial<User>;
10
type ReadonlyUser = Readonly<User>;
11
type UserKeys = keyof User; // "id" | "name" | "email" | "password"

1
type EventMap = {
2
  login: { userId: string; timestamp: Date };
3
  logout: { userId: string };
4
  error: { code: number; message: string };
5
};
6

7
class TypedEmitter<T extends Record<string, any>> {
8
  private listeners = new Map<keyof T, Set<Function>>();
9

10
  on<K extends keyof T>(event: K, handler: (payload: T[K]) => void) {
11
    if (!this.listeners.has(event)) {
12
      this.listeners.set(event, new Set());
13
    }
14
    this.listeners.get(event)!.add(handler);
15
  }
16

17
  emit<K extends keyof T>(event: K, payload: T[K]) {
18
    this.listeners.get(event)?.forEach(fn => fn(payload));
19
  }
20
}
21

22
const emitter = new TypedEmitter<EventMap>();
23

24
emitter.on('login', ({ userId, timestamp }) => {
25
  // userId and timestamp are fully typed
26
});
27

28
emitter.emit('error', { code: 404, message: 'Not found' }); // ✅
29
emitter.emit('error', { wrong: true }); // ❌ Type error