Hari 14: Template Literal Types & Infer

Template Literal Types (TS 4.1+)

type EventName = "click" | "hover" | "focus";
type Handler = `on${Capitalize}`;
// "onClick" | "onHover" | "onFocus"

type CRUD = "create" | "read" | "update" | "delete";
type Model = "user" | "post" | "comment";
type APIEndpoint = `/${Model}/${string}`;
// "/user/...", "/post/...", "/comment/..."

// CSS unit type
type CSSUnit = "px" | "em" | "rem" | "%" | "vh" | "vw";
type CSSValue = `${number}${CSSUnit}`;
// "16px", "1.5rem", "100%", etc.

infer — Ekstrak Tipe dari Struktur

// Ekstrak return type
type GetReturnType any>
    = T extends (...args: any) => infer R ? R : never;

// Ekstrak tipe Promise
type Awaited2 = T extends Promise ? V : T;

// Ekstrak parameter pertama
type FirstArg any>
    = T extends (first: infer F, ...rest: any) => any ? F : never;

function greet(name: string, age: number): string {
    return `${name} (${age})`;
}
type GreetReturn = GetReturnType; // string
type GreetFirst = FirstArg;       // string