Tag: javascript

TypeScript has become the default choice for serious JavaScript development. With over 43% of developers using it (Stack Overflow 2025), its type system catches entire categories of bugs at compile time. But TypeScript’s power goes far beyond basic annotations — its advanced type system is a programming language in its own right. Here are techniques that separate proficient developers from beginners.

Generics: Write Once, Type Everything

// Generic API response wrapper — type-safe for any data shape
interface ApiResponse<T> {
    status: number;
    data: T;
    timestamp: string;
}

function handleResponse<T>(response: ApiResponse<T>): T {
    if (response.status >= 400) throw new Error(`API error: ${response.status}`);
    return response.data;
}

interface User { id: string; name: string; email: string; }
const userResp: ApiResponse<User> = { status: 200, data: { id: '1', name: 'Alice', email: 'alice@example.com' }, timestamp: new Date().toISOString() };
const user = handleResponse(userResp);
// user is typed as User — full autocomplete, full safety

// Constrained generic — T must have an 'id' property
function findById<T extends { id: string }>(items: T[], id: string): T | undefined {
    return items.find(item => item.id === id);
}

Discriminated Unions

By adding a literal type field, you get exhaustive pattern matching that eliminates impossible states:

type FetchState<T> =
    | { type: 'idle' }
    | { type: 'loading'; startedAt: number }
    | { type: 'success'; data: T; fetchedAt: number }
    | { type: 'error'; message: string; retryCount: number };

function renderState<T>(state: FetchState<T>): string {
    switch (state.type) {
        case 'idle':    return 'Ready';
        case 'loading': return `Loading... (${Date.now() - state.startedAt}ms)`;
        case 'success': return `Got: ${JSON.stringify(state.data)}`;
        case 'error':   return `Error: ${state.message} (retry ${state.retryCount}/3)`;
        // Remove a case → compile error. Impossible to forget a state.
    }
}

Utility Types You Should Know

interface User { id: string; name: string; email: string; role: 'admin'|'editor'|'viewer'; createdAt: Date; }

type UserUpdate = Partial<Omit<User, 'id' | 'createdAt'>>;  // All fields optional except id/createdAt
type UserSummary = Pick<User, 'id' | 'name' | 'role'>;       // Just id, name, role
type UserMap = Record<string, User>;                          // Typed lookup table
type NotAdmin = Exclude<User['role'], 'admin'>;               // 'editor' | 'viewer'

// ReturnType extracts a function's return type
function createUser(name: string) { return { id: crypto.randomUUID(), name, createdAt: new Date() }; }
type CreatedUser = ReturnType<typeof createUser>;

Template Literal Types

type Entity = 'user' | 'order' | 'product';
type Action = 'created' | 'updated' | 'deleted';
type EventName = `${Entity}:${Action}`;
// 'user:created' | 'user:updated' | ... (9 combinations, all type-safe)

The satisfies Operator

Validates that a value matches a type WITHOUT widening its inferred type — best of both worlds:

type Theme = Record<string, string | number>;
const theme = {
    primary: '#6366f1',
    fontSize: 16,
} satisfies Theme;
theme.primary;   // Type: '#6366f1' (not string!)
theme.fontSize;  // Type: 16 (not number!)

Mapped & Conditional Types

// Make all string properties nullable
type Nullable<T> = { [K in keyof T]: T[K] extends string ? T[K] | null : T[K]; };

// Deep readonly — recursively freeze nested objects
type DeepReadonly<T> = { readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K]; };

These patterns compound. Once you internalize generics, discriminated unions, utility types, and satisfies, you write code that’s simultaneously more flexible and more type-safe.

Further reading: TypeScript Handbook | SO 2025 Survey