img

TypeScript VS JavaScript: в чем разница?

21 ноября
20:00
Бесплатный вебинар
Введение в Docker
Ведущий — Филипп Игнатенко.
Руководитель центра разработки
Записаться
img
img

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

Что интересно, TypeScript по сути не является самостоятельным языком программирования. На самом деле TypeScript считается расширенной версией языка программирования JavaScript.

TypeScript – это расширенная версия JavaScript

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

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

Что такое 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 – это язык программирования с открытым исходным кодом, но изначально в 2010 году он выпускался как внутренний продукт Microsoft. TypeScript стал доступен для всех на GitHub в конце 2012 года. 

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

В отличие от JavaScript, 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 - single-page application), которое использует виртуальную модель DOM для того, чтобы увеличить объем памяти и улучшить производительности.
  • Vue: написан на TypeScript и легко интегрируется в приложения. 
  • Angular: отлично подходит для быстрого прототипирования, простого тестирования и оптимизации производительности сервера. 
  • Синтаксический сахар: использование строго определенных типов упрощает чтение кода, так как вам не нужно гадать, к какому типу относится та или иная переменная.
  • Всесторонняя поддержка IDE:
  • Visual Studio Code
  • Eclipse
  • Atom
  • WebStorm
  • … и другие!

Недостатки TypeScript

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

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

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

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

TypeScript

JavaScript

Выпущен в 2012 году

Выпущен в 1995 году

Компилируется в JavaScript

Самостоятельный язык

Статическая типизация, со строгим контролем типов

Динамическая типизация, со слабым контролем типов

Компилируемый язык, не может быть выполнен прямо в веб-браузере

Интерпретируемый язык, может быть выполнен прямо в веб-браузере

Кривая обучения довольно крутая

Легкий для изучения

Доступно прототипирование

Доступно прототипирование

Мало документации

Подробная документация

Растущее сообщество с меньшим количеством ресурсов

Большое сообщество разработчиков и ресурсов JavaScript

Лучше всего подходит для сложных или крупных проектов

Лучше всего подходит для небольших проектов

Поддерживает все библиотеки JS

Библиотеки JS работают по умолчанию

Поддерживает модули, универсальные шаблоны и интерфейсы. 

Не поддерживает модули, универсальные шаблоны и интерфейсы

Настройка сборки с пакетом npm

Не требуется настройка сборки

Числа и строки – это интерфейсы

Числа и строки – это объекты 

 

Нужно ли мне изучить TypeScript?

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

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

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

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

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

Установка

Через пакет npm

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

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

npm install -g typescript

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

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

npm install typescript --save-dev

Через Microsoft Visual Studio Code

Для начала убедитесь, что у вас установлена Visual Studio, а также приложение для веб-разработки ASP.NET.

Далее:

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

В том случае, если ваш проект не поддерживает NuGet, то вы можете установить расширение TypeScript в Visual Studio, перейдя сюда: Extensions -> Manage Extensions (Расширения -> Управление расширениями). 

Подведем итоги

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

 

Ссылка
скопирована
Получите бесплатные уроки на наших курсах
Все курсы
Программирование
Скидка 25%
Фронтенд-разработчик с нуля
Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript. Научитесь работать с дизайн-макетами и адаптивной версткой, сверстаете свои первые страницы и поймете, как строить карьерный трек в ИТ.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
Гипервизор - это программное обеспечение для виртуализации, используемое для создания и запуска виртуальных машин (ВМ). Гипервиз
img
Виртуализация серверов позволяет запускать несколько виртуальных машин на одном физическом сервере. Запуск виртуальных машин (ВМ
img
Сегодня мы рассмотрим, как настроить и использовать PHP в проекте. Но прежде чем начать, нужно понять, что такое PHP. Что такое
img
Как разработчик, вы знаете, что HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). HTML — это язык
img
Бесконечные споры вокруг искусственного интеллекта приводят к путанице. Существует много терминов, которые кажутся похожими, но
img
SVG расшифровывается как масштабируемая векторная графика. Это веб-дружелюбный векторный формат файлов, используемый для отображ
21 ноября
20:00
Бесплатный вебинар
Введение в Docker