7 новых и интересных функций TypeScript

7 новых и интересных функций TypeScript

От автора: обзор функций, доступных в TypeScript v3.6 +, на которые вы обязательно должны обратить внимание.

Языковая группа TypeScript выпускает новые функции в удивительном темпе без существенных серьезных изменений. Как видно из недавнего опроса State of Javascript, это привело к все более успешному принятию языка в сообществе. В этом посте мы постараемся обобщить наиболее важные функции. Мы выделим функции из следующих последних выпусков:

Графики выпуска TypeScript

Примечание. Прежде чем рассматривать подробно какую-либо из этих функций, вам следует посетить игровую площадку TypeScript, где вы можете протестировать все функции. Я бы порекомендовал переключиться на более старую версию (кликните раскрывающийся список версий в верхнем левом углу), чтобы увидеть, как более новая версия обрабатывает сценарий использования, который не поддерживался ранее:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Демонстрация игровой площадки TypeScript

Совет: Используйте Bit (Github) для создания собственной коллекции компонентов пользовательского интерфейса. Это как библиотека компонентов, только каждый компонент имеет свои версии и устанавливается совершенно независимо. Наслаждайтесь быстрой разработкой и согласованным пользовательским интерфейсом. Просто извлекайте повторно используемые компоненты из приложений по ходу работы. Это так просто.

Bit поддерживает Javascript, TypeScript, React, React TypeScript, Angular и Vue.

1. Опциональные цепочки

Доступно в версии v3.7 и выше

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

В приведенном ниже примере, чтобы получить доступ к address, вам нужно пройти data.customer.address, и, возможно, что данные или клиент имеют значение undefined. Обычно проверяют, определен ли каждый уровень этого обхода в сочетании с оператором && или другими подобными приемами, как показано в примере.

Теперь вы можете использовать для доступа к данным оператор опциональной цепочки «.?». Таким образом, вместо сбоя во время выполнения, вложенная цепочка вернет undefined в любом месте цепочки, если есть родитель, который еще не определен.

2. Нулевое коалесцирование

Доступно в версии v3.7 и выше

Оператор нулевого коалесцирования (??) является альтернативой оператору OR (||). Возвращает выражение правой стороны, если слева – null или undefined. Это отличается от ||?|| по сути тем, что это является логическим оператором OR в JavaScript, и мы пытаемся использовать короткое замыкание, чтобы вернуть первое не ложное значение. Это может иметь непредвиденные последствия, потому что число 0 или пустая строка будут рассматриваться, как false, когда это может быть допустимым вводом в качестве требования. Давайте проиллюстрируем это на примере:

Таким образом, мы можем однозначно провести различие между чем-то, что является undefined или false (что может быть непросто из-за того, как JavaScript воспринимает false).

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

Доступно в версии v3.7 и выше

Большинство реальных типов данных являются рекурсивными. Например, если вы пытаетесь работать с иерархическими данными, вы обнаружите повторяющиеся шаблоны данных того же типа. Хорошим примером является JSON, который по сути является хеш-картой, и которая, в свою очередь, может содержать еще одну карту или массив карт.

До версии 3.6, если вам нужно было определить простой тип JSON, это должно было выглядеть примерно так:

Если вы попытаетесь наложить типы в строках 1 и 2 на 3 как одну строку, вы можете получить следующую ошибку: «Type alias JSONValue circularly references itself». Это было эффективно решено в v3.7, и вы можете написать это просто, как показано ниже:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

4. Подписи asserts

Доступно в версии v3.7 и выше

Вы должны знать, что в TypeScript есть средства защиты типов, которые в JavaScript хорошо работают с операторами native typeof и instanceOf. Это помогает нам добавить предварительные реквизиты к параметрам функции, чтобы ограничить их определенными типами.

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

Приведенный выше код выглядит хорошо, но TypeScript все равно будет выдавать предупреждение «getFullYear is not available on unknown type».

Теперь, начиная с v3.7, у TypeScript есть новое ключевое слово asserts, которое позволит компилятору знать правильный тип с точки зрения оператора контроля. Для функции вместо возвращаемого типа добавьте asserts <param> as <type>.

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

5. Лучшая обратная связь для промисов

Улучшено с версии 3.6

Распространенной ошибкой является попытка использовать полезную нагрузку промисов непосредственно в коде и забыть использовать await или then, как показано ниже:

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

Нет упоминания промиса

Начиная с версии 3.6, компилятор достаточно умен, чтобы предположить, что вы должны разрешить промис. Обратите внимание, как последний компилятор обрабатывает ту же ошибку:

Давайте также кратко рассмотрим другие интересные функции, которые не требуют такого же уровня детализации:

6. Идентификаторы Unicode

Доступно с версии v3.6

Приведенный выше код не был бы скомпилирован в более ранних версиях TypeScript, но теперь вы можете определять идентификаторы из более широкого набора Unicode.

7. Инкрементная компиляция

Доступна с версии 3.4

Если вы используете TypeScript для больших баз кода, компилятору может потребоваться вечность, чтобы ответить на изменения, которые вы вносите в любой из файлов в этой базе кода. У нас есть новый флаг —incremental, который вы можете добавить в командную строку tsc (компилятор текстов), и он будет постепенно компилировать только те файлы, которые были изменены.

TypeScript выполняет это, сохраняя информацию о графе проекта с момента последней компиляции в папке локального кэша внутри вашей базы кода. Для кодов React не забудьте правильно настроить это с помощью Webpack или Parcel, чтобы использовать пошаговую компиляцию в конвейере сборки.

Надеюсь, что вы используете перечисленные выше функции и не пропустите дорожную карту, чтобы быть в курсе функций, которые находятся в стадии разработки. Всего наилучшего!

Автор: RC

Источник: https://blog.bitsrc.io

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

TypeScript

Посмотрите видео по TypeScript!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: