TypeScript Template Literal Types — type ที่ประกอบจาก string

Template literal types สร้าง union type ใหม่จากการรวม string types เข้าหากัน

type Direction = 'top' | 'right' | 'bottom' | 'left';
type CSSProperty = `margin-${Direction}`;
// = 'margin-top' | 'margin-right' | 'margin-bottom' | 'margin-left'

type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;
// = 'onClick' | 'onFocus' | 'onBlur'

ใช้กับ Mapped Types:

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

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

Infer ใน template literal:

type ExtractRoute<T extends string> =
  T extends `${string}/${infer Segment}/${string}` ? Segment : never;

type R = ExtractRoute<'/api/users/create'>; // = 'users'

Built-in utility: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>