TypeScript Best Practices in 2026: Advanced Patterns Every Full Stack Developer Should Know

// BAD: Optional properties allow invalid combinations
interface ApiResponse {
  status: 'loading' | 'success' | 'error';
  data?: User;      // What if status is 'error' but data exists?
  error?: string;   // What if status is 'success' but error exists?
}

// GOOD: Discriminated union - each state is explicit
type ApiResponse =
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: string };

function renderUser(response: ApiResponse) {
  switch (response.status) {
    case 'loading':
      return <Spinner />;
    case 'success':
      // TypeScript KNOWS data exists here
      return <UserCard user={response.data} />;
    case 'error':
      // TypeScript KNOWS error exists here
      return <ErrorMessage message={response.error} />;
  }
}

// Create unique branded types
type UserId = string & { readonly __brand: 'UserId' };
type PostId = string & { readonly __brand: 'PostId' };

// Helper functions to create branded values
const createUserId = (id: string): UserId => id as UserId;
const createPostId = (id: string): PostId => id as PostId;

// Now the compiler catches misuse
function getPost(postId: PostId): Promise<Post> { ... }
function getUser(userId: UserId): Promise<User> { ... }

const userId = createUserId('usr_123');
const postId = createPostId('post_456');

getPost(userId); // COMPILE ERROR! Type 'UserId' not assignable to 'PostId'
getPost(postId); // OK

import { z } from 'zod';

// Define schema once - get both validation AND types
const CreateUserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2).max(100),
  role: z.enum(['admin', 'user', 'viewer']),
  age: z.number().int().min(13).max(150).optional(),
});

// Derive TypeScript type from schema - always in sync
type CreateUserInput = z.infer<typeof CreateUserSchema>;
// Equivalent to:
// { email: string; name: string; role: 'admin' | 'user' | 'viewer'; age?: number }

// Use in your API handler
app.post('/users', async (req, res) => {
  const result = CreateUserSchema.safeParse(req.body);

  if (!result.success) {
    return res.status(400).json({
      errors: result.error.flatten().fieldErrors
    });
  }

  // result.data is fully typed as CreateUserInput
  const user = await createUser(result.data);
  return res.status(201).json(user);
});

const routes = {
  home: { path: '/', component: 'HomePage' },
  about: { path: '/about', component: 'AboutPage' },
  blog: { path: '/blog/:slug', component: 'BlogPage' },
} satisfies Record<string, { path: string; component: string }>;

// TypeScript still knows the exact keys
type RouteNames = keyof typeof routes; // 'home' | 'about' | 'blog'

// Without satisfies, using 'as const' would make everything readonly
// Without satisfies, using a type annotation would lose the specific keys

// Build type-safe event systems
type EventMap = {
  'user:created': { userId: string; email: string };
  'user:deleted': { userId: string };
  'post:published': { postId: string; authorId: string };
};

class TypedEventEmitter {
  private handlers = new Map<string, Set<Function>>();

  on<K extends keyof EventMap>(
    event: K,
    handler: (payload: EventMap[K]) => void
  ): void {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, new Set());
    }
    this.handlers.get(event)!.add(handler);
  }

  emit<K extends keyof EventMap>(event: K, payload: EventMap[K]): void {
    this.handlers.get(event)?.forEach(h => h(payload));
  }
}

const emitter = new TypedEventEmitter();

// Fully type-safe - autocomplete for events AND payloads
emitter.on('user:created', (payload) => {
  console.log(payload.email); // TypeScript knows this exists
});

emitter.emit('post:published', {
  postId: '123',
  // authorId is required - TypeScript enforces this
});

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  }
}