TypeScript

Static typing for JavaScript with advanced type features for safer, more maintainable code.

When to Use

• Working with .ts or .tsx files
• Building type-safe APIs and applications
• Defining complex data models with validation
• Creating reusable generic utilities

Quick Start

// Define a typed interface
interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

// Type-safe function
async function fetchUser(id: string): Promise<User | undefined> {
  const response = await fetch(`/api/users/${id}`);
  return response.ok ? response.json() : undefined;
}

Core Concepts

Interfaces and Types

// Interface for object shapes (extendable)
interface User {
  id: string;
  name: string;
  email: string;
}

// Type for unions, intersections, mapped types
type Status = "pending" | "active" | "inactive";
type UserWithStatus = User & { status: Status };

Generics

// Generic functions
function first<T>(items: T[]): T | undefined {
  return items[0];
}

// Generic constraints
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// Generic interfaces
interface Repository<T extends { id: string }> {
  findById(id: string): Promise<T | null>;
  save(entity: T): Promise<T>;
  delete(id: string): Promise<void>;
}

Common Patterns

Type Guards

Problem: Narrowing unknown types at runtime.

Solution:

// Type predicates
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value
  );
}

// Discriminated unions
type Result<T> = { success: true; data: T } | { success: false; error: string };

function handleResult<T>(result: Result<T>) {
  if (result.success) {
    console.log(result.data); // Type: T
  } else {
    console.error(result.error); // Type: string
  }
}

Utility Types

// Make all properties optional
type Partial<T> = { [P in keyof T]?: T[P] };

// Pick specific properties
type UserPreview = Pick<User, "id" | "name">;

// Omit specific properties
type UserCreate = Omit<User, "id" | "createdAt">;

// Brand types for nominal typing
type UserId = string & { readonly brand: unique symbol };

Best Practices

Do:

• Enable strict mode in tsconfig.json
• Use unknown instead of any for truly unknown types
• Use discriminated unions for state management
• Export types alongside implementations

Don’t:

• Use any to bypass type checking
• Use type assertions (as) when narrowing works
• Ignore TypeScript errors with // @ts-ignore
• Mix interface and type inconsistently

Troubleshooting

References

• TypeScript Handbook
• TypeScript Deep Dive