меню

В этой статье мы узнаем зачем нам нужен 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 array шпаргалка

Переменные в Javascript позволяют хранить только одни данные за раз. Однако, учитывая, что часто бывает полезно манипулировать большим количеством данных, концепции переменной иногда недостаточно, потому что становится трудно управлять большим количеством различных переменных.

Повышение уровня мастерства в JavaScript ES6

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

Три способа понять промисы

Promise (обычно их так и называют «промисы») – предоставляют удобный способ организации асинхронного кода. В современном JavaScript промисы часто используются в том числе и неявно, при помощи генераторов.

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

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

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

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

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

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

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

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