Frog Proger 05 сентября 2024

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

От рекурсивных псевдонимов типов до дискриминированных объединений – эти приемы помогут вам писать более эффективный и безопасный код.
🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Хочешь уверенно проходить IT-интервью?

Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

  • Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
  • Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
  • Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy


Этот материал взят из нашей еженедельной email-рассылки, посвященной фронтенду. Подпишитесь, чтобы быть в числе первых, кто получит дайджест.

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

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Интерполяция особенно полезна при работе с системами событий, API или для обеспечения согласованности именования в большом проекте. Здесь мы используем функцию Capitalize для автоматического создания имен геттеров:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Брендированные типы

Брендирование позволяет создавать уникальные идентификаторы для предотвращения смешивания типов, даже если они принадлежат к одному и тому же типу данных. В этом примере функции createUserId и createPostId принимают строку, но возвращают специальные типы UserId и PostId. Эти типы не могут быть напрямую присвоены друг другу, несмотря на то, что они оба являются строками:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Условные типы с infer

Условные типы позволяют извлекать информацию о типах из сложных структур с помощью ключевого слова infer. Это особенно полезно при работе с функциями, промисами или массивами:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Шаблонные литералы

Шаблонные литералы – это комбинация литеральных типов и операторов для манипуляций со строками, которая позволяет создавать мощные ограничения типов на уровне строк. Они особенно полезны при работе с CSS-in-JS, определением API маршрутов или любыми сценариями, требующими строгих ограничений на уровне строк:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Рекурсивные псевдонимы типов

Рекурсивные псевдонимы типов (алиасы) позволяют определять типы, которые ссылаются на самих себя. Это особенно полезно при работе со сложными древоподобными структурами или глубоко вложенными данными (ответы API, конфигурационные файлы и т. п.):

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Вариативные типы кортежей

Вариативные типы, введенные в TypeScript 4.0, позволяют более гибко манипулировать кортежами. Они особенно полезны при работе с функциями, которые принимают переменное количество аргументов, или когда необходимо динамически объединять кортежи:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода
👨‍💻🎨 Библиотека фронтендера
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Переименование ключей с помощью as

При работе с объектами типа ключ-значения можно использовать as для переименования ключей – это позволяет создавать производные типы с измененными именами свойств:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Константные утверждения

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

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Дискриминированные объединения с never

Дискриминированные объединения позволяют создавать типы, которые могут представлять несколько различных вариантов объекта. Для этого используется дискриминант – свойство, которое указывает, какой конкретный тип представляет данный объект. В сочетании с типом never такие объединения обеспечивают полное соответствие шаблонов и повышают типобезопасность:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Фильтрация ключей по типам значений

Типы ключ-значение можно комбинировать с условными – для фильтрации по типам значений. Это полезно при работе с подмножествами свойств объектов на основе их типов, например, при валидации форм или в процессе преобразования данных:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Создание типобезопасных эмиттеров событий с помощью дженериков

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

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Самоссылающиеся типы

Самоссылающиеся типы в TypeScript позволяют создавать сложные, вложенные структуры данных, сохраняя при этом типобезопасность:

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Непрозрачные типы с использованием unique symbol

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

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Последовательности целых чисел на уровне типов

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

🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

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

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

  • При работе с формами, где пользователь может заполнить только часть полей.
  • При обновлении состояния в приложениях, когда нужно изменить только некоторые свойства объекта.
  • При работе с API, которые могут возвращать частичные данные.
🚀 Продвинутый TypeScript: 15 приемов для создания надежного кода

Оригинал статьи опубликован здесь.

***

Откройте для себя основы фронтенда с курсом Frontend Basic от Proglib Academy и создайте свое первое портфолио с помощью HTML, CSS и JavaScript.

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Hotel Search Team Lead (Golang)
по итогам собеседования
Golang-разработчик
Пермь, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