TypeScript Generics: Các Mẫu Nâng Cao cho API An Toàn Kiểu

function identity<T>(arg: T): T {
    return arg;
}

const num = identity<number>(42); // T is number
const str = identity("Hello");    // T is inferred as "Hello" (literal type)

interface HasLength {
    length: number;
}

function logLength<T extends HasLength>(arg: T): T {
    console.log(arg.length);
    return arg;
}

logLength("string"); // OK, strings have .length
logLength([1, 2, 3]); // OK, arrays have .length
// logLength(10);    // Error: number doesn't have .length

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

const user = { name: "Alice", age: 30 };
getProperty(user, "name"); // OK, returns string
getProperty(user, "age");  // OK, returns number
// getProperty(user, "email"); // Error: 'email' doesn't exist

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type FetchedData = UnwrapPromise<Promise<{ id: number; name: string }>>;
// FetchedData is { id: number; name: string }

// Extract a function's first argument type:
type FirstArg<T> = T extends (first: infer F, ...rest: any[]) => any ? F : never;
type Fn = (id: number, name: string) => void;
type IdType = FirstArg<Fn>; // number

type ToArray<T> = T extends any ? T[] : never;
type StrOrNumArray = ToArray<string | number>; // string[] | number[]
// NOT (string | number)[]

// Prevent distribution by wrapping in a tuple:
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
type Both = ToArrayNonDist<string | number>; // (string | number)[]

type MyReadonly<T> = {
    readonly [P in keyof T]: T[P];
};

type Mutable<T> = {
    -readonly [P in keyof T]: T[P]; // remove readonly
};

type RequiredProperties<T> = {
    [P in keyof T]-?: T[P]; // remove optional
};

// Remap keys using 'as'
type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface User { name: string; age: number; }
type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number; }

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // "onClick"
type ChangeEvent = EventName<'change'>; // "onChange"

// Build a full event-handler map from a union:
type AllHandlers = {
    [K in 'click' | 'focus' | 'blur' as EventName<K>]?: (e: Event) => void;
};
// { onClick?: ...; onFocus?: ...; onBlur?: ...; }

declare const __brand: unique symbol;
type Brand<T, B> = T & { [__brand]: B };

type UserId  = Brand<string, 'UserId'>;
type OrderId = Brand<string, 'OrderId'>;

function getUser(id: UserId) { /* ... */ }
function getOrder(id: OrderId) { /* ... */ }

const uid  = "u_123" as UserId;
const oid  = "o_456" as OrderId;

getUser(uid);   // ✅ OK
getOrder(oid);  // ✅ OK
// getUser(oid); // ❌ Error: OrderId is not assignable to UserId

type Circle    = { kind: 'circle';    radius: number };
type Rectangle = { kind: 'rectangle'; width: number; height: number };
type Triangle  = { kind: 'triangle';  base: number; height: number };

type Shape = Circle | Rectangle | Triangle;

function area(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':    return Math.PI * shape.radius ** 2;
        case 'rectangle': return shape.width * shape.height;
        case 'triangle':  return 0.5 * shape.base * shape.height;
        default:
            // exhaustiveness check - compile error if a new Shape is added
            const _exhaustive: never = shape;
            throw new Error(`Unhandled shape: ${JSON.stringify(_exhaustive)}`);
    }
}

type Prepend<T, Tuple extends unknown[]> = [T, ...Tuple];

function withLogger<Args extends unknown[], R>(
    fn: (...args: Args) => R,
    label: string
): (...args: Args) => R {
    return (...args: Args) => {
        console.log(`[${label}]`, ...args);
        return fn(...args);
    };
}

const add = (a: number, b: number) => a + b;
const loggedAdd = withLogger(add, 'add');
loggedAdd(2, 3); // TypeScript knows this takes (number, number), not (any, any)

class QueryBuilder<T = Record<string, unknown>> {
    private query: Record<string, unknown> = {};

    select<K extends keyof T>(keys: K[]): QueryBuilder<Pick<T, K>> {
        this.query.select = keys;
        return this as unknown as QueryBuilder<Pick<T, K>>;
    }

    where(condition: Partial<T>): QueryBuilder<T> {
        this.query.where = condition;
        return this;
    }

    execute(): Promise<T[]> {
        // Implementation
        return Promise.resolve([]);
    }
}

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

// Result is inferred as Promise<Pick<User, 'id' | 'name'>[]>
const result = new QueryBuilder<User>()
    .select(['id', 'name'])
    .where({ age: 30 })
    .execute();

// Branded request IDs prevent mixing correlation identifiers
type RequestId = Brand<string, 'RequestId'>;

// Discriminated union response envelope
type ApiResponse<T> =
    | { ok: true;  data: T;       requestId: RequestId }
    | { ok: false; error: string; requestId: RequestId };

// Generic fetch wrapper with full type inference
async function apiFetch<T>(
    url: string,
    schema: (raw: unknown) => T   // runtime validator (e.g. zod.parse)
): Promise<ApiResponse<T>> {
    const requestId = crypto.randomUUID() as RequestId;
    try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const raw = await res.json();
        return { ok: true, data: schema(raw), requestId };
    } catch (err) {
        return { ok: false, error: String(err), requestId };
    }
}

// Usage - TypeScript infers the shape of `user` from the schema function
const resp = await apiFetch('/api/users/1', (raw) => {
    if (typeof raw !== 'object' || !raw) throw new Error('invalid');
    return raw as { id: number; name: string };
});

if (resp.ok) {
    console.log(resp.data.name); // fully typed
} else {
    console.error(resp.error);
}

import React from 'react';

interface WithLoadingProps {
    isLoading: boolean;
}

function withLoading<P extends object>(
    WrappedComponent: React.ComponentType<P>
): React.FC<P & WithLoadingProps> {
    return function WithLoadingComponent({ isLoading, ...props }: P & WithLoadingProps) {
        if (isLoading) return <div>Loading...</div>;
        return <WrappedComponent {...(props as P)} />;
    };
}

interface ProfileProps { name: string; }
const Profile = ({ name }: ProfileProps) => <div>{name}</div>;
const ProfileWithLoading = withLoading(Profile);

// <ProfileWithLoading isLoading={true} name="Alice" />
// TypeScript enforces both isLoading and name - nothing is lost.