Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Utility types для рядків». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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"
```

---

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

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

```javascript
  type A = Uppercase<string>; // string
  ```
2. Не впливають на **runtime** - це суто **типові** перетворення.
3. Можуть комбінуватися з **Conditional Types** для фільтрації рядків.

---

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

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

---

## Практичний приклад: автогенерація 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"` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати513 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.