Advanced TypeScript 5 Patterns for Enterprise Web Applications

TypeScript is not just about adding : string or : number to function arguments. When building scalable SaaS applications and component libraries, leveraging TypeScript's type-level programming capabilities catches bugs at compile time and delivers unparalleled developer tooling.

1. Const Type Parameters (TypeScript 5.0+)

Before TypeScript 5.0, passing an object literal to a generic function would often widen literal types unless marked as const. Const type parameters resolve this natively:

// Automatically infers literal tuple types without 'as const'
function defineRoutes<const T extends readonly string[]>(routes: T): T {
  return routes;
}

const routes = defineRoutes(["/projects", "/blog", "/about", "/contact"]);
// Type is: readonly ["/projects", "/blog", "/about", "/contact"]

2. Template Literal Types for Event Bus Routing

type EventNamespace = "user" | "project" | "billing";
type EventAction = "created" | "updated" | "deleted";

type AppEvent = `${EventNamespace}:${EventAction}`;
// "user:created" | "user:updated" | "user:deleted" | "project:created" ...

interface EventEmitter {
  on<E extends AppEvent>(event: E, handler: (payload: Record<string, unknown>) => void): void;
  emit<E extends AppEvent>(event: E, payload: Record<string, unknown>): void;
}

3. Extracting Return Types with infer

type AsyncReturnType<T extends (...args: any[]) => Promise<any>> = 
  T extends (...args: any[]) => Promise<infer R> ? R : never;

async function fetchProjectDetail(slug: string) {
  return { id: 1, title: "Lana Portfolio", tags: ["Next.js", "TS"] };
}

type ProjectDetail = AsyncReturnType<typeof fetchProjectDetail>;
// { id: number; title: string; tags: string[] }

Conclusion

Leveraging advanced TypeScript constructs eliminates runtime assertions and ensures your domain models stay strictly verified across the entire stack.