Шаблонні літеральні типи TypeScript для типізованих API

Шаблонні літеральні типи TypeScript — це потужна функція, представлена у TypeScript 4.1, яка дозволяє виконувати маніпуляції з рядками на рівні типів. Вони відкривають цілий світ можливостей для створення надійних і підтримуваних API, дозволяючи виявляти помилки під час компіляції, які інакше проявилися б лише під час виконання. Це, у свою чергу, призводить до покращення досвіду розробників, полегшення рефакторингу та створення більш надійного коду.

Що таке шаблонні літеральні типи?

За своєю суттю, шаблонні літеральні типи — це рядкові літеральні типи, які можна конструювати шляхом поєднання рядкових літеральних типів, об'єднань типів та змінних типів. Уявіть їх як рядкову інтерполяцію для типів. Це дозволяє створювати нові типи на основі існуючих, забезпечуючи високий ступінь гнучкості та виразності.

Ось простий приклад:

type Greeting = "Hello, World!";

type PersonalizedGreeting = `Hello, ${T}!`;

type MyGreeting = PersonalizedGreeting<"Alice">; // type MyGreeting = "Hello, Alice!"

У цьому прикладі PersonalizedGreeting — це шаблонний літеральний тип, який приймає узагальнений параметр типу T, що має бути рядком. Потім він створює новий тип, інтерполюючи рядковий літерал "Hello, " зі значенням T та рядковим літералом "!". Отриманий тип, MyGreeting, є "Hello, Alice!".

Переваги використання шаблонних літеральних типів

• Підвищена безпека типів: Виявлення помилок під час компіляції, а не під час виконання.
• Покращена підтримка коду: Робить ваш код легшим для розуміння, модифікації та рефакторингу.
• Кращий досвід розробника: Надає точніше та корисніше автодоповнення та повідомлення про помилки.
• Генерація коду: Дозволяє створювати генератори коду, які виробляють типізований код.
• Дизайн API: Забезпечує дотримання обмежень щодо використання API та спрощує обробку параметрів.

Реальні приклади використання

1. Визначення кінцевих точок API

Шаблонні літеральні типи можна використовувати для визначення типів кінцевих точок API, забезпечуючи передачу правильних параметрів до API та коректну обробку відповіді. Розглянемо платформу електронної комерції, яка підтримує кілька валют, таких як USD, EUR та JPY.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //In practice, this could be a more specific type

type GetProductEndpoint = `/products/${ProductID}/${C}`;

type USDEndpoint = GetProductEndpoint<"USD">; // type USDEndpoint = "/products/${string}/USD"

Цей приклад визначає тип GetProductEndpoint, який приймає валюту як параметр типу. Отриманий тип є рядковим літеральним типом, що представляє кінцеву точку API для отримання продукту у вказаній валюті. Використовуючи цей підхід, ви можете гарантувати, що кінцева точка API завжди буде сконструйована правильно і що буде використана правильна валюта.

2. Валідація даних

Шаблонні літеральні типи можна використовувати для валідації даних під час компіляції. Наприклад, ви можете використовувати їх для перевірки формату номера телефону або адреси електронної пошти. Уявіть, що вам потрібно перевіряти міжнародні номери телефонів, які можуть мати різні формати залежно від коду країни.

type CountryCode = "+1" | "+44" | "+81"; // US, UK, Japan
type PhoneNumber = `${C}-${N}`;

type ValidUSPhoneNumber = PhoneNumber<"+1", "555-123-4567">; // type ValidUSPhoneNumber = "+1-555-123-4567"

//Note: More complex validation might require combining template literal types with conditional types.

Цей приклад показує, як можна створити базовий тип номера телефону, який забезпечує певний формат. Більш складна валідація може вимагати поєднання шаблонних літеральних типів з умовними типами та шаблонами, подібними до регулярних виразів, усередині шаблонного літералу.

3. Генерація коду

Шаблонні літеральні типи можна використовувати для генерації коду під час компіляції. Наприклад, ви можете використовувати їх для генерації назв компонентів React на основі назви даних, які вони відображають. Поширеним шаблоном є генерація назв компонентів за зразком <Entity>Details.

type Entity = "User" | "Product" | "Order";
type ComponentName = `${E}Details`;

type UserDetailsComponent = ComponentName<"User">; // type UserDetailsComponent = "UserDetails"

Це дозволяє вам автоматично генерувати назви компонентів, які є послідовними та описовими, зменшуючи ризик конфліктів імен та покращуючи читабельність коду.

4. Обробка подій

Шаблонні літеральні типи чудово підходять для визначення назв подій у типізований спосіб, забезпечуючи правильну реєстрацію слухачів подій та отримання обробниками подій очікуваних даних. Розглянемо систему, де події класифікуються за модулем та типом події, розділеними двокрапкою.

type Module = "user" | "product" | "order";
type EventType = "created" | "updated" | "deleted";
type EventName = `${M}:${E}`;

type UserCreatedEvent = EventName<"user", "created">; // type UserCreatedEvent = "user:created"

interface EventMap {
  [key: EventName]: (data: any) => void; //Example: The type for event handling
}

Цей приклад демонструє, як створювати назви подій, що відповідають послідовному шаблону, покращуючи загальну структуру та типізацію системи подій.

Просунуті техніки

1. Поєднання з умовними типами

Шаблонні літеральні типи можна поєднувати з умовними типами для створення ще більш складних перетворень типів. Умовні типи дозволяють визначати типи, які залежать від інших типів, що дає змогу виконувати складну логіку на рівні типів.

type ToUpperCase = S extends Uppercase ? S : Uppercase;

type MaybeUpperCase = Upper extends true ? ToUpperCase : S;

type Example = MaybeUpperCase<"hello", true>; // type Example = "HELLO"
type Example2 = MaybeUpperCase<"world", false>; // type Example2 = "world"

type MyObject = {
  name: string;
  age: number;
};

type AddPrefix = {
  [K in keyof T as `${Prefix}${string & K}`]: T[K];
};

type PrefixedObject = AddPrefix;
// type PrefixedObject = {
//    data_name: string;
//    data_age: number;
// }

type MyString = "hello world";

type CapitalizedString = Capitalize; // type CapitalizedString = "Hello world"

type UpperCasedString = Uppercase;   // type UpperCasedString = "HELLO WORLD"