Template literal types — `${string}Id`, Uppercase, Lowercase

~20 daq · TypeScript · Ilg'or Turlar

CSS property nomlari camelCase da, lekin ma'lumotlar bazasida snake_case. Yoki event nomlari onClick, onChange, onBlur — barchasini qo'lda yozish o'rniga, template literal type orqali avtomatik hosil qilish.

Template literal type sintaksisi

JavaScript template literal kabi — lekin tur darajasida:

type Salomlash = `Salom, ${string}!`;

const a: Salomlash = "Salom, Jasur!"; // ✅
const b: Salomlash = "Xayr, Jasur!";  // ❌ — "Salom, " bilan boshlanmaydi

Union bilan kengayish

type Holat = "yuklanmoqda" | "tayyor" | "xato";
type HolatMsg = `holat: ${Holat}`;
// "holat: yuklanmoqda" | "holat: tayyor" | "holat: xato"

Ikki union birga — Kartezian ko'paytma:

type Tomonlar = "top" | "right" | "bottom" | "left";
type Chegaralar = `border-${Tomonlar}`;
// "border-top" | "border-right" | "border-bottom" | "border-left"

Event handler nomlari

type Hodisalar = "click" | "change" | "focus" | "blur";
type Handler<T extends string> = `on${Capitalize<T>}`;

type ClickHandler = Handler<"click">;  // "onClick"
type AllHandlers  = Handler<Hodisalar>;
// "onClick" | "onChange" | "onFocus" | "onBlur"

Built-in string utility turlari

type A = Uppercase<"salom">; // "SALOM"
type B = Lowercase<"SALOM">; // "salom"
type C = Capitalize<"ali">;  // "Ali"
type D = Uncapitalize<"Ali">; // "ali"

camelCase → snake_case (soddalashtirilgan)

type CamelToSnake<S extends string> =
  S extends `${infer Head}${infer Tail}`
    ? Head extends Uppercase<Head>
      ? `_${Lowercase<Head>}${CamelToSnake<Tail>}`
      : `${Head}${CamelToSnake<Tail>}`
    : S;

type A = CamelToSnake<"userName">;     // "user_name"
type B = CamelToSnake<"createdAt">;    // "created_at"

Amaliy — CSS property olish

type CSSProperty<T extends string> = `--${T}`;

type Colors = "primary" | "secondary" | "accent";
type CSSVars = CSSProperty<Colors>;
// "--primary" | "--secondary" | "--accent"

Xulosa

// Asosiy
type T = `${string}Id`;          // har qanday string + "Id"
type T = `on${Capitalize<E>}`;   // event handlers

// Built-in
Uppercase<"abc">   // "ABC"
Lowercase<"ABC">   // "abc"
Capitalize<"abc">  // "Abc"
Uncapitalize<"Abc">  // "abc"

// Union bilan — kartezian
type T = `${A | B}-${C | D}`;   // A*C, A*D, B*C, B*D kombinatsiyalari

Keyingi dars

49-dars: Recursive types — o'ziga murojaat qiladigan turlar