меню

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

Основные возможности машинописного текста

  • Простота обслуживания и повышение производительности проекта, поскольку изменение типа будет обнаружено во время разработки.
  • Статическая типизация и аннотации.
  • Поддерживает объектно-ориентированные функции, такие как интерфейс, наследование и классы.
  • Обнаружение возможных ошибок времени выполнения во время разработки, таких как «невозможно прочитать свойство x из неопределенного».
  • Поддерживает ES6 (ECMAScript), который предлагает более простой синтаксис для обработки объектов и функций наследования.
  • Хорошая полноценная поддержка IDE.

Чтобы понять, почему TypeScript полезен (или даже необходим), не обязательно заглядывать за пределы определения JavaScript.

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

Статическая проверка типов против динамической проверки типов

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

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

Затем появился TypeScript - надмножество JavaScript, которое позволяет статическую типизацию объектов JavaScript. Это было оценено как огромный шаг вперед, поскольку количество ошибок, которые можно уменьшить в JavaScript, просто обеспечивая безопасность типов, было огромным.

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

Статическая проверка типов против динамической проверки типов

В приведенном выше примере код полностью соответствует JavaScript, хотя очевидно, что свойство middleName не существует в пользовательской переменной. При запуске приведенного выше фрагмента вывод журнала будет неопределенным, но код выполняется. Давайте теперь посмотрим версию TypeScript.

Статическая проверка типов против динамической проверки типов. Неопределенным.

Хорошо, у нас есть интерфейс для статической проверки во время компиляции. Это означает, что приведенный выше код не будет выполняться, поскольку, когда TypeScript статически проверяет наш код, он выдает ошибку, уведомляющую нас о том, что middleName не существует в пользовательской переменной, поскольку пользователь имеет тип User.

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

Наследование на основе прототипа

Как было упомянуто в определении JavaScript, этот язык поддерживает только наследование на основе прототипов. Это означает, что классическое наследование, как в любом языке ООП, не поддерживается. Однако в TypeScript мы можем использовать классы, которые наследуют другие классы, что позволяет писать код, как в C#. Кроме того, в TypeScript мы можем объявлять закрытые, защищенные или общедоступные члены, в то время как в JavaScript такой возможности нет. Мы также можем объявлять статические члены, которые будут установлены в прототипе для данного класса.

Давайте посмотрим на это в действии используя TypeScript.

Наследование на основе прототипа

Наследовать от MyClass означало бы иметь доступ ко всем защищенным и общедоступным членам MyClass.

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

Наследование на основе прототипа. Расширение классов.

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

Функции ввода

Поскольку функции в JavaScript являются гражданами первого класса, логично, что в TypeScript у нас также будут строго типизированные функции. Давайте посмотрим на простой пример того, как типизация функций TypeScript уменьшает количество ошибок во время выполнения.

Функции ввода

В приведенном выше коде метод logUserName принимает один аргумент и он должен иметь тип User. Если мы передаем аргумент, который не относится к типу User или если мы передаем неправильное количество аргументов, мы получаем ошибку компиляции, а не ошибку времени выполнения, а ошибку времени компиляции. Это означает, что мы перехватываем функции, которые вызываются с аргументами, с которыми их не следует вызывать во время разработки, а не во время сеанса тирады с клиентом, у которого возникают проблемы с запуском нашего веб-приложения. Давайте посмотрим на приведенный выше код в JavaScript.

Функции ввода

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

Круто, 2 ошибки удалось избежать только с помощью TypeScript.

Заключение

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


Возможно, вам будет интересно

Введение в прототипы JavaScript

Хотя JavaScript не является языком, основанным на классах, и не реализует ООП в традиционном смысле, он предоставляет возможности и шаблоны, которые позволяют использовать концепции объектно-ориентированного программирования.

Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.

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

Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch

Как фронтенд-разработчики мы часто используем try...catch в JavaScript для обработки ошибок. В этой статье я поделюсь десятью полезными советами, которые помогут вам более уверенно работать с исключениями.

Плавная кнопка "Наверх" на jQuery

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту