Эта статья предназначена для людей, которые знают основы TypeScript, но не использовали его в большом проекте и / или не исследовали его расширенные типы.
Моя цель - убедить вас на множестве примеров, что мощная продвинутая система типов TypeScript может обеспечить удовлетворительные решения сложных проблем веб-инженерии и может использоваться для умопомрачительного и увлекательного моделирования.
Посмотрите видео и ознакомьтесь с фрагментами кода ниже:
Строительные блоки
Эти типы вы можете найти в официальной документации TypeScript. Они являются строительными блоками для более сложных / модных вещей. Считайте этот раздел шпаргалкой.
Типы пересечений
Получите всех участников из нескольких типов:
Если вы думаете о типах как о наборах, то здесь вы получите пересечение двух типов, то есть меньший набор. Это может сбивать с толку, поскольку фактический результирующий тип имеет «больший» интерфейс, то есть объединение членов обоих типов.
Типы союзов
Получите общие члены из нескольких типов (результирующий тип - это объединение между двумя, то есть больший набор):
Охранники нестандартного типа
Приведение условного типа:
С помощью ключевого слова is вы можете определять функции для определения «вручную», принадлежит ли значение типу, и TypeScript затем принимает этот тип в истинной части условного оператора.
Утверждение типа
Сокращение приведения, если вы знаете, что определенная переменная определенно определена:
Литеральные типы
Вы можете использовать фактические примитивные литералы (строки, логические значения и т. Д.) В качестве типов:
Если вы думаете о типах как о наборах, тип 'ROCK' - это набор, содержащий только значение 'ROCK'.
Никогда
Выражение, которое никогда не разрешается:
Этот тип волшебным образом появится во многих неожиданных местах в приведенных ниже примерах.
Неизвестный
Более безопасный тип, чем любой другой, для переменных, которым вы не можете доверять:
Типы индексов
Доступ к типам ключей или значений объекта:
Сопоставленные типы
Вывести тип объекта из другого:
Эта мощная абстракция станет более понятной, когда вы увидите ее конкретные приложения.
Условные типы
Пусть тип зависит от другого типа с условием:
Вот реальное приложение для условных типов:
С помощью ключевого слова infer вы можете ввести переменную типа, тип которой будет выведен:
Разные узоры
Функциональное программирование
Это не совсем связано с расширенными типами, это скорее иллюстрация того, как можно программировать с помощью TypeScript легким, но безопасным способом. В мире Java в парадигме чистого кода есть две основные категории классов: объекты и типы данных. Типы данных представляют данные (думают, геттеры и сеттеры), а объекты представляют функциональность (думают, методы). С помощью TypeScript можно еще больше упростить этот подход, просто используя интерфейсы для представления данных и функции для управления данными. Никаких громоздких шаблонов, никаких конструкторов, геттеров и сеттеров. Просто верните простой объект, и машинописный текст обеспечит его правильную структуру.
Дискриминационные союзы
TypeScript понимает, что вы тщательно проверили все возможные варианты типа в операторе switch, и не будет заставлять вас использовать оператор по умолчанию.
Производные типы из констант
Часто нам нужны буквальные типы и как значения, и как типы. Чтобы избежать избыточности, извлеките последнее из первого.
Ненадежный пользовательский ввод
Недоверенный пользовательский ввод - приложение для неизвестного.
Сопоставленные типы
Создайте версию типа только для чтения:
Вывести частичную версию типа:
Получите версию типа, в котором все поля обязательны:
Вывести версию типа, допускающую значение NULL:
Вывести тип только с определенными полями (Выбрать):
Пример из практики, где мы выбираем определенные столбцы из таблицы SQL, а TypeScript автоматически выводит для нас частичный тип:
Вывести запись (все свойства имеют один и тот же заданный тип) из типа:
Условные типы
Типы фильтровальных соединений
Отфильтровать / извлечь подмножество из типа:
Отличить / исключить подмножество из типа:
Исключить null и undefined из типизированного (таким образом, делая его не допускающим значения NULL):
Пропускать определенные поля из типа:
Вот пример из практики (как правильно набрать HOC React.js):
Комбинирование с отображенными типами
Получить свойства функции объекта:
Получите нефункциональные свойства объекта:
Получить возвращаемый тип функции:
Получите тип экземпляра функции-конструктора:
Перспективный Redis
Еще один пример из практики. Все методы в библиотеке npm redis используют обратные вызовы. Нам нравится использовать обещания и async / await. Мы можем унаследовать новый тип от старого в зависимости от того, как мы его построим.
Заключение
Я надеюсь, что убедил вас в силе TypeScript. Теперь вперед и НАБИРАЙТЕ!
Ресурсы:
Связаться
В smartive мы разрабатываем сложные веб-приложения. У вас есть какие-либо вопросы? Не стесняйтесь обращаться к нам в любое время: [email protected]
