TypeScript Interfaces vs Types: When to Use Which

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com"
};

type User = {
  id: number;
  name: string;
};

// Also represents other types
type ID = string | number;
type Callback = (data: string) => void;

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}
// Result: Window has both properties

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Animal = { name: string };
type Dog = Animal & { breed: string };

type Status = "pending" | "approved" | "rejected";
type ID = string | number;

interface User {
  id: string;
  name: string;
}

type ApiResponse<T> =
  | { status: "success"; data: T }
  | { status: "error"; error: string };

type UserResponse = ApiResponse<User>;

// React Component
interface BaseButtonProps {
  children: React.ReactNode;
  onClick: () => void;
}

type ButtonVariant = "primary" | "secondary";

type ButtonProps = BaseButtonProps & {
  variant?: ButtonVariant;
};