Typescript или javascript

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:

Разница между TypeScript и JavaScript

Почему TypeScript разрабатывается с использованием JavaScript?
Когда был разработан JavaScript, команда разработчиков JavaScript представила JavaScript как клиентский язык программирования. Но когда люди использовали JavaScript, тогда разработчик узнал, что JavaScript также может быть использован в качестве языка программирования на стороне сервера. Но когда JavaScript рос, тогда код JavaScript становился сложным и тяжелым. Из-за этого JavaScript даже не смог полностью удовлетворить требования объектно-ориентированного языка программирования. Это препятствует успеху JavaScript на уровне предприятия в качестве технологии на стороне сервера. Затем TypeScript был разработан командой разработчиков для преодоления этого пробела.

Особенности TypeScript:

• Код TypeScript преобразуется в Простой код JavaScript:: Код TypeScript не понятен браузерам. Вот почему, если код написан на TypeScript, то он компилируется и преобразует код, т.е. переводит код в JavaScript. Вышеописанный процесс называется Trans-piled . С помощью кода JavaScript браузеры могут читать код и отображать.
• JavaScript — это TypeScript : любой код, написанный на JavaScript, можно преобразовать в TypeScript, изменив расширение с .js на .ts .
• Используйте TypeScript где угодно: код TypeScript можно запускать в любом браузере, на любом устройстве или в любой операционной системе. TypeScipt не относится к какой-либо виртуальной машине и т. Д.
• TypeScript поддерживает библиотеки JS: с помощью TypeScript разработчики могут использовать существующий код JavaScript, включать популярные библиотеки JavaScript и могут вызываться из другого кода JavaScript.

Разница между TypeScript и JavaScript:

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

Преимущества использования TypeScript над JavaScript

• TypeScript всегда указывает на ошибки компиляции только во время разработки. Из-за этого во время выполнения вероятность получения ошибок намного меньше, тогда как JavaScript является интерпретируемым языком.
• TypeScript имеет функцию, которая строго типизирована или поддерживает статическую типизацию. Это означает, что статическая типизация позволяет проверять правильность типа во время компиляции. Это не доступно в JavaScript.
• TypeScript — это не что иное, как JavaScript и некоторые дополнительные функции, например функции ES6. Это может не поддерживаться в целевом браузере , но машинопись компилятор может скомпилировать файлы .ts в ES3, ES4 и ES5 также.

Недостатки использования TypeScript над JavaScript

• Обычно TypeScript требует времени для компиляции кода.
• TypeScript не поддерживает абстрактные классы.

TypeScript – Изучаем с нуля

Дата публикации: 2018-01-26

От автора: начнем изучение TypeScript с нуля, а именно — с того, откуда он вообще взялся и для чего нужен.

JavaScript был представлен как язык программирования для клиентской стороны. Однако разработка Node.js позволила рассматривать JavaScript как перспективную технологию и на стороне сервера. Но по мере развития кода JavaScript, он становится все более запутанным, поэтому следить за кодом и повторно его использовать становится все сложнее.

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

Что такое TypeScript?

