JavaScript vs TypeScript: что в каких случаях лучше использовать
Перевод статьи с Medium о том, в каких случаях какой язык лучше использовать и почему.
Несмотря на, казалось бы, говорящий сам за себя заголовок, речь пойдет не о противостоянии двух технологий, а, скорее, о предпосылках зарождения TypeScript как такового.
Что такое TypeScript?
27 апреля 2017 года вы начали не предвещающий ничего необычного день. На часах 4.05 утра. Вы медитируете, делаете зарядку, готовите завтрак. Около восьми утра вы видите уведомление о публикации в Twitter. И вот, какую благую весть оно несет.
Представляем TypeScript 2.3
Сегодня мы с волнением представляем вам последний релиз TypeScript 2.3!
Для непосвященных, TypeScript — это расширение JavaScript, дающее пользователю возможность работать со статической типизацией и надежным инструментарием. Его использование позволит избежать многих досадных багов, с которыми часто сталкиваются разработчики на JavaScript. TypeScript сообщает об ошибках еще до того, как вы сохраните файл, и позволяет писать код в разы быстрее. Это дарит разработчику время для того, чтобы подумать и протестировать действительно важные вещи.
Какого черта, думаете вы. Только недавно вы прошли все круги ада с React/Redux и по сию пору воюете с Vue.js. Кое-как вы одержали победу над Angular.
И теперь вы в красках представляете себе весь стресс, через который вам предстоит пройти при изучении этой новой штуки. Вы смотрите, где и как использовать это строгое синтаксическое надмножество JavaScript, а через пару дней выясняете, что за ним стоит целая армия разработчиков. Чем же вызвано такое самоотверженное почитание? Что ж, как хороший разработчик, вы отдаете себе отчет, что вам не остается ничего другого, кроме как идти в ногу с развитием рынка, как сказал Чед Фоулер (Chad Fowler) в своей книге «Страсть к программированию». Ваши чувства легко понять. Но профессиональное чутье подсказывает мне, что TypeScript проживет долгую и насыщенную жизнь.
Но что на самом деле этот JavaScript?
JavaScript — очень динамичный язык программирования, который многие противопоставляют С-подобным языкам. Его нетипизированная природа и уникальное прототипное наследование послужили для программистов хорошей наживкой.
Дабы обосновать мои оптимистичные предчувствия насчет судьбы TypeScript, достаточно отметить, что разработчики Agular выбрали его, отбросив чистый ES6. Изначально они рассматривали возможность использования AtScript — основанного на javascript языка, который был представлен миру командой разработки AngularJS и являл собой предвестника TypeScript.
Пока суть да дело, в ES ввели декораторы, и это было очень похоже на то, что имелось в AtScript. И прежде, чем мы перейдем к делу, давайте немного поговорим об этих декораторах.
Декораторы
Почитать больше можно здесь. Еще пара слов для тех, кто не хочет перескакивать на другую страницу, не расправившись с этой статьей. Является ли декоратор функцией высшего порядка? Функции высшего порядка принимают в качестве аргумента другую функцию и расширяет поведение последней без непосредственной ее модификации.
Таким образом, если функция высшего порядка myFunction принимает на вход некую другую функцию, она не изменяет саму эту функцию, но в то же врем повлияет на выходные данные.
Одной из первых вещей, которые претили мне в декораторах, был знак „@“. Он создавал впечатление, что я имею дело не с JavaScript, а с каким-то другим языком. Уверен, я такой не один. Но как бы то ни было, „@“ сообщает парсеру, что все (в данном блоке кода) является декоратором. Звучит не так уж сложно, да? Просто мы говорим компьютеру, что функция декорируется другой функцией, и результат возвращается обратно.
Компьютер отвечает: «Отлично, вас понял! Идем дальше!». Теперь он относится к последующему блоку кода, как родитель к любимому ребенку, одаривая его особым вниманием. В результате мы получаем функцию, умеющую делать крутые вещи: запоминание, аутентфикация, логирование и многое другое.
Мы не будем лезть в дебри, вам лишь важно составить о декораторах правильное впечатление:
. они совсем не похожи на подобные паровозы:
Представьте, что у вас есть две функции, которые вы хотите обернуть одна в другую. Программирование чего-то подобного сродни самому леденящему кровь кошмару. В конце концов, вам придется столкнуться с типизацией в ES. Самым рациональным решением здесь будет использование TypeScript.
Статическая vs динамическая типизация
При статической типизации мне необязательно напоминать компилятору, что данная переменная, например, целое число, и всегда должно им оставаться. Эта информация хранится в программе, и даже если я, забывшись, попытаюсь изменить ее значение на недопустимое, ничего страшного не произойдет. Хорошими примерами языков со статической типизацией являются C, C++, Java.
Динамическая типизация противоположна описанному выше. Ее лагерь представляют языки Perl, Ruby и, конечно, JavaScript.
Пример на Java (статическая типизация):
При работе со значением foo у системы нет ни малейшего шанса допустить ошибку.
Пример на JavaScript (динамическая типизация):
В отличие от C++ или Java, JavaScript чувствителен к типу значения, присваиваемого переменной.
А что будет, если объединить обе стороны этой медали, взяв то, благодаря чему C++ есть C++, и ввести это в JavaScript?
Динамически типизированный JavaScript:
А это — статически типизированный JavaScript: 
Разработка SPA: TypeScript или JavaScript — что выбрать?
Разбираем сложность перехода, преимущества и недостатки
Наша компания специализируется на создании сложных веб-проектов и веб-сервисов и фактически занимает среднюю нишу между веб-интегратором и венчурной студией разработки. Один из наших проектов дает возможность организаторам мероприятий (театрам и концертным площадкам) устанавливать на свой сайт виджет, позволяющий легко и быстро организовать процесс прямой продажи билетов онлайн (подробнее об этом проекте можно почитать в кейсе на нашем сайте).
Первоначально наш виджет был организован как вызов стороннего сервиса через iframe, встраиваемый на страницу сайта. Для идентификации пользователей и сессий использовались cookies, с которыми было немало проблем в Safari и мобильных устройствах, поэтому мы давно раздумывали над возможностью перевести наш виджет на технологии SPA.
SPA (Single Page Application), если сильно упрощать, — это web-приложение, компоненты которого загружаются единожды на одной странице, а контент подгружается по мере необходимости.
Последним доводом на чаше весов стала информация о том, что Google планирует постепенно в течение двух лет отказаться от поддержки сторонних cookie-файлов в браузере Chrome. Фактически, без изменения архитектуры, это сделает наш виджет полностью неработоспособным.
После того, как решение переводить проект на архитектуру SPA было принято, перед нами встал вопрос выбора инструментария. На чем написать приложение: как обычно на JavaScript или попробовать набирающий в последнее время популярность TypeScript?
TypeScript — язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript. Язык используется такими крупными проектами, как Slack, Google и AirBnB. На нем написаны VS Code и Angular.
Преимущества TypeScript перед JavaScript были для нас понятны: он обеспечивал лучшую типизацию данных, структуру и читабельность кода, а также обладал обратной совместимостью с JS.
Но в нашей команде с этим языком были знакомы далеко не все. Необходимость освоения нового синтаксиса грозило срывом сроков, что для большого e-commerce проекта, над которым мы работали, могло обернуться многомиллионными потерями.
Взвесив все «за» и «против», мы все-таки решили выбрать TypeScript и, забегая немного вперед, скажу, что выбором мы остались довольны, а накопившимся опытом решили поделиться в этой статье.
Опасения относительно того, что новый для многих из нас язык будет даваться с трудом и мы потратим слишком много времени на адаптацию специалистов, оказались напрасными. Любой программист, знакомый с JavaScript, может начать писать на TypeScript буквально сразу после того, как прочтет небольшой гайд “TypeScript за 5 минут”. Разумеется, для раскрытия всего потенциала языка потребуются месяцы и годы практики, но извлечь основные выгоды от использования TypeScript можно при первом же опыте применения при условии правильного его использования — об этом мы еще поговорим чуть ниже.
Знаем, звучит страшно. Но после следующей пары абзацев вам все станет понятно, даже если вы очень далеки от программирования.
Ключевое преимущество использования TypeScript кроется в самом названии языка, который (очень вольно, разумеется) можно перевести на русский, как Типизированный Код.
TypeScript основывается на принципе строгой типизации данных, а значит, при правильном его использовании это избавляет программиста от скучной, но обязательной необходимости делать проверку всех аргументов, входящих в метод или функцию.
Допустим, в JavaScript у вас есть простой метод, возвращающий сумму двух чисел «a» и «b»:
Если по какой-то ошибке в качестве аргументов в этот метод будут переданы строковые переменные «1» и «2», в результате будет возвращена просто склеенная строка «12».
В TypeScript аналогичный метод будет выглядеть так:
И при попытке передать в качестве аргумента что-то отличное от числовой переменной, ошибка проявится сразу же при попытке компиляции в JavaScript (о компиляции мы еще поговорим ниже):
Таким образом, при некорректном объявлении типов в проекте будет очень сложно использовать методы классов и функции не по назначению, например, случайно передав в них не тот объект, или обратиться к несуществующему свойству объекта. Не говоря уже о практически полном сведении на «нет» возможных ошибок, связанных с банальными опечатками.
Описание типов, конечно, требует времени, но помимо того, что это дисциплинирует разработчиков, заставляя глубже продумывать архитектуру проекта, это приносит и дополнительные преимущества, а именно…
Это преимущество напрямую вытекает из предыдущего. Если вы уже писали unit-тесты, то теперь, как минимум, можно не беспокоиться о дополнительной проверке типов передаваемых аргументов. Вместо этого, статический анализатор в используемом вами IDE сможет в реальном времени анализировать код, улучшая процесс разработки, подсказывая свойства и подсвечивая возможные ошибки. Одно только это сократит количество unit-тестов, а значит и время на их написание на 10–20%.
Из-за сокращений объема строк код становится гораздо более структурированным и читабельным. Кроме этого, код фактически становится само-документированным. Глядя на правильно оформленный метод, сразу становится понятно, как с ним работать, остается лишь описать бизнес-логику.
TypeScript полностью реализует объектно-ориентированный подход. При грамотном использовании это позволяет легче создавать большие и сложные проекты: благодаря высокому уровню абстракции, снижается когнитивная нагрузка на разработчиков — им не требуется держать в голове весь код проекта, сосредоточившись только над участком, с которым они работают в данный момент времени.
Обратная совместимость с JavaScript позволяет не переписывать весь существующий код полностью, а реализовать плавный и поэтапный переход, переписывая лишь необходимые части приложения и постепенно перенося полюбившиеся JS-библиотеки.
Как и все технологии, TypeScript не является «серебрянной пулей», раз и навсегда решающей все ваши проблемы. При неправильном и необдуманном использовании все преимущества языка нивелируются. Например, если разработчики будут лениться, и вместо строгого определения типов данных пытаться использовать тип Any (любой тип), толку от использования TypeScript не будет никакого.
В определенной степени это предполагает достаточный уровень зрелости команды разработчиков, в которой уже прижились такие базовые методологии, как стандарты кодирования и регулярные, а не эпизодические, ревью кода.
При разработке на TypeScript может сложиться ложное впечатление, что мы полностью контролируем типы. Это не так. Типы контролируются только до этапа компиляции, в результате которого весь наш код все равно превращается в JavaScript. Это означает, что если с сервера будут переданы аргументы неверного типа — наш код нам об этом не сообщит.
Для подключения сторонних библиотек у них должны быть описаны типы для TypeScript. Для непопулярных библиотек этого зачастую нет вовсе или типы описаны не полностью. Тут придется либо писать самому, либо не использовать типы при работе с этой библиотекой. Но, как мы и писали выше, отчасти это уравновешивается возможностью постепенного перевода кода на TypeScript.
Еще один распространенный страх заключается в том, что рано или поздно язык JavaScript эволюционирует, вберет в себя все лучшее, что есть в TypeScript, и в TypeScript отпадет необходимость. Такая вероятность, разумеется, есть. Однако, во-первых, относительной гарантией жизнеспособности языка является поддержка со стороны такой крупной корпорации, как Microsoft. И, во-вторых, сам факт, что страх этот появился еще лет пять назад и до сих пор не материализовался, говорит о том, что неразумно не использовать преимущества инструмента до тех пор, пока не появится более удобная и функциональная замена.
Наш опыт убедил нас в том, что преимущества TypeScript перевешивают все недостатки. В итоге мы имеем код, на который приятно смотреть, легко поддерживать и развивать. А рефакторить одно удовольствие! Анализатор сразу скажет, где используется данный тип, а компилятор не даст оставить неработающий код. Мы уверены, что время, уходящее на описание типов, стократно окупится отсутствием самых популярных ошибок и простотой поддержки проекта.
Однако, важным фактором перехода на TypeScript все-таки является уверенное владение и богатый опыт написания проектов на JavaScript. Пока вы делаете только первые шаги в JS и еще не столкнулись с ограничениями этого языка, скорее всего извлечь значимых преимуществ от перехода на TS не получится.
Хотите, чтобы и ваш проект был выполнен с таким же вниманием к деталям и фокусом на задачи вашего бизнеса? Оставьте заявку у нас на сайте!
TypeScript: как с ним работать и чем он отличается от JavaScript
Frontend-разработка шагнула далеко за пределы JavaScript. Разбираемся, что такое TypeScript и почему его так любят.
На JavaScript написаны веб-интерфейсы практически всех сайтов. Однако не все его любят, а альтернатив почти нет. Единственный конкурент JS — WebAssembly, однако за несколько лет своего существования он пока не смог стать достаточно популярным.
Из-за такого расклада у разработчиков остаётся два выхода:
И многие выбирают второе решение. Поэтому за последние годы появилось сразу несколько языков-надстроек над JavaScript:
О последнем и пойдёт речь в этой статье. В 2019 году TypeScript стал одним из самых любимых языков программирования и попал в топ-10 по популярности:
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Что такое TypeScript
TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Код на TypeScript выглядит почти так же, как и код на JS, и, если у вас есть опыт frontend-разработки, изучить TypeScript достаточно просто. Особенно учитывая, что вы можете писать JS-код прямо в TS-скриптах.
Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры — тем более что можно выбрать версию JS, в которую будет компилироваться код.
TypeScript — проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например, let и const, стрелочные функции и так далее.
Давайте разберём два главных преимущества TS перед JS.
Строгая типизация
Многие проблемы в JavaScript появляются из-за динамической типизации и в целом странного поведения типов данных:
В TypeScript типизация статическая, что избавляет от множества проблем. Есть числовой тип, строковый, логический и другие. Возможно описывать и свои типы данных, например, с помощью enum:
Улучшенное ООП
И в JS, и в TS есть поддержка объектно-ориентированного программирования: классы, объекты, наследование. Однако TypeScript шагнул чуть дальше и использует больше возможностей ОПП. В том числе, например, интерфейсы:
Другой большой плюс — модификаторы доступа. Их в TypeScript три: public, private и protected. Вот пример их использования:
Также есть и другие возможности:
В будущем всё это может появиться и в JavaScript, но браузеры начнут поддерживать такие возможности ещё очень нескоро.
Минусы TypeScript
Разработчики любят этот язык, а некоторые крупные проекты уже переходят на него. Например, популярный фреймворк Angular.JS. Но этого всё равно недостаточно, чтобы он стал таким же востребованным, как JavaScript. Это связано с тем, что разработка веб-приложения на TypeScript стоит дороже и отнимает больше времени.
Особенно если необходимо использовать какую-нибудь библиотеку или фреймворк, которые не портированы на TS. В этом случае разработчикам придётся самостоятельно описывать сигнатуры (указывать типы данных) всех функций и методов — достаточно длительный процесс, учитывая размеры современных библиотек.
Также порог входа в TypeScript выше — чтобы использовать его преимущества, важно знать типы данных и объектно-ориентированное программирование.
Установка TypeScript
Чтобы использовать TypeScript, установите сначала Node.JS. Как это сделать, можете прочитать в нашей статье. После этого введите в консоли команду:
Если всё пройдёт успешно, то в папке появится файл app.js, который и подключим к странице.
В compilerOptions хранятся все параметры для компилятора:
Пишем приложение на TypeScript
Теперь создадим простой калькулятор и посмотрим, как отличается код для него на JS и на TS. Сначала сверстаем форму:
Здесь два поля для ввода чисел, кнопка, которая запускает скрипт и элемент для вывода результата:
Код TypeScript выглядит так:
А скомпилированный JS-код для такого калькулятора выглядит вот так:
Заключение
Несмотря на то что в TypeScript очень достойный синтаксис, JavaScript ещё долго будет доминировать во frontend-разработке. Поэтому его в любом случае нужно знать, даже если он вам не нравится.
Если вы только приступаете к изучению программирования, то начинать с TypeScript будет сложно. Чтобы подготовиться, вы можете записаться на наш курс по frontend-разработке — вы освоите HTML, CSS, JS и его популярные фреймворки.
Стоит ли Typescript усилий?
Typescript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».
Поскольку статей, описывающих достоинства и недостатки, описание языка и примеры работы — валом, я хотел бы описать практические выводы при работе в достаточно крупном приложении.
Начнем с основных плюсов:
Строгая типизация
Позволяет более полно описывать свойства и методы обьектов и классов, из-за чего пропадает необходимость, которая, лично меня, дико раздражала, делать проверку всех, входящих в метод или функцию, аргументов:
В любом случае, TypeScript сильно упрощает этот процесс:
И мы плавно перейдем ко второму пункту, которому первый сильно способствует:
Читабельность кода
Из примера выше, очевидно, что читать код на TypeScript будет проще, ввиду отсутствия нагромождений кода, характерные Javascript.
Можно представить, во что превратится код, написанный на JavaScript, спустя какое-то время…
В некоторых случаях, в JS, можно уменьшить ущерб путем абстракций, но в целом, TS сильно впереди по данному вопросу.
Более легкий переход в мир JS из мира статики
Многие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.
Обратная совместимость с JS
И это, таки, приятный бонус, потому как не придется переписывать весь существующий код, чтобы поиграться с TS и написать лишь часть приложения на нем + есть возможность перенести все любимые библиотеки с JS на TS, если будет такая необходимость.
Широкая поддержка IDE
TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.
Теперь опишем основные минусы:
Строгая типизация
Этот пункт работает как во благо, так и во вред, потому что необходимо описывать все типы для всех обьектов, классов, переменных, и иже с ними, что было не свойственно JavaScript ранее.
Компилятор
Он существенно уменьшает вероятность «тупой» ошибки, типа пропущенных запятых и неправильно написанных имен переменных, но, также, убивает всю прелесть JS, когда большую часть решений можно было написать на коленках и проверить в консоли браузера.
Не стоит забывать, что время от времени, придется обновлять и сам компилятор, поскольку язык развивается и, рано или поздно, появится необходимость обновить существующую версию компилятора, а, возможно, и самого кода.
Debug
Естественно, любому разработчику необходимо понимать, как, быстро и эффективно, проверять код на ошибки, ловить и исправлять баги. И, первым делом, надо разобраться, как это процесс наладить в TypeScript. Существует множество гайдов для различных IDE: WebStorm и Visual Studio о том, как все это дело настроить в редакторах кода и эффективно работать, но с JS этого делать не надо было, потому как, можно было запустить код, наставить точек останова внутри редактора или браузера и спокойно дебажить. С TS придется немного попотеть.
А вдруг помрет?
Это интересный и серьёзный вопрос, потому как стандарты JS идут в ногу со временем и интегрируют в сам язык многое, что было полезно в TS: классы, стрелочные функции, и так далее. Рано или поздно, все полезные функции TS будет так или иначе перенесены в стандарт языка и TS повесит бутсы на гвоздь. А если ребята из Microsoft решат, что им это не нужно и полностью оставят TS на волю open-source? Понятно, что являясь открытым продуктом, TS не лишиться поддержки совсем — всегда найдутся энтузиасты, но поддержка такого гиганта, как Microsoft, никогда не помешает.
Опять же сам Microsoft, как основного разработчика, многие относят к минусу, потому как репутация у гиганта весьма спорная: Skype, Nokia, Windows Phone, Windows Vista, и так далее.
Надеюсь, что помог кому-то с решением о данном вопросе, либо же заставил задуматься о целесообразности перехода.
