Переназначение ключей и типы шаблонных литералов
Переназначайте ключи с помощью «as», создавайте ключи через шаблонные литералы (Capitalize/Uncapitalize) и отбирайте свойства по шаблонам имён.
«Переназначение ключей и типы шаблонных литералов» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: использовать переназначение ключей (предложение as) вместе с шаблонными литеральными типами, чтобы переименовывать, создавать или удалять свойства по шаблонам имён.
- Переименовывать ключи:
K as NewK - Фильтровать ключи с помощью
never - Составлять имена:
`get${Capitalize<K>}`
Переименование ключей
Переименовывайте ключи с помощью конструкции переназначения. Пример: преобразуйте имена в snake_case в camelCasee.
type Original = { first_name: string; last_name: string }
type Camelize<T> = {
[K in keyof T as K extends `${infer A}_${infer B}`
? `${A}${Capitalize<B>}`
: K]: T[K]
}
type UserCamel = Camelize<Original> // { firstName: string; lastName: string }Фильтрация по префиксу
Ключ never удаляется. Шаблон: фильтруйте обработчики событий с помощью `on${string}`.
type Props = { onClick: () => void; onSubmit: () => void; title: string }
type WithoutHandlers<T> = {
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
}
type Clean = WithoutHandlers<Props> // { title: string }Создание методов
Создавайте поверхности APIs по шаблонам имён: шаблон get${Capitalize<K>} используется для создания методов чтения из полей.
type Fields = "name" | "email"
type Getters<T extends string> = {
[K in T as `get${Capitalize<K>}`]: () => string
}
type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }Составление шаблонов
Объединяйте несколько шаблонов, чтобы создавать выразительные имена и обеспечивать единообразное именование в крупных проектах.
type Route = `/${"" | `${string}`}`
type HttpMethod = "get" | "post"
type Endpoints<T extends string, M extends string> = {
[K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}
type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }Советы и подводные камни
Советы:
Переназначение требует много ресурсов; разделяйте сложные типы с помощью псевдонимов.
Используйте простые шаблоны для фильтров: `on${string}`, `data-${string}`.
Используйте вспомогательные средства Capitalize/Uncapitalize/Uppercase/Lowercase.
Упростите API, если создание имён становится чрезмерно сложным.
Проверка фильтрации по префиксу
Быстрая проверка: какой шаблон отображаемого типа удаляет свойства, начинающиеся с on?
Итоги
Итоги: переименовывайте и фильтруйте ключи с помощью их переназначения; создавайте ключи с помощью шаблонных литеральных типов; удаляйте ненужные ключи с помощью never.
Часто задаваемые вопросы
Урок «Переназначение ключей и типы шаблонных литералов» бесплатный?
Да — полный текст урока «Переназначение ключей и типы шаблонных литералов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Переназначение ключей и типы шаблонных литералов»?
Переназначайте ключи с помощью «as», создавайте ключи через шаблонные литералы (Capitalize/Uncapitalize) и отбирайте свойства по шаблонам имён. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Переназначение ключей и типы шаблонных литералов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Отображаемые типы с +/-readonly и +/-?
- Переназначение ключей и типы шаблонных литералов
- Типизация строковых шаблонов (параметры маршрутов, имена событий)