Скачать или смотреть Встроенные типы данных для манипулирования строками в TypeScript

Что такое встроенные типы для манипулирования строками в TypeScript?

Встроенные типы для манипулирования строками — это вспомогательные типы TypeScript, позволяющие преобразовывать строковые литералы на уровне типов.

Проще говоря:

Они позволяют изменять форму строковых типов (верхний регистр, нижний регистр и т. д.) без вмешательства в JavaScript во время выполнения.

Они работают только со строковыми литералами, а не с обычными строковыми значениями.

Четыре встроенных типа строк

TypeScript предоставляет четыре встроенных типа для манипулирования строками:

Тип верхнего регистра⟨

Тип нижнего регистра⟨

Тип заглавных букв⟨

Тип сложения с заглавной буквы⟨

1. Тип верхнего регистра⟨

Преобразует каждый символ в верхний регистр.

type Status = "loading" | "success" | "error";

type UpperStatus = Uppercase⟨Status⟩;

// "ЗАГРУЗКА" | "УСПЕХ" | "ОШИБКА"

Распространенный сценарий использования

Принудительное соблюдение констант

Заголовки API

Ключи переменных окружения

2. Lowercase⟨Type⟩

Преобразует каждый символ в нижний регистр.

type Method = "GET" | "POST";

type LowerMethod = Lowercase⟨Method⟩;

// "get" | "post"

Распространенный сценарий использования

Нормализация типов ввода

Сравнения без учета регистра

3. Capitalize⟨Type⟩

Преобразует в верхний регистр только первый символ строки.

type Event = "click" | "submit";

type CapitalizedEvent = Capitalize⟨Event⟩;

// "Click" | "Отправить"

Распространенный сценарий использования

Метки пользовательского интерфейса

Генерация имен классов или компонентов

4. Uncapitalize⟨Type⟩

Преобразует в нижний регистр только первый символ строки.

type Name = "User" | "Admin";

type CamelName = Uncapitalize⟨Name⟩;

// "user" | "admin"

Распространенный сценарий использования

Соглашения CamelCase

Преобразования ключей объектов

Как работают эти типы (ментальная модель)

Вы можете рассматривать их как строковые функции времени компиляции:

Uppercase⟨"hello"⟩ → "HELLO"
Lowercase⟨"HELLO"⟩ → "hello"
Capitalize⟨"user"⟩ → "User"
Uncapitalize⟨"Admin"⟩ → "admin"

JavaScript не генерируется.

Всё происходит внутри системы типов TypeScript.

В сочетании с литеральными типами шаблонов

Вот где они действительно проявляют себя.

type Route = "user" | "post";

type ApiRoute = `/api/${Lowercase⟨Route⟩}`;

// "/api/user" | "/api/post"

Другой пример:

type EventName = "click" | "hover";

type HandlerName = `on${Capitalize⟨EventName⟩}`;

// "onClick" | "onHover"

Это чрезвычайно распространено во фреймворках и библиотеках.

Важные ограничения
1. Работает только со строковыми литералами
type A = Uppercase⟨string⟩;

// всё ещё просто строка (без преобразования)

Вы получите полезные результаты только тогда, когда TypeScript знает точную строку.

2. Только на уровне типов

Эти типы:

НЕ преобразуют значения во время выполнения

НЕ изменяют фактические строки

Влияют только на проверку типов и автозаполнение

Реальные сценарии использования

Имена обработчиков событий, генерируемые автоматически

Имена классов CSS со строгой типизацией

Определения маршрутов API

Преобразования типов действий Redux

Вспомогательные функции GraphQL или OpenAPI

Когда использовать встроенные строковые типы

Используйте их, когда:

Вам нужны более безопасные API на основе строк

Вы генерируете имена из известных строк

Вам нужны автозаполнение и гарантии на этапе компиляции

Избегайте их, когда:

Работа с динамическими строками во время выполнения

Вам необходимо фактическое преобразование строк во время выполнения

Краткое описание

Встроенные типы манипулирования строками преобразуют строковые литералы во время компиляции, используя Uppercase, Lowercase, Capitalize и Uncapitalize.