TypeScript Tips for Better Code

TypeScript brings static type checking to JavaScript, helping catch bugs early and improving developer velocity. To get the most out of TypeScript, we can leverage advanced features to write safer, cleaner code.

1. Utility Types

TypeScript provides built-in utility types that facilitate common transformations.

interface User {
  id: string;
  name: string;
  email: string;
  role?: string;
}

// Make all properties optional
type UpdateUserData = Partial<User>;

// Make all properties readonly
type ImmutableUser = Readonly<User>;

2. Type Guards & Narrowing

Type narrowing ensures type-safety inside conditional branches. Custom type guards are extremely powerful.

interface Admin {
  role: 'admin';
  manageSystem: () => void;
}

interface Guest {
  role: 'guest';
}

function isAdmin(user: Admin | Guest): user is Admin {
  return user.role === 'admin';
}

3. Mapped and Template Literal Types

Template literal types allow string manipulation at the type level.

type Direction = 'top' | 'bottom' | 'left' | 'right';
type MarginClass = `m-${Direction}`; // 'm-top' | 'm-bottom' ...

Mastering these patterns will help you write robust, readable, and highly maintainable TypeScript codebases.