Согласно определению, «TypeScript – это JavaScript для разработки в масштабах приложений». TypeScript является строго типизированным, объектно-ориентированным, компилируемым языком программирования. Он был разработан Андерсом Хейлсбергом (разработчик C#) в Microsoft. TypeScript представляет собой как язык программирования, так и набор инструментов. Это типизированный, расширенный JavaScript, компилируемый в JavaScript. Другими словами, TypeScript – это JavaScript с некоторыми дополнительными характеристиками.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Характеристики TypeScript

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

TypeScript поддерживает другие JS библиотеки. Компилируемый TypeScript может быть использован любым JavaScript кодом. JavaScript, сгенерированный с помощью TypeScript, может повторно использовать все существующие JavaScript фреймворки, инструменты и библиотеки.

JavaScript – это TypeScript. Это значит, что любой валидный .js файл можно переименовать в .ts и скомпилировать с другими TypeScript файлами.

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

TypeScript и ECMAScript

ECMAScript спецификация – это стандартизированная спецификация языка скриптов. Опубликовано уже шесть версий ECMA-262. Шестая стандартная версия имеет кодовое название «Harmony». TypeScript поддерживает спецификацию ECMAScript6.

TypeScript применяет базовые свойства языка спецификации ECMAScript5, то есть официальной спецификации JavaScript. Такие свойства языка TypeScript как Модули и ориентация на основе классов соответствуют спецификации EcmaScript 6. Плюс ко всему, TypeScript охватывает такие свойства как обобщенный тип и сигнатура типа, которые не являются частью спецификации EcmaScript6.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Зачем нужен TypeScript?

TypeScript во многом превосходит все аналоги, к примеру, такие языки программирования как CoffeeScript и Dart, в том плане, что TypeScript – это расширенный JavaScript. Для сравнения, Dart и CoffeeScript являются новыми языками, и для них требуется среда выполнения, ориентированная на конкретный язык. Преимущества TypeScript:

Компиляция − JavaScript – это интерпретируемый язык программирования. По этой причине его нужно тестировать на корректность. В таком случае, если в коде присутствует ошибка, то это обнаружится только в конце, когда код уже полностью написан. Чтобы найти баг, придется потратить много времени. Компилятор типа «исходный код в исходный код» обеспечивает функцию проверки ошибок. Когда TypeScript находит синтаксические ошибки, он компилирует код и генерирует ошибки компиляции. Таким образом, можно найти ошибки еще до выполнения кода.

Строгая статическая типизация − JavaScript не является строго типизируемым языком программирования. TypeScript обладает функцией статической типизации и системой вывода типов посредством TLS (TypeScript Language Service – Языковая служба TypeScript). Тип переменной, объявленной без указания типа, может быть выведен посредством TLS на основе значения.

TypeScript поддерживает определения типа для существующих JavaScript библиотек. Файл определений TypeScript (с расширением .d.ts) обеспечивает определения для внешних JavaScript библиотек. Как результат, код TypeScript может содержать эти библиотеки.

TypeScript поддерживает такие понятия объектно-ориентированного программирования как классы, интерфейсы, механизм наследования и так далее.

Компоненты TypeScript

В основе TypeScript лежат три компонента:

Язык – Он включает в себя синтаксис, ключевые слова и сигнатуры типа.

Компилятор TypeScript − Компилятор TypeScript (tsc) конвертирует инструкции, написанные в TypeScript для его JavaScript эквивалентов.

Языковая служба TypeScript – «Языковая служба» предоставляет дополнительный уровень вокруг конвейера основного компилятора, которым являются редакторы. Языковая служба поддерживает стандартный набор стандартных операций по редактированию, например, автодополнение инструкций, автопоподстановки для сигнатур, форматирования и т.д.

Файлы определений

После того, как скрипт TypeScript был скомпилирован, можно сгенерировать файл определений (с расширением .d.ts), который выступает в качестве интерфейса для компонентов в скомпилированном JavaScript. Принцип действия файлов определений аналогичен принципу действия файлов заголовков в C/C++. Файлы определений (файлы с расширением .d.ts) обеспечивают автодозаполнение для поддержки типов, вызовов функций и переменных для таких JavaScript библиотек как jQuery, MooTools и т.д.

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Классы и интерфейсы в TypeScript

Классы и интерфейсы являются мощными инструментами, которые облегчают не только объектно-ориентированное программирование, но и проверку типов в TypeScript. Класс — это шаблон (blueprint), используя который мы можем создавать экземпляры объектов, у которых будет точно такая же конфигурация, как и у шаблона — те же свойства и методы. Интерфейс — это группа взаимосвязанных свойств и методов, которые описывают объект, но не обеспечивают реализацию или инициализацию этих свойств и методов в объектах.

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

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

Использование классов

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

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

Давайте рассмотрим пример определения класса PizzaMaker :

PizzaMaker — это простой класс. Он имеет статический метод, называемый create . Что делает этот метод особенным, так это то, что мы можем его использовать, не создавая экземпляр класса. Мы просто вызываем метод непосредственно в классе — так же, как если бы мы работали с чем-то вроде Array.from :

Вызов метода PizzaMaker.create() возвращает новый объект — не класс — со свойствами name и toppings , определенными в объекте, который передан этому методу в качестве аргумента.

Если в классе PizzaMaker метод create не определен как статический ( static) метод, то для использования данного метода нам понадобится создать экземпляр класса PizzaMaker :

Мы получаем тот же результат, что и при использовании метода create как статического ( static) метода. Возможность использования классов TypeScript с и без существующего экземпляра класса делает их чрезвычайно универсальными и гибкими. Добавление статических свойств и методов в класс заставляет их действовать как singleton, в то время как определение нестатических свойств и методов заставляет их действовать как factory.

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

В определении класса Pizza мы используем удобную возможность сокращения в TypeScript для определения свойств класса из аргументов конструктора — это экономит много времени! При помощи класса Pizza можно создавать экземпляры объектов, у которых есть свойства name и toppings :

Помимо названия Pizza перед объектом pizza , который показывает, что данный объект фактически является экземпляром класса Pizza , результат работы команд new Pizza(. ) и PizzaMaker.create(. ) одинаков. Оба подхода дают объект с одной и той же структурой. Поэтому мы можем использовать класс Pizza для проверки типов аргумента event метода PizzaMaker.create(. ) :

Мы сделали класс PizzaMaker более декларативным и, следовательно, гораздо более удобочитаемым. Как вариант, если нам нужно обеспечить ту же структуру объектов, что и в классе Pizza , в других местах, у нас теперь есть портативная конструкция! Добавьте свойство export в определении класса Pizza , и вы получите доступ к нему из любой точки приложения.

Использование Pizza как класса является хорошим вариантом, если мы хотим определить и создать класс Pizza ; но что, если мы хотим только определить структуру класса Pizza , но нам никогда не понадобится ее создавать? Вот когда пригодится interface !

Использование интерфейса

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

И хотя класс может определять factory или singleton путем инициализации своих свойств и реализации своих методов, интерфейс — это просто структурный контракт, который определяет свойства объекта — как имя свойства, так и тип свойства. То, как вы реализуете или инициализируете свойства внутри interface , не имеет к интерфейсу никакого отношения. Давайте посмотрим пример, в котором преобразуем класс Pizza в интерфейс Pizza :

Поскольку Pizza как класс или как интерфейс используется классом PizzaMaker исключительно для проверки типов, рефакторинг Pizza как интерфейса никак не повлиял на тело класса PizzaMaker . Заметьте, что интерфейс Pizza просто перечисляет свойства name и toppings и определяет их тип.

Существенным изменением является то, что мы больше не можем создавать экземпляр Pizza . Давайте дополнительно объясним это основное различие между интерфейсом и классом, рассмотрев Pizza снова как класс.

Сравнение использования класса и интерфейса

Как уже упоминалось ранее, текущий код обеспечивает проверку типов свойств для Pizza , но не может создать пиццу:

Это плохо, потому что у нас отсутствует прекрасная возможность для дальнейшего улучшения декларативного характера и удобочитаемости нашего кода. Обратите внимание, что метод PizzaMaker.create() возвращает объект, который, безусловно, очень похож на пиццу!

У этого объекта есть свойство name типа string и есть свойство toppings , которое является строковым массивом — мы получаем эти типы свойств из объекта event , которым является Pizza . Но разве не было бы здорово, если бы мы могли вернуть экземпляр Pizza из вызова метода PizzaMaker.create() ?

Как уже упоминалось ранее, мы не можем создать экземпляр интерфейса Pizza , так как это приведет к ошибке. Тем не менее, мы можем снова преобразовать интерфейс Pizza в класс и затем вернуть экземпляр Pizza :

Мы применяем структуру, в которой метод PizzaMaker.create() принимает аргумент event , сохраняя при этом возможность создания объекта, который определяет тип Pizza как класс! Здесь мы получаем лучшее из обоих миров — шаблон (blueprint) и контракт. Все зависит от того, какой подход и для какого случая необходим.

Заключение

Мы многому научились, не погружаясь в большое количество кода. Обобщить в двух словах — если необходимо создать экземпляр объекта, при этом получив преимущества проверки типов таких сущностей как аргументы, возвращаемые типы или generics — имеет смысл использовать класс.

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

Поскольку как интерфейс, так и класс определяют структуру объекта и могут быть взаимозаменяемы в некоторых случаях, стоит отметить, что если нам нужно разделить структурное определение между различными классами, мы можем определить эту структуру в интерфейсе, а затем в каждом классе реализовать этот интерфейс!

Каждый класс должен будет объявить или реализовать каждое свойство интерфейса. В этом заключается мощь и гибкость TypeScript. У нас есть комплексный объектно-ориентированный дизайн в сочетании с универсальной проверкой типов.