1# typescript-advanced-types — detailed worked examples
2 
3## Advanced Patterns
4 
5### Pattern 1: Type-Safe Event Emitter
6 
7```typescript
8type EventMap = {
9  "user:created": { id: string; name: string };
10  "user:updated": { id: string };
11  "user:deleted": { id: string };
12};
13 
14class TypedEventEmitter<T extends Record<string, any>> {
15  private listeners: {
16    [K in keyof T]?: Array<(data: T[K]) => void>;
17  } = {};
18 
19  on<K extends keyof T>(event: K, callback: (data: T[K]) => void): void {
20    if (!this.listeners[event]) {
21      this.listeners[event] = [];
22    }
23    this.listeners[event]!.push(callback);
24  }
25 
26  emit<K extends keyof T>(event: K, data: T[K]): void {
27    const callbacks = this.listeners[event];
28    if (callbacks) {
29      callbacks.forEach((callback) => callback(data));
30    }
31  }
32}
33 
34const emitter = new TypedEventEmitter<EventMap>();
35 
36emitter.on("user:created", (data) => {
37  console.log(data.id, data.name); // Type-safe!
38});
39 
40emitter.emit("user:created", { id: "1", name: "John" });
41// emitter.emit("user:created", { id: "1" });  // Error: missing 'name'
42```
43 
44### Pattern 2: Type-Safe API Client
45 
46```typescript
47type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
48 
49type EndpointConfig = {
50  "/users": {
51    GET: { response: User[] };
52    POST: { body: { name: string; email: string }; response: User };
53  };
54  "/users/:id": {
55    GET: { params: { id: string }; response: User };
56    PUT: { params: { id: string }; body: Partial<User>; response: User };
57    DELETE: { params: { id: string }; response: void };
58  };
59};
60 
61type ExtractParams<T> = T extends { params: infer P } ? P : never;
62type ExtractBody<T> = T extends { body: infer B } ? B : never;
63type ExtractResponse<T> = T extends { response: infer R } ? R : never;
64 
65class APIClient<Config extends Record<string, Record<HTTPMethod, any>>> {
66  async request<Path extends keyof Config, Method extends keyof Config[Path]>(
67    path: Path,
68    method: Method,
69    ...[options]: ExtractParams<Config[Path][Method]> extends never
70      ? ExtractBody<Config[Path][Method]> extends never
71        ? []
72        : [{ body: ExtractBody<Config[Path][Method]> }]
73      : [
74          {
75            params: ExtractParams<Config[Path][Method]>;
76            body?: ExtractBody<Config[Path][Method]>;
77          },
78        ]
79  ): Promise<ExtractResponse<Config[Path][Method]>> {
80    // Implementation here
81    return {} as any;
82  }
83}
84 
85const api = new APIClient<EndpointConfig>();
86 
87// Type-safe API calls
88const users = await api.request("/users", "GET");
89// Type: User[]
90 
91const newUser = await api.request("/users", "POST", {
92  body: { name: "John", email: "[email protected]" },
93});
94// Type: User
95 
96const user = await api.request("/users/:id", "GET", {
97  params: { id: "123" },
98});
99// Type: User
100```
101 
102### Pattern 3: Builder Pattern with Type Safety
103 
104```typescript
105type BuilderState<T> = {
106  [K in keyof T]: T[K] | undefined;
107};
108 
109type RequiredKeys<T> = {
110  [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
111}[keyof T];
112 
113type OptionalKeys<T> = {
114  [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
115}[keyof T];
116 
117type IsComplete<T, S> =
118  RequiredKeys<T> extends keyof S
119    ? S[RequiredKeys<T>] extends undefined
120      ? false
121      : true
122    : false;
123 
124class Builder<T, S extends BuilderState<T> = {}> {
125  private state: S = {} as S;
126 
127  set<K extends keyof T>(key: K, value: T[K]): Builder<T, S & Record<K, T[K]>> {
128    this.state[key] = value;
129    return this as any;
130  }
131 
132  build(this: IsComplete<T, S> extends true ? this : never): T {
133    return this.state as T;
134  }
135}
136 
137interface User {
138  id: string;
139  name: string;
140  email: string;
141  age?: number;
142}
143 
144const builder = new Builder<User>();
145 
146const user = builder
147  .set("id", "1")
148  .set("name", "John")
149  .set("email", "[email protected]")
150  .build(); // OK: all required fields set
151 
152// const incomplete = builder
153//   .set("id", "1")
154//   .build();  // Error: missing required fields
155```
156 
157### Pattern 4: Deep Readonly/Partial
158 
159```typescript
160type DeepReadonly<T> = {
161  readonly [P in keyof T]: T[P] extends object
162    ? T[P] extends Function
163      ? T[P]
164      : DeepReadonly<T[P]>
165    : T[P];
166};
167 
168type DeepPartial<T> = {
169  [P in keyof T]?: T[P] extends object
170    ? T[P] extends Array<infer U>
171      ? Array<DeepPartial<U>>
172      : DeepPartial<T[P]>
173    : T[P];
174};
175 
176interface Config {
177  server: {
178    host: string;
179    port: number;
180    ssl: {
181      enabled: boolean;
182      cert: string;
183    };
184  };
185  database: {
186    url: string;
187    pool: {
188      min: number;
189      max: number;
190    };
191  };
192}
193 
194type ReadonlyConfig = DeepReadonly<Config>;
195// All nested properties are readonly
196 
197type PartialConfig = DeepPartial<Config>;
198// All nested properties are optional
199```
200 
201### Pattern 5: Type-Safe Form Validation
202 
203```typescript
204type ValidationRule<T> = {
205  validate: (value: T) => boolean;
206  message: string;
207};
208 
209type FieldValidation<T> = {
210  [K in keyof T]?: ValidationRule<T[K]>[];
211};
212 
213type ValidationErrors<T> = {
214  [K in keyof T]?: string[];
215};
216 
217class FormValidator<T extends Record<string, any>> {
218  constructor(private rules: FieldValidation<T>) {}
219 
220  validate(data: T): ValidationErrors<T> | null {
221    const errors: ValidationErrors<T> = {};
222    let hasErrors = false;
223 
224    for (const key in this.rules) {
225      const fieldRules = this.rules[key];
226      const value = data[key];
227 
228      if (fieldRules) {
229        const fieldErrors: string[] = [];
230 
231        for (const rule of fieldRules) {
232          if (!rule.validate(value)) {
233            fieldErrors.push(rule.message);
234          }
235        }
236 
237        if (fieldErrors.length > 0) {
238          errors[key] = fieldErrors;
239          hasErrors = true;
240        }
241      }
242    }
243 
244    return hasErrors ? errors : null;
245  }
246}
247 
248interface LoginForm {
249  email: string;
250  password: string;
251}
252 
253const validator = new FormValidator<LoginForm>({
254  email: [
255    {
256      validate: (v) => v.includes("@"),
257      message: "Email must contain @",
258    },
259    {
260      validate: (v) => v.length > 0,
261      message: "Email is required",
262    },
263  ],
264  password: [
265    {
266      validate: (v) => v.length >= 8,
267      message: "Password must be at least 8 characters",
268    },
269  ],
270});
271 
272const errors = validator.validate({
273  email: "invalid",
274  password: "short",
275});
276// Type: { email?: string[]; password?: string[]; } | null
277```
278 
279### Pattern 6: Discriminated Unions
280 
281```typescript
282type Success<T> = {
283  status: "success";
284  data: T;
285};
286 
287type Error = {
288  status: "error";
289  error: string;
290};
291 
292type Loading = {
293  status: "loading";
294};
295 
296type AsyncState<T> = Success<T> | Error | Loading;
297 
298function handleState<T>(state: AsyncState<T>): void {
299  switch (state.status) {
300    case "success":
301      console.log(state.data); // Type: T
302      break;
303    case "error":
304      console.log(state.error); // Type: string
305      break;
306    case "loading":
307      console.log("Loading...");
308      break;
309  }
310}
311 
312// Type-safe state machine
313type State =
314  | { type: "idle" }
315  | { type: "fetching"; requestId: string }
316  | { type: "success"; data: any }
317  | { type: "error"; error: Error };
318 
319type Event =
320  | { type: "FETCH"; requestId: string }
321  | { type: "SUCCESS"; data: any }
322  | { type: "ERROR"; error: Error }
323  | { type: "RESET" };
324 
325function reducer(state: State, event: Event): State {
326  switch (state.type) {
327    case "idle":
328      return event.type === "FETCH"
329        ? { type: "fetching", requestId: event.requestId }
330        : state;
331    case "fetching":
332      if (event.type === "SUCCESS") {
333        return { type: "success", data: event.data };
334      }
335      if (event.type === "ERROR") {
336        return { type: "error", error: event.error };
337      }
338      return state;
339    case "success":
340    case "error":
341      return event.type === "RESET" ? { type: "idle" } : state;
342  }
343}
344```
345 
346## Type Inference Techniques
347 
348### 1. Infer Keyword
349 
350```typescript
351// Extract array element type
352type ElementType<T> = T extends (infer U)[] ? U : never;
353 
354type NumArray = number[];
355type Num = ElementType<NumArray>; // number
356 
357// Extract promise type
358type PromiseType<T> = T extends Promise<infer U> ? U : never;
359 
360type AsyncNum = PromiseType<Promise<number>>; // number
361 
362// Extract function parameters
363type Parameters<T> = T extends (...args: infer P) => any ? P : never;
364 
365function foo(a: string, b: number) {}
366type FooParams = Parameters<typeof foo>; // [string, number]
367```
368 
369### 2. Type Guards
370 
371```typescript
372function isString(value: unknown): value is string {
373  return typeof value === "string";
374}
375 
376function isArrayOf<T>(
377  value: unknown,
378  guard: (item: unknown) => item is T,
379): value is T[] {
380  return Array.isArray(value) && value.every(guard);
381}
382 
383const data: unknown = ["a", "b", "c"];
384 
385if (isArrayOf(data, isString)) {
386  data.forEach((s) => s.toUpperCase()); // Type: string[]
387}
388```
389 
390### 3. Assertion Functions
391 
392```typescript
393function assertIsString(value: unknown): asserts value is string {
394  if (typeof value !== "string") {
395    throw new Error("Not a string");
396  }
397}
398 
399function processValue(value: unknown) {
400  assertIsString(value);
401  // value is now typed as string
402  console.log(value.toUpperCase());
403}
404```
405