Utility types для рядків

TypeScriptMiddle~2 хв читання

Загальна ідея

TypeScript з версії 4.1+ підтримує template literal types і string manipulation types - це можливість змінювати рядки прямо на рівні типів.

Основні утиліти для зміни регістру

Тип	Що робить	Приклад
`Uppercase<S>`	Перетворює всі символи рядка `S` на верхній регістр	`"hello"` → `"HELLO"`
`Lowercase<S>`	Перетворює всі символи рядка `S` на нижній регістр	`"Hello"` → `"hello"`
`Capitalize<S>`	Робить перший символ рядка великим, решту - без змін	`"hello"` → `"Hello"`
`Uncapitalize<S>`	Робить перший символ рядка малим, решту - без змін	`"Hello"` → `"hello"`

Приклади коду

javascript

type A = Uppercase<"hello world">;     // "HELLO WORLD"
type B = Lowercase<"HELLO WORLD">;     // "hello world"
type C = Capitalize<"typescript">;     // "Typescript"
type D = Uncapitalize<"ReactApp">;     // "reactApp"

Використання з template literal types

Ці утиліти особливо потужні в поєднанні з інтерполяцією рядків у типах:

javascript

type EventName<T extends string> = `on${Capitalize<T>}`;

type ClickEvent = EventName<"click">;  // "onClick"
type ChangeEvent = EventName<"change">; // "onChange"

Використання для автогенерації ключів об'єкта

javascript

type Keys = "name" | "email" | "phone";
type Getters = `get${Capitalize<Keys>}`;
// "getName" | "getEmail" | "getPhone"

Приклад зі змішаними утилітами

Можна комбінувати кілька утиліт поспіль:

javascript

type Format<S extends string> = Uppercase<Capitalize<S>>;

type R = Format<"react">; // "REACT"

Застосування до keyof

Дуже часто ці утиліти застосовують до ключів інтерфейсів:

javascript

interface User {
  firstName: string;
  lastName: string;
}

type UpperKeys = Uppercase<keyof User>;
// "FIRSTNAME" | "LASTNAME"

type Getters = `get${Capitalize<keyof User>}`;
// "getFirstName" | "getLastName"

Особливості та обмеження

Працюють лише з рядковими літеральними типами (інакше результатом буде просто string):

javascript

type A = Uppercase<string>; // string

Не впливають на runtime - це суто типові перетворення.
Можуть комбінуватися з Conditional Types для фільтрації рядків.

Інші корисні типи для рядків (з template literals)

Тип / прийом	Призначення	Приклад
Інтерполяція	Склеювання рядків на рівні типів	`type ID = id-${T}; type A = ID<"user">; // "id-user"`
Розділення через `extends`	Перевірка формату	`type IsPrefixed = S extends id-${string} ? true : false;`
Комбінування типів	Динамічне створення рядкових варіантів	`type Status = "loading" \| "success"; type Msg = ${Uppercase<Status>}_STATE; // "LOADING_STATE" \| "SUCCESS_STATE"`

Практичний приклад: автогенерація event-імен

javascript

type Events = "click" | "submit" | "hover";

type Handlers = {
  [E in Events as `on${Capitalize<E>}`]: (e: E) => void;
};

/*
{
  onClick: (e: "click") => void;
  onSubmit: (e: "submit") => void;
  onHover: (e: "hover") => void;
}
*/

Підсумок

Утиліта	Опис	Приклад результату
`Uppercase<S>`	Перетворює рядок `S` на верхній регістр	`"abc"` → `"ABC"`
`Lowercase<S>`	Перетворює рядок `S` на нижній регістр	`"ABC"` → `"abc"`
`Capitalize<S>`	Робить перший символ рядка великим	`"react"` → `"React"`
`Uncapitalize<S>`	Робить перший символ рядка малим	`"React"` → `"react"`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.