меню

В этой статье мы узнаем зачем нам нужен 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. 10 примеров использования конструкции try...catch

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

Как избежать повторной загрузки контента Jquery + Ajax + JSON

Как избежать повторной загрузки контента Jquery + Ajax + JSON. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Объекты в JavaScript

В статье рассмотрены базовые понятия, связанные с объектами в JavaScript: определение объектов, создание объектов, базовые операции с объектами

JavaScript - отслеживание изменения ориентации на мобильных устройствах

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

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

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

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

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

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

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

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