Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// Remote data — discriminated union for async state
type RemoteData<T> =
    | { status: "idle" }
    | { status: "loading" }
    | { status: "success"; data: T }
    | { status: "error";   error: string };

interface Post { id: number; title: string }

// Narrowing with multiple discriminants
type UserAction =
    | { type: "LOGIN";  payload: { userId: number; token: string } }
    | { type: "LOGOUT" }
    | { type: "UPDATE"; payload: { field: string; value: unknown } };

// Type narrowing with control flow
function processValue(x: string | number | string[]) {
    if (Array.isArray(x)) {
        return x.join(", "); // string[]
    } else if (typeof x === "string") {
        return x.trim();     // string
    } else {
        return x.toFixed(2); // number
    }
}