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

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

Что такое шаблонные литеральные типы?

По своей сути, шаблонные литеральные типы — это строковые литеральные типы, которые можно конструировать, комбинируя строковые литеральные типы, типы-объединения и переменные типов. Думайте о них как о строковой интерполяции для типов. Это позволяет создавать новые типы на основе существующих, обеспечивая высокую степень гибкости и выразительности.

Вот простой пример:

type Greeting = "Hello, World!";

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

type MyGreeting = PersonalizedGreeting<"Alice">; // тип 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; //На практике это мог бы быть более специфичный тип

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

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

Этот пример определяет тип GetProductEndpoint, который принимает валюту в качестве параметра типа. Результирующий тип — это строковый литеральный тип, представляющий конечную точку API для получения продукта в указанной валюте. Используя этот подход, вы можете гарантировать, что конечная точка API всегда конструируется правильно и используется правильная валюта.

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

Шаблонные литеральные типы можно использовать для валидации данных во время компиляции. Например, вы можете использовать их для проверки формата номера телефона или адреса электронной почты. Представьте, что вам нужно валидировать международные телефонные номера, которые могут иметь разные форматы в зависимости от кода страны.

type CountryCode = "+1" | "+44" | "+81"; // США, Великобритания, Япония
type PhoneNumber = `${C}-${N}`;

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

//Примечание: Более сложная валидация может потребовать комбинации шаблонных литеральных типов с условными типами.

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

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

Шаблонные литеральные типы можно использовать для генерации кода во время компиляции. Например, вы можете использовать их для генерации имен компонентов React на основе имени данных, которые они отображают. Распространенным шаблоном является генерация имен компонентов по схеме `<Entity>Details`.

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

type UserDetailsComponent = ComponentName<"User">; // тип UserDetailsComponent = "UserDetails"

Это позволяет автоматически генерировать имена компонентов, которые являются последовательными и описательными, снижая риск конфликтов имен и улучшая читаемость кода.

4. Обработка событий

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

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

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

interface EventMap {
  [key: EventName]: (data: any) => void; //Пример: Тип для обработки событий
}

Этот пример демонстрирует, как создавать имена событий, которые следуют последовательному шаблону, улучшая общую структуру и типобезопасность системы событий.

Продвинутые техники

1. Комбинирование с условными типами

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

type ToUpperCase = S extends Uppercase ? S : Uppercase;

type MaybeUpperCase = Upper extends true ? ToUpperCase : S;

type Example = MaybeUpperCase<"hello", true>; // тип Example = "HELLO"
type Example2 = MaybeUpperCase<"world", false>; // тип 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; // тип CapitalizedString = "Hello world"

type UpperCasedString = Uppercase;   // тип UpperCasedString = "HELLO WORLD"