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

Зачем было создавать TypeScript

TypeScript “произошел” от популярного JavaScript, хотя и был серьезно переработан. В свое время первые версии JS появились еще в 1995 году. Изначально он не предназначался для крупных проектов. Главной задачей было встраивание небольших скриптов на примитивные HTML-страницы. Со временем производительные и пропускные мощности возрастали и на сайтах становилось возможным делать более продвинутые скрипты для видео-плееров, регистрационных форм и так далее.

Проекты, стоящие перед разработчиками тоже усложнялись. Со временем преимущества JavaScript стали перерастать в его недостатки. Такой особенностью стала динамическая типизация данных. Это значит, что по мере выполнения кода типизация данных менялась автоматически, подстраиваясь под наиболее корректный тип. Такая особенность упрощает разработку на первых этапах, но создавала неочевидные ошибки в большом коде, на устранение которых часто уходило слишком много времени. В начале 2010-х годов стало понятно, что нужен новый инструмент, на основе JavaScript, который был бы лишен главных недостатков и спорных моментов своего родителя. Через 2 года Майкрософт представили первую версию TypeScript.

Своими разработчиками TS позиционируется как язык для разработки сайтов и веб-приложений с расширенными возможностями обычного JavaScript. Первое время язык использовался преимущественно для работы с продуктами Майкрософт, но вскоре стал распространяться среди других разработчиков. Так, к 2017 году, язык вошел в топ-10 самых популярных, а в 2021 практически сравнялся с JavaScript, став четвертым по популярности.

Динамика роста популярности самых популярных языков программирования до 2021 года

Тем не менее, Type- и JavaScript это разные языки программирования и спектр применения у них отличается.

JavaScript или TypeScript: что выбрать

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

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

Различия в типизации

Это самое главное и очевидное различие между этими двумя языками программирования. У JavaScript она динамическая, а у TypeScript статическая. А что это значит рассмотрим на конкретных примерах.

Предположим вы разрабатываете калькулятор для сайта. Для него необходима функция, отвечающая за добавление числа и операцию с ним. Предположим, вы записали эту функцию. В качестве аргумента она будет принимать число от пользователя, потому что в большинстве калькуляторах операции проводятся именно с числами. Но что будет, если пользователь вдруг введет текст? Весь код “поломается” и придется перезагружать страницу, чтобы калькулятор заработал снова. Такая ситуация с JavaScript.

Да, вы можете задать дополнительные условия в коде, запрещающие пользователю выполнять определенные действия или вносить данные, которые могут “поломать” весь код. Однако, это требует дополнительное время и тестирование.

В случае с TypeScript пользователь просто не сможет ввести другой тип данных, кроме числа, так как именно этот тип используется во всей функции. Правда, пользователь не получит по умолчанию никакого сообщения – действие просто не будет выполнено, но зато код не сломается. Дополнительно можно прописать разные предупреждения для таких случаев, но это необязательно, так как на работоспособность никак не влияет. Правда, в коде функции у всех переменных придется задавать типы данных. Это не слишком сложно, но при написании больших объемов может быть утомительно.

Пример разного оформления записи переменных

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

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

Проверка кода

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

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

Совместимость между языками

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

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

Поддержка IDE

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

IDE отмечает ошибку в коде и дает к ней комментарий

TypeScript поддерживает большинство популярных сред разработки и редакторов кода. Среди них: WebStorm, Visual Studio Code, Atom, Eclipse и другие. Если в них поддержка не включена по умолчанию, то ее можно легко добавить с помощью сторонних бесплатных плагинов.

TypeScript полноценное ООП

Это значит, что у кода, написанном на TS будет поддержка таких базовых компонентов как: классы, наследование, интерфейсы, массивы, объекты и многое другое. Концепция ООП облегчает создание хорошо организованного масштабируемого кода, делая TypeScript отличным выбором для развивающихся проектов.

Рефакторинг и облегченная работа с кодом

Рефакторинг – это процесс улучшения кода в ходе разработки или обслуживания уже готового проекта. По-сути, его основной задачей является улучшение читаемости, облегчение поддержки другими разработчиками. При этом функционал не должен никак меняться – программа или ее часть работает также как и раньше. У TypeScript в плане рефакторинга все отлично за счет:

  • Более лучшей читаемости по сравнению с JavaScript. Это достигает из-за сокращения объема строк, что позволяет не только меньше писать, но и делает код более логичным и структурированным. Плюс, при правильном подходе к расставлению наименований отпадает нужда в составлении подробной документации – названия скажут все за себя.
  • Отличная совместимость с IDE. Благодаря тому, что ошибки и синтаксис подсвечиваются автоматически, в проект очень легко вносить правки.
  • Есть встроенные подсказки для некоторых распространенных ошибок. Например, вы поменяли название функции, но забыли заменить его в других местах, где оно встречается. Так как другие компоненты программы будут ссылаться на несуществующую функцию, то возникнет ошибка. IDE, поддерживающие TypeScript предупреждают о подобных пропусках, что позволяет оперативно внести изменения во все имена.

Недостатки TypeScript

Рассмотренные выше особенности относятся скорее к достоинствам TypeScript. Однако у него есть свои недостатки, которые тоже нужно рассмотреть.

Нужна субординация

Да, TypeScript позволяет справиться с основными проблемами типизации, присущими JavaScript. Однако это актуально разработчиков, готовых тратить время на описание типов данных для каждой переменной и функции. Да, в TS можно с этим сильно не заморачиваться, проставляя просто везде тип any. Правда, если его ставить везде без разбора, особых преимуществ перед JavaScript не будет.

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

Неполный контроль над типами данных

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

Сложность с использованием сторонних библиотек

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

Что ждет TypeScript

Эксперты сходятся во мнении, что TypeScript будет развиваться и дальше, плюс, на нем будет появляться все больше проектов. В обозримом будущем он не вытеснит JavaScript, так как этот язык тоже развивается и при этом имеет серьезные позиции на рынке. Однако спрос на специалистов, владеющих TS будет расти. Возможно, в будущем пути Type и Java скриптов разойдутся и языки начнут развиваться независимо друг от друга и будут использоваться для разного спектра задач. Правда, ближайшие лет 5 хороший веб-разработчик должен будет одинаково хорошо владеть обоими языками программирования, так как спектр их применения остается примерно похожим.

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

Как установить TypeScript

Он, в отличии от JS, не будет нормально работать без предварительной установки определенных пакетов. Для начала нужно установить Node.js. Он вообще должен быть у всех веб-разработчиков, так как необходим для поддержки многих инструментов. Node.js устанавливается по аналогии с обычными программами: переходите на официальный сайт, скачиваете нужную версию и устанавливаете как обычную программу.

Вместе с Node.js на компьютер установится пакетный менеджер npm. С его помощью как раз и проводится установка TypeScript:

  1. Откройте npm-панель в терминале. Это можно сделать даже в редакторе кода, просто запустив встроенный терминал.
  2. Туда пропишите команду: npm install -g typescript и нажмите Enter для применения.
  3. Подождите некоторое время, пока пройдет установка пакетов. Оповещений о завершении вы не получите. Проверить корректность установки можно с помощью команды tsc -v. После ее выполнения вы увидите актуальную версию TypeScript у вас на компьютере.

TypeScript был успешно установлен

Заключение

Владение TypeScript будет сильным преимуществом для веб-разработчика на рынке. Этот язык программирования основан на JavaScript и по распространенности уступает ему лишь немного. Это также значит, что если вы умеете работать с JS, то переход на TS у вас не вызовет ощутимых сложностей. Если же вы только начинаете изучать веб-разработку, то лучше для начала выучить javaScript, а потом уже начинать осваивать TypeScript.