Сила Typescript и универсальных типов

Почему машинопись?

Поскольку Javascript (JS) — это язык программирования, который является одной из основных технологий Интернета, более 97% веб-сайтов используют JS. Typescript (TS) — это язык на основе Javascript с дополнительным набором инструментов.

Например, у нас есть возможность указать тип для наших переменных. мы можем объявить переменную «x» и присвоить ей тип boolean. теперь мы можем без проблем использовать переменную «x» как логическое значение, но если по ошибке мы попытаемся передать строку или, может быть, поместим ее туда, где ожидается целое число, мы немедленно получим ошибку.

TypeScript всегда указывает на ошибки компиляции во время разработки (прекомпиляции), поэтому мы можем избежать ошибок компиляции, которые обычно трудно обнаружить и исправить, если мы используем только Javascript.

Выполнение.

Чтобы указать тип переменной, мы будем использовать оператор «:» с типом выбора на этапе объявления.

Также у нас есть функции и типы объектов. в функциях у нас есть тип для аргументов, а после оператора «:» у нас есть возвращаемый тип. Тип объекта (форма) может быть объявлен двумя способами: интерфейсом или псевдонимами типов. (в приведенном ниже примере мы используем интерфейс).

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

Пример

Функция, которая возвращает объект ICustomer на основе данных объекта IPerson.

В левой части примера мы видим 2 интерфейса. один для описания человека и один для клиента. клиентский интерфейс расширяет человека, поэтому он имеет все свойства IPerson и дополнительные 2 свойства ICustomer.

С правой стороны у нас есть функция addCustomer, которая получает объект IPerson, добавляет «уникальный» идентификатор и пустую корзину для возврата нового объекта ICustomer.

Почему это полезно? Что ж, давайте предположим, что мы забыли вернуть одно из свойств, которые есть у клиента, мы немедленно получим правильное сообщение об ошибке.

В этом простом примере это очевидно и не так увлекательно, как когда есть тяжелая функция с большим количеством логики и строчек кода. напоминание о том, что мы хотим вернуть правильный объект, может пригодиться, кроме того, переменная, которой мы назначим результат, получит тип ICustomer, так что просто посмотрите на этот intellisense, разве это не здорово?

Дженерики

Пока мы знаем, как без проблем привести тип к объекту. но в некоторых случаях мы не знаем правильный тип объекта, с которым будем иметь дело.

typescript может создать компонент, который может работать с различными типами, а не с одним. например, мы можем использовать тип «любой».

Ты видишь проблему?.

FuncAny получает объект Person типа IPerson, но возвращает «любой», так что теперь мы теряем информацию о том, что это за тип, когда функция возвращается. Итак, что мы можем с этим поделать? Дженерики.

Теперь вы можете видеть, что наша результирующая переменная получает правильный тип IPerson, поскольку мы передали функцию в начале.

«Тип» между операторами ‹› или обычно вы видите только букву T — это универсальный тип, который позволяет нам зафиксировать тип и позволяет нам передавать информацию этого типа в одну сторону функции и из другой.

Кроме того, функция FuncAny теперь еще более многоразовая. Если мы укажем тип перед вызовом функции, он подскажет нам с интеллектуальными и правильными и читаемыми ошибками, если мы совершим какую-либо ошибку.

В дополнение к универсальным функциям мы также можем создать универсальный интерфейс.

В приведенном ниже примере показана переменная MyFile типа IFile с IMovie внутри. IFile — это общий интерфейс, который устанавливает тип fileData на основе указанного нами типа.

С IFile‹IMovie› мы получаем строку для свойства fileName и массив IMovie для свойства fileData.

Общие стрелочные функции

Меня иногда спрашивают, есть ли способ объявить универсальную стрелочную функцию? Ответ — да, Альдо, на мой взгляд, это немного сложнее и менее читабельно, чем объявление функции, но это выглядит так.

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

Краткое содержание

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

надеюсь, вы найдете удовольствие в чтении этой статьи, увидимся в следующей :)