меню

В этой статье мы узнаем зачем нам нужен 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 продолжает развиваться и улучшаться, что делает его еще более полезным для разработки веб-приложений.

Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127
MindForge: Pull Request наставник для GitHub
MindForge: Pull Request наставник для GitHub
Превратите свой пет-проект в эффективный тренажёр роста

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

Вывод последнего дня текущего месяца на Javascript

Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось

Перестаньте всё превращать в массивы (и работайте меньше)

Большая часть фронтенд-кода обрабатывает данные задолго до их вывода на экран. Мы получаем список, изменяем его, сокращаем и повторяем. И обычно не задумываемся о том, какой объём работы выполняем на этом пути.

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

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

Велосипеды на Javascript и jQuery

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