TypeScript против JavaScript: В чем разница?

Если вы начинающий разработчик, то вы, возможно, слышали о TypeScript, относительно новом языке программирования, который приобрел популярность после его выпуска в 2012 году компанией Microsoft.^[1].

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

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

Поэтому, если вы уже знаете JavaScript, изучение TypeScript будет для вас вполне естественным.

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

Мы рассмотрим:

• Что такое JavaScript?
• Что такое TypeScript?
• Преимущества TypeScript
• Недостатки TypeScript
• Сравнительная таблица: TypeScript против JavaScript
• Стоит ли мне изучать TypeScript?
• Подведение итогов и следующие шаги

Что такое JavaScript?

JavaScript ES6 (также известный как ECMAScript 6) — это кросс-платформенный язык сценариев на стороне клиента, основанный на прототипах и созданный Бренданом Эйхом.

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

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

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

Примечание: Другие примеры динамически типизированных языков включают Python, PHP, Perl и Ruby.

С момента своего появления в 1995 году JavaScript прошел через множество итераций, направленных на улучшение его функциональности и упрощение разработки программного обеспечения. Теперь его можно использовать даже для создания интерактивных игр!

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

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

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

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

Примечание: Возможно, вы не считаете JavaScript объектно-ориентированным языком программирования, но на самом деле в нем есть отличная поддержка ООП!

Что такое TypeScript?

TypeScript — это язык программирования с открытым исходным кодом, но начинался он как внутренний продукт Microsoft в 2010 году. TypeScript стал общедоступным на GitHub^[2] в конце 2012 года.

Поскольку TypeScript считается строгим супермножеством ECMAScript 2015, любая программа на JavaScript также может считаться программой на TypeScript.

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

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

Примечание: К языкам со статической типизацией относятся Java, C и C++. При статической типизации программист должен указать тип данных каждой объявляемой переменной.

TypeScript был создан на основе 11 целей проектирования:

Компания Microsoft определила 11 ключевых целей, которые будут определять развитие TypeScript.

1. Статическая идентификация потенциальных ошибок
2. Обеспечить способ структурирования больших объемов кода
3. Избегать увеличения времени выполнения программы
4. Компиляция в чистый, узнаваемый JavaScript
5. Создать язык, который можно компоновать и о котором легко рассуждать.
6. Сохранять полную совместимость с текущими и будущими версиями JavaScript
7. Сохранять поведение всего кода JavaScript во время выполнения
8. Избегать добавления синтаксиса на уровне выражений
9. Сделать TypeScript последовательным и полностью стираемым
10. Быть кросс-платформенным инструментом разработки
11. Изменения языка не должны нарушать предыдущие версии TypeScript.

Преимущества TypeScript

TypeScript обеспечивает два сильных преимущества перед JavaScript:

• TypeScript транспилируется в JavaScript: TypeScript изменяет и заменяет свой собственный код на функционирующий JavaScript во время компиляции, что позволяет использовать расширенные функции ECMAScript в старых браузерах, которые обычно их не поддерживают.

• TypeScript может применять статическую типизацию: Статическая типизация позволяет выявить потенциальные проблемы на ранних этапах жизненного цикла разработки путем присвоения типов данных всем объявленным переменным.

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

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

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

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

Дополнительные возможности

• Совместимость: TypeScript поддерживает практически все фреймворки и библиотеки JavaScript, включая:

  • React: Одностраничное приложение (SPA), которое использует виртуальный DOM для улучшения памяти и производительности.
  • Vue: Написан на TypeScript, легко интегрируется в приложения постепенно
  • Angular: Отлично подходит для быстрого создания прототипов, простого тестирования и оптимизирует производительность сервера.

• Синтаксический сахар: Обеспечение строгих типов делает код более легким для чтения, поскольку вам не нужно думать о том, к какому типу относится переменная.

• Широкая поддержка IDE:

  • Visual Studio Code
  • Eclipse
  • Atom
  • WebStorm
  • …и многое другое!

Недостатки TypeScript

Есть несколько недостатков использования TypeScript, но вы сами должны сопоставить их с преимуществами и понять, подходит ли он вам.

Вот несколько недостатков, которые следует учесть:

• Время компиляции: Программы на TypeScript имеют более высокую скорость выполнения по сравнению с программами, написанными на JavaScript.
• Кривая обучения: TypeScript немного сложнее JavaScript и требует времени для привыкания.
• Несовпадения типов: Поскольку код TypeScript транслируется в JavaScript во время выполнения, вы можете столкнуться с необычными ошибками и несовпадением типов.
• Меньшая гибкость: Переменные и параметры в TypeScript менее гибкие.

Сравнительная таблица: TypeScript против JavaScript

Стоит ли мне изучать TypeScript?

Если вы новичок в веб-разработке и планируете работать над небольшими проектами, то JavaScript — идеальное место для начала.

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

Например, одним из наиболее заметных недостатков компилируемого языка, такого как TypeScript, является дополнительное время, необходимое для выполнения. Если приоритетом является сокращение времени компиляции, то лучшим выбором будет JavaScript.

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

Примечание: Следует помнить, что разработчики TypeScript обычно получают более высокую компенсацию в среднем, потому что их меньше, чем разработчиков JavaScript. Тем не менее, никогда не помешает иметь еще одно перо в своей шляпе!

Установка

Через пакет npm

Во-первых, убедитесь, что у вас есть IDE, менеджер пакетов Node.js (npm) и компилятор TypeScript. Node.js предоставляет среду, в которой может быть запущен ваш пакет TypeScript.

Далее откройте командную строку или терминал и введите следующее:

npm install -g typescript

Если пакет был установлен правильно, вы сможете проверить, какая версия у вас установлена с помощью tsc -v.

Теперь вы можете использовать следующую команду для установки TypeScript в ваш локальный проект в качестве зависимости.

npm install typescript --save-dev

Через Microsoft Visual Studio Code

Во-первых, убедитесь, что у вас установлена Visual Studio вместе с рабочей нагрузкой для веб-разработки ASP.NET.

Далее:

1. Откройте новый проект в Visual Studio
2. Щелкните правой кнопкой мыши на узле проекта в Solution Explorer
3. Нажмите Управление NuGet-пакетами
4. На вкладке Browse найдите Microsoft.TypeScript.MSBuild
5. Нажмите Установить

В случае, если ваш проект не поддерживает Nuget, вы также можете установить расширение TypeScript в Visual Studio, перейдя в Extensions > Manage Extensions.

Подведение итогов и следующие шаги

Отлично! Мы рассмотрели некоторые из основных возможностей TypeScript, а также некоторые компромиссы. Надеюсь, это краткое введение в TypeScript было информативным и заставило вас задуматься о следующем проекте. Кто знает? Возможно, вы захотите написать его на TypeScript.

Если вы собираетесь стать разработчиком TypeScript, у нас есть множество замечательных ресурсов, которые помогут вам расширить свои знания, так что ознакомьтесь с ними!

Чтобы помочь вам освоить TypeScript, компания Educative создала учебный курс «TypeScript для программистов».

Счастливого обучения!

Продолжайте изучать язык TypeScript на сайте Educative

• Самоучитель TypeScript: Пошаговое руководство по изучению TypeScript

• Понимание продвинутых концепций в TypeScript

• Простое руководство по интерфейсам TypeScript: декларация и примеры использования

Начните обсуждение

Вы предпочитаете TypeScript или JavaScript? Была ли эта статья полезной? Сообщите нам об этом в комментариях ниже!