ชนิดลิเทอรัลแม่แบบ: รูปแบบข้อความ

ยินดีต้อนรับ

ประเภทลิเทอรัลแม่แบบพื้นฐาน

type Greeting = `Hello, ${string}`;
const g: Greeting = 'Hello, World'; // OK
// const bad: Greeting = 'Hi there'; // Error

การรวมยูเนียน

type Color = 'red' | 'green' | 'blue';
type Size = 'sm' | 'lg';
type ColorSize = `${Color}-${Size}`;
// 'red-sm' | 'red-lg' | 'green-sm' | ...

รูปแบบชื่อเหตุการณ์

type Entity = 'user' | 'product';
type EventName = `on${Capitalize<Entity>}Created`;
// 'onUserCreated' | 'onProductCreated'

Capitalize และประเภทในตัวอื่น ๆ

type T = Capitalize<'hello world'>; // 'Hello world'
type U = Uppercase<'hello'>;        // 'HELLO'
type L = Lowercase<'WORLD'>;        // 'world'

รูปแบบการสร้างชื่อเมธอดรับค่า

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

พารามิเตอร์เส้นทางที่มีประเภทกำกับ

type RouteParams<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | RouteParams<Rest>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

การตั้งชื่อคุณสมบัติ CSS

type CSSVar = `--${string}`;
const color: CSSVar = '--primary-color'; // OK

ลิเทอรัลแม่แบบในพารามิเตอร์ฟังก์ชัน

function emit<E extends `on${string}`>(event: E): void {
  console.log('Emitting:', event);
}
emit('onClick'); // OK
// emit('click'); // Error — must start with 'on'

การแยกส่วนด้วย infer

type GetSuffix<T extends string> =
  T extends `${infer _Prefix}_${infer Suffix}` ? Suffix : never;
type S = GetSuffix<'user_created'>; // 'created'

อินเตอร์เซกชันกับ Record

type Handlers<T extends string> = Record<`on${Capitalize<T>}`, () => void>;

ตรวจสอบความเข้าใจ

สรุป