JavaScript vs TypeScript что в каких случаях лучше использовать


Оглавление (нажмите, чтобы открыть):

Что такое TypeScript и почему я буду использовать его вместо JavaScript?

Не могли бы вы описать язык TypeScript?

Что это может сделать, что JavaScript или доступные библиотеки не могут сделать, что даст мне основание считать это?

5 ответов

1066 Решение Paul Dixon [2012-10-02 19:41:00]

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

1000 футов.

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

Чтобы получить представление о том, что я имею в виду, посмотрите Microsoft на вводном видео на этом языке.

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

Это с открытым исходным кодом, но вы получаете только умный Intellisense по мере ввода, если используете поддерживаемую среду IDE. Первоначально это была только Microsoft Visual Studio (также отмеченная в блоге от Мигеля де Икаса). В наши дни другие IDE также предлагают поддержку TypeScript.

Есть ли другие технологии?

Там CoffeeScript, но это действительно служит другой цели. IMHO, CoffeeScript обеспечивает читаемость для людей, но TypeScript также обеспечивает глубокую читаемость для инструментов с помощью необязательной статической типизации (см. Это недавнее сообщение в блоге для немного более критического анализа). Там также Dart, но полная замена для JavaScript (хотя он может создавать код JavaScript)

пример

В качестве примера можно привести несколько TypeScript (вы можете играть с этим на игровой площадке TypeScript)

И вот JavaScript, который он произведет

Обратите внимание, как TypeScript определяет тип переменных-членов и параметры метода класса. Это удаляется при переводе на JavaScript, но используется IDE и компилятором для обнаружения ошибок, например, для ввода числового типа в конструктор.

Он также способен вызывать типы, которые явно не объявлены, например, он будет определять, что метод greet() возвращает строку.

Отладка машинописных записей

Многие браузеры и IDE предлагают прямую поддержку отладки через sourcemaps. См. Этот вопрос о переполнении стека для более подробной информации: Отладка кода типа TypeScript с помощью Visual Studio

Хотите узнать больше?

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

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

Отношение к JavaScript

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

JavaScript стандартизирован по стандартам ECMAScript. Старые браузеры не поддерживают все функции новых стандартов ECMAScript (см. Эту таблицу). TypeScript поддерживает новые стандарты ECMAScript и компилирует их (более старые) целевые объекты ECMAScript по вашему выбору (текущие цели — 3, 5 и 6 [aka 2015]). Это означает, что вы можете использовать функции ES2015 и выше, такие как модули, лямбда-функции, классы, оператор распространения и деструктурирование, оставаясь в обратном порядке совместимыми со старыми браузерами.

Поддержка типов не является частью стандарта ECMAScript и, вероятно, никогда не будет связана с интерпретируемым характером, а не скомпилированным характером JavaScript. Типичная система TypeScript невероятно богата и включает в себя: интерфейсы, перечисления, гибридные типы, дженерики, типы объединения/пересечения, модификаторы доступа и многое другое. На официальном сайте TypeScript дается обзор этих функций. Система типов типов сегодня совместима с другим типизированным языком, а в некоторых случаях, возможно, более мощным.

Связь с другими языками ориентации JavaScript

ТипScript имеет уникальную философию по сравнению с другими языками, которые скомпилированы для JavaScript. Код JavaScript действителен; TypeScript — это надмножество JavaScript. Вы можете почти переименовать ваши .js файлы в .ts файлы и начать использовать TypeScript (см. » .ts JavaScript» ниже). Файлы TypeScript скомпилированы на читаемый JavaScript, так что миграция возможна и понимание скомпилированного TypeScript совсем не сложно. TypeScript основывается на успехах JavaScript и улучшает свои недостатки.

С одной стороны, у вас есть инструменты будущего доказательства, которые используют современные стандарты ECMAScript и сводят их к старым версиям JavaScript, причем Babel является самым популярным. С другой стороны, у вас есть языки, которые могут полностью отличаться от JavaScript, которые больше нацелены на JavaScript, такие как Coffeescript, Clojure, Dart, Elm, Haxe, ScalaJs и целый хост (см. Этот список). Эти языки, хотя они могут быть лучше, чем когда-либо будущее JavaScript, могут привести к большему риску не найти достаточного усыновления для обеспечения их будущего. У вас также может быть больше проблем с поиском опытных разработчиков для некоторых из этих языков, хотя те, которые вы найдете, часто могут быть более восторженными. Взаимодействие с JavaScript также может быть немного более сложным, поскольку они удалены от того, что на самом деле является JavaScript.

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

Необязательно статическая типизация и вывод типа

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

ТипScript делает типизацию немного проще и намного менее явной благодаря использованию вывода типа. Например: var x = «hello» в TypeScript совпадает с var x: string = «hello» . Тип просто выведен из его использования. Даже если вы явно не вводите типы, они все еще существуют, чтобы вы не делали то, что в противном случае могло бы привести к ошибке во время выполнения.

По умолчанию используется TypeScript. Например, function divideByTwo(x) < return x/2 >является допустимой функцией в TypeScript, которую можно вызывать с любым параметром, даже если вызов ее со строкой, очевидно, приведет к ошибке выполнения. Так же, как вы привыкли в JavaScript. Это работает, потому что, когда ни один тип не был явно назначен, и тип не может быть выведен, как в примере divideByTwo, TypeScript неявно назначает тип any . Это означает, что знак типа divideByTwo автоматически становится function divideByTwo(x: any): any . Существует флаг компилятора, запрещающий это поведение: —noImplicitAny . Включение этого флага дает вам большую степень безопасности, но также означает, что вам придется делать больше ввода.

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

Интересно отметить, что в этой же работе обнаруживается, что TypeScript менее подвержен ошибкам, чем JavaScript:

Для тех, у кого есть положительные коэффициенты, мы можем ожидать, что язык связан с ceteris paribus, большим количеством исправлений дефектов. Эти языки включают C, C++, JavaScript, Objective-C, Php и Python. Языки Clojure, Haskell, Ruby, Scala и TypeScript имеют отрицательные коэффициенты, подразумевающие, что эти языки менее вероятны, чем среднее, чтобы привести к фиксации дефектов.

Расширенная поддержка IDE

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

Существует широкий спектр IDE, которые отлично поддерживают TypeScript, такие как Visual Studio Code, WebStorm, Atom и Sublime.

Строгие проверки нуля

Ошибки выполнения формы cannot read property ‘x’ of undefined или undefined is not a function , которая обычно вызвана ошибками в коде JavaScript. Вне коробки TypeScript уже уменьшает вероятность возникновения таких ошибок, поскольку нельзя использовать переменную, которая не известна компилятору TypeScript (за исключением свойств any типизированных переменных). По-прежнему возможно, хотя ошибочно использовать переменную, которая установлена на undefined . Тем не менее, в версии 2.0 TypeScript вы можете полностью устранить эти ошибки, используя непустые типы. Это работает следующим образом:

При включении строгих проверок нулевой —strictNullChecks ( —strictNullChecks ) компилятор TypeScript не разрешает undefined назначать переменную, если вы явно не объявляете ее нулевым типом. Например, let x: number = undefined приведет к ошибке компиляции. Это идеально подходит для теории типов, поскольку undefined не является числом. Можно определить x , чтобы быть типом сумма number и undefined , чтобы исправить это: let x: number | undefined = undefined let x: number | undefined = undefined .

Как известно, тип известен как nullable, то есть он имеет тип, который также может иметь значение null или undefined , компилятор TypeScript может определять посредством анализа типа потока на основе потока управления, независимо от того, может ли ваш код безопасно использовать переменную или нет. Другими словами, когда вы проверяете переменную, не undefined через, например, оператор if компилятор TypeScript выводит, что тип в этой ветки потока управления кодом больше не имеет значения NULL, и поэтому его можно безопасно использовать. Вот простой пример:

Во время сборки 2020 года со-дизайнер TypeScript Андерс Хейлсберг дал подробное объяснение и демонстрацию этой функции: видео (с 44:30 до 56:30).

компиляция

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

Компилятор TypeScript может встроить информацию о исходной карте в сгенерированные файлы.js или создать отдельные файлы.map. Информация о исходной карте может быть использована путем отладки утилит, таких как Chrome DevTools и другая среда IDE, чтобы связать строки в JavaScript с теми, которые сгенерировали их в TypeScript. Это позволяет вам устанавливать контрольные точки и проверять переменные во время выполнения непосредственно на вашем коде TypeScript. Информация о исходной карте работает очень хорошо, она была задолго до TypeScript, но отладка TypeScript, как правило, не так велика, как при непосредственном использовании JavaScript. Возьмите this ключевое слово, например. Из-за измененной семантики this ключевого слова вокруг замыканий с ES2015 this может существовать во время выполнения как переменная с именем _this (см. Этот ответ). Это может запутать вас во время отладки, но, как правило, это не проблема, если вы знаете об этом или проверяете код JavaScript. Следует отметить, что Вавилон страдает от такой же проблемы.

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

Существуют плагины компиляции TypeScript, доступные для Webpack, Gulp, Grunt и почти любой другой инструмент для сборки JavaScript. Документация TypeScript содержит раздел по интеграции с инструментами построения, охватывающий их все. ЛИНТЕР также доступен, если вы хотите еще больше проверки времени сборки. Существует также большое количество проектов семян, которые помогут вам начать с TypeScript в сочетании с множеством других технологий, таких как Angular 2, React, Ember, SystemJs, WebPack, Gulp и т.д.


Совместимость JavaScript

Поскольку TypeScript так тесно связан с JavaScript, он обладает большими возможностями взаимодействия, но для работы с библиотеками JavaScript в TypeScript требуется дополнительная работа. Определения _.groupBy необходимы, чтобы компилятор TypeScript понимал, что вызовы функций, такие как _.groupBy или angular.copy или $.fadeOut , на самом деле не являются незаконными утверждениями. Определения для этих функций помещаются в файлы .d.ts .

Простейшая форма, которую может принять определение, — это позволить использовать идентификатор любым способом. Например, при использовании Lodash один файл определения строки declare var _: any позволит вам вызвать любую функцию, которую вы хотите на _ , но тогда, конечно, вы также можете ошибаться: _.foobar() будет юридический вызов TypeScript, но, конечно, это незаконный вызов во время выполнения. Если вам нужна правильная поддержка типов и завершение кода, ваш файл определения должен быть более точным (см. Определения lodash для примера).

Модули Npm, которые поставляются предварительно с их собственными определениями типов, автоматически понимаются компилятором TypeScript (см. Документацию). Для почти любой другой полупопулярной библиотеки JavaScript, которая не содержит собственных определений, кто-то там уже сделал определения типов доступными через другой модуль npm. Эти модули имеют префикс «@types/» и поступают из репозитория Github, называемого DefinitelyTyped.

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

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

Преобразование из JavaScript в TypeScript

Любой файл .js можно переименовать в .ts и .ts через компилятор TypeScript, чтобы получить синтаксически тот же код JavaScript, что и вывод (если он был синтаксически правильным в первую очередь). Даже когда компилятор TypeScript получает ошибки компиляции, он все равно будет создавать файл .js . Он может даже принимать файлы .js качестве входных данных с флагом —allowJs . Это позволяет сразу начать с TypeScript. К сожалению, ошибки компиляции могут возникнуть в начале. Нужно помнить, что это не ошибки остановки шоу, как вы можете использовать с другими компиляторами.

Ошибки компиляции, получаемые в начале, когда преобразование проекта JavaScript в проект типа TypeScript неизбежны по характеру TypeScript. TypeScript проверяет весь код на достоверность и, следовательно, ему нужно знать обо всех используемых функциях и переменных. Таким образом, определения типов должны быть установлены для всех из них, иначе ошибки компиляции должны произойти. Как уже упоминалось в главе выше, для почти любой инфраструктуры JavaScript существуют файлы .d.ts которые можно легко получить при установке пакетов DefinitelyTyped. Однако может случиться так, что вы использовали некоторую неясную библиотеку, для которой нет определений типа TypeScript, или что вы заполняете некоторые примитивы JavaScript. В этом случае вы должны указать определения типов для этих битов, чтобы ошибки компиляции исчезли. Просто создайте файл .d.ts и .d.ts его в массив files tsconfig.json, чтобы он всегда учитывался компилятором TypeScript. В нем объявляются те биты, которые TypeScript не знает о типе any . Как только вы устраните все ошибки, вы можете постепенно вводить текст в эти части в соответствии с вашими потребностями.

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

Наибольшим препятствием является кривая обучения. Я рекомендую вам сначала поиграть с небольшим проектом. Посмотрите, как он работает, как он создается, какие файлы он использует, как он настроен, как он функционирует в вашей среде разработки, как он структурирован, какие инструменты он использует и т.д. Преобразование большой базы JavaScript JavaScript в TypeScript выполнимо, когда вы знаете что ты делаешь. Прочтите этот блог, например, о преобразовании строк 600k в машинопись за 72 часа). Просто убедитесь, что вы хорошо понимаете язык, прежде чем совершать прыжок.

Принятие

ТипScript является открытым исходным кодом (лицензия Apache 2, см. Github) и поддерживается Microsoft. Андерс Хейлсберг, ведущий архитектор С#, возглавляет проект. Это очень активный проект; команда TypeScript выпустила много новых функций за последние несколько лет, и многие из них все еще планируются (см. дорожную карту).

В опросе разработчиков StackOverflow 2020 года TypeScript был самым популярным транспилером JavaScript (9-е место в целом) и занял третье место в самой любимой категории языков программирования.

60 lebobbi [2020-02-11 23:32:00]

TypeScript делает что-то похожее на то, что меньше или sass делает для CSS. Они являются супер-наборами, что означает, что каждый JS-код, который вы пишете, является допустимым кодом TypeScript. Кроме того, вы можете использовать другие лакомства, которые он добавляет к языку, и переписанный код будет действительным js. Вы даже можете установить версию JS, в которую вы хотите получить полученный код.

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

» TypeScript Основы» — видео-курс Pluralsight по Dan Wahlin и John Papa — это действительно хорошо, в настоящее время (25 марта 2020 года) обновлено, чтобы отразить TypeScript 1.8, введение в Typescript.

Для меня действительно хорошими функциями, помимо хороших возможностей для intellisense, являются классы, интерфейсы, модули, простота внедрения AMD и возможность использования отладчика Visual Studio TypeScript при вызове с IE.

Подводя итог: если используется по назначению, TypeScript может сделать JavaScript более надежным и простым. Это может значительно повысить производительность JavaScript-программиста по всей SDLC.

Ecma script 5 (ES5), который все браузер поддерживает и прекомпилирует. ES6/ES2015 и ES/2020 пришли в этом году с большим количеством изменений, поэтому, чтобы всплывать эти изменения, есть что-то среднее между которым следует заботиться о так TypeScript.

• TypeScript — это типы → означает, что мы должны определить тип данных каждого свойства и методов. Если вы знаете С#, то машинопись легко понять.

• Большое преимущество TypeScript заключается в том, что мы сталкиваемся с проблемами, связанными с типом, перед началом производства. Это позволяет сбой модульных тестов, если есть несоответствие типов.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 6 из 10 « Первая 6 7 8 > Последняя »
Сообщение от x-yuri А, так вы на мир во всем мире надеетесь? Ну так не будет такого.

Я начинал изучение JavaScript с VBScript, вернее это был VBScript, а не JavaScript. Кому как не мне помнить недоумение, в попытке понять различия между этими двумя языками и невольную радость, когда я узнал что есть один язык для всех браузеров и разочарование, когда я понял что языки не идентичны, а просто похожи и у одного из них проблемы с обновлением.

Мы всё это уже проходили. Я больше бы удивился, если бы ms не выпустило ещё одну версию js в виде typescript, но я точно этому не рад. Хотя в принципе мне до барабана, т.к. в ближайшие пару лет я об этом даже не подумаю ни разу.

Ишак должен умереть, либо обновляться спокойно без вырезания и вклеивания в систему. Хотя лично меня бы устроило если бы он просто помер. Это будет эволюция. Революция — всегда плохо. Она откидывает развитие порой на долгие десятки лет. Кампай!

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

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

Лично я не испытываю никаких трудностей при написании больших приложений. А в чём трудности?

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

Борьба корпораций на лицо не более. Идея взять двух котов, засунуть в один мешок и ждать что они там будут дружно сосуществовать мне кажется абсурдной. Похоже ms так не считает и решил и js-иков оставить и других программистов подтянуть на работы.

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

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

Мастер Йода рекомендует:  5 способов выровнять HTML-элемент горизонтально и вертикально

PS: А чтобы нагнать понту и пресечь срачи нужно пригласить какую-нибудь авторитетную Личность, которая будет пиарить продукт по умолчанию. Как в данном случае и сделали, пригласили:

[QUOTE:Warhammer]Хейлсберг,_Андерс, один из основных авторов Dellhi и c#[/quote]

А в чём трудности?

javaScript по прежнемe язык для написания маленьких скриптов на скорую руку, а не серьёзных программ.

В большой программе обычно много человек, и нужно согласовать работу над компонентами, компонентов много, людей тоже. Хорошо бы описать совместимость этих компонентов отдельно к примеру в Интерфейсах или Абстрактных классах. Тогда бы можно было увидеть все ошибки связанные с несовместимосью компонентов уже на этапе компиляции, а не после кучи тестов. Но ведь в js нет ни интерфейсов ни классов.

Наверное разные части приложения хорошо бы разместить в разные файлы, и подгружать их по мере необходимости. Но в js нет этой возможности. Спасибо что хотябы есть eval.

У меня куча функций, хорошо чтобы программист передав некорректное значение в функцию сразу бы об этом узнал, а не любовался на остановленный скрипт, или кривую картинку гадая в чём дело. В решении этого вопроса мне могла бы помочь статическая типизация, которая не пропустила бы некоректные аргументы функции. Но в js вы передаёте какие угодно параметры, и столько сколько захотите.

Бесполезность протипов я много раз ругал уже. За что был обвинён в ООП головного мозга. Забавно что google в dart, microsoft в typeScript, es6,coffescript как и подавляющее число фреймворков классы реализовали всё таки, или вспомогательные методы вроде extend или define, наверно они все тоже дураки. Только штык jQuery молодец .

вот и выресовывается наборчик по требования.
типизация+интерфейсы+класс ы+ модульность

Теперь смотрим typeScript и дарт,
и видим классы, интерфейсы, модульность, типизация.

проблемы есть, а typeScript и дарт убогие пока, но всё же попытки их решения. Ну и на том спасибо.


Как начать работать с TypeScript

Эта статья покажет вам, как быстро начать работать с TypeScript, и мы обсудим плюсы и минусы использования TS. TypeScript — это расширенный набор JavaScript и стандарта TC39. С помощью TS мы можем определять как простые, так и сложные статические типы для переменных в нашем коде.

TypeScript — это просто JavaScript с необязательным добавлением типов для ваших переменных. Вы можете писать в современном синтаксисе JavaScript (ES2015+) и использовать TypeScript, после чего с помощью компилятора преобразовывать TypeScript(.ts) в JavaScript(.js), и также при необходимости скомпилировать JavaScript с поддержкой предыдущих версий, таких как ES5.

Обратите внимание, что если вы используете require() или import/export, вам все равно нужно будет использовать сборщик для браузера, такой как Webpack, Rollup или SystemJS.

Устанавливаем TypeScript

Сначала установите TypeScript, используя npm:

или с помощью yarn:

После глобальной установки вам будет доступна команда в терминале tsc.

Компилируем .ts файлы

Используя терминал, создайте новый каталог с названием ts-simple с помощью следующей команды:

Перейдите в этот каталог и создайте файл index.ts. Внутри этого файла мы создадим функцию с именем sayHello и принимаемым аргументом name с типом string.

Теперь используем tsc для компиляции нашего index.ts:

Эта команда создаст новый файл index.js, предварительно удалив типизацию из параметра, а также преобразовав файл в код ES5. Полученный файл можно запустить в браузере или использовать в Node. Ваш файл будет выглядеть следующим образом:

Чтобы проверить это, запустите созданный файл, используя следующую команду:

Ошибки компиляции TypeScript

Одним из преимуществ TypeScript является то, что он может автоматически обнаруживать ошибки в вашем коде, если типы не совпадают. Например, представьте, что в приведенном выше примере, для параметра name мы вызываем функцию .trim(). Если мы передадим переменную любого другого типа, это может привести к тому, что наш код вызовет ошибку при воспроизведении в браузере. Давайте посмотрим на наш обновленный пример, неправильно передав массив в функцию:

Это приведет к следующей ошибке TypeScript при запуске команды tsc index.ts:

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

Чем отличается JavaScript от ES6 и EC2015?

Собственно, вопрос: чем отличается JavaScript от ES6, EC2015 и TypeScript? Никто мне толком не может ответить по существу. Зачем для Angular 2 мне нужен именно TS?

2 ответа 2

JavaScript от ES6 и ES2015 ничем не отличается.

JavaScript — это исторически сложившиеся название языка программирования.

ES — ECMAScript — Это спецификация JavaScript, в которой описано как этот язык должен работать.

ES5, ES6 — Это версии этой спецификации.

ES2015 — Это второе название ES6, начиная с этой версии каждое следующая спецификация будет включать в себя год в котором сделана.

TS — TypeScript — Это язык на основе JS расширяющий его возможности. Работает как SCSS.

Для Angular 2 выбрали TypeScript как раз из за его возможностей. Сам Angular2 написан на TypeScript. Приложения на Angular 2 можно писать и на ES6 и на ES5, но стандартный Туториал написан на TS.

TypeScript как будущее энтерпрайзного JavaScript. Часть 1

Не стану пересказывать тут историю появления JS, она прекрасно всем известна, и описывается одним словом — спешка. JavaScript задумывался и создавался в очень сжатые сроки. По словам создателя JS Brendan Eich, у них было лишь 10 дней на все. Microsoft наступал на пятки и, если бы они проиграли, то сейчас эта статья была бы частично посвящена VBScript (Visual Basic Script).

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

Битва с ветряными мельницами

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

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

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

Рискую быть закиданным помидорами, так как покушаюсь на святое, но самый популярный пример — jQuery. Стоит хотя бы вспомнить возможные варианты главной функции-объекта jQuery. «Функция-объект» — чувствуете, как это звучит? Вы можете вызвать jQuery как функцию девятью (девятью, Карл!) различными способами — все зависит от аргументов. А еще, сама функция является объектом, в котором может быть неконтролируемое число методов и/или свойств.

Да, jQuery — это действительно швейцарский нож с огромным количеством возможностей по упрощению жизни рядовому веб-разработчику. Но часто на базе системы jQuery-плагинов создают целые приложения интернет-магазина с десятками форм и диалогов. И вот там уже начинается натуральный ад и «лапша-код». Это самый популярный пример. jQuery разрабатывался как средство удобного доступа к DOM, но в итоге получился комбайн и практически отдельный язык программирования, что и порождает целую отдельную вселенную безумия, где на каждый вопрос один ответ — плагин для jQuery.

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

В корпорациях вроде Google технические специалисты очень быстро столкнулись с тем, что с ростом размеров JavaScript приложения практически с геометрической или даже экспоненциальной скоростью растут затраты на поддержку и исправление ошибок. В ответ на эту проблему Google выпустил GWT — Google Web Toolkit. Это компилятор, набор инструментов и базовых классов для разработки веб-приложений на Java. Стало возможным с минимальными оговорками писать веб-приложения на строго типизированном языке программирования с использованием большинства его плюшек. В качестве результата вы получаете приложение, написанное на, фактически, машинном JavaScript. Этот код невозможно отлаживать отдельно от GWT, это просто лишено смысла. В декабре прошлого года, после более чем года молчания, проект выпустил бету новой версии (2.8.0).

Стоит также заметить, что GWT чаще рассматривают как единственную возможность для джавистов, не владеющих JS, писать развесистый front-end без отрыва от любимого языка для back-end’а.

Других же не устраивал только синтаксис JavaScript, и они разрабатывали свои варианты языка программирования, которые с разной степенью прозрачности транслируются в JavaScript. Тут список примеров возглавляет, конечно же, CoffeScript. Подборка всего, что так или иначе транслируется в JavaScript, опубликована на github в wiki проекта CoffeScript.

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

ES6 приходит к нам как набор дополнений к уже привычному стандарту ES5. Набор этих дополнений неточен, постоянно дополняется и переделывается в той или иной степени.

Конечно, ввиду того, что браузеров больше, чем один, и интерпретаторов JS, как минимум, столько же (даже несмотря на общие корни и/или основу у многих из них), каждый из них гнет свою линию и экспериментирует с синтаксисом, с трактованием предложений сообщества, или предлагает свои идеи.

Это своего рода продолжение войны браузеров, но уже в более вялой форме. Вот только она по-прежнему приводит к условиям проверки браузера или даже его версии в нашем коде, всевозможным «полифилам» (polifill), которые мы вынуждены подключать к нашим проектам, если хотим использовать какую-то «вкусность» из ES6, например, Promise или setImmediate. Но это история про браузерный API, а не про сам язык JavaScript.

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

Проект Babel представляет из себя транспайлер из современного представления о правильном переводе ES6 или даже ES2015 в код, совместимый с ES5. То есть разработчик получает возможность писать на самой современной версии JavaScript и, в большинстве случаев, не беспокоиться о совместимости с браузерами, которые еще не включают поддержку ES6 в свои JS-движки (или не включают по умолчанию, так как все, что скрыто за специальными экспериментальными настройками, лучше считать выключенным и недоступным). Про проект и все его возможности вы можете прочитать на официальном сайте, а мы пойдем дальше.

Бардак и порядок

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

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


С началом разработки появляются новые вопросы и трудности — иерархии классов нужно поддерживать здоровыми и четкими. Минимализм интерфейсов крупных компонентов нужно строго документировать и постоянно устраивать внимательное ревью кода, чтобы не пропустить момент, когда все пойдет вкривь и вкось. А это обязательно случится. В какой-то команде/проекте раньше, в какой-то позже, но это случится. И это будет похоже на притчу про лягушку в кастрюле с холодной водой на медленном огне. В чем может быть причина такого развития событий?

Тут я выскажу исключительно свое мнение, которое вы не должны воспринимать как чистую правду или аксиому. Но дело вот в чем: динамическая природа JS подталкивает к излишней гибкости, и это расхлябывает интерфейсы объектов и функций. Со временем ваши функции и конструкторы объектов начинают принимать все больше разновидностей аргументов, объектов разной степени целостности и такая гибкость в итоге приводит к росту числа фантомных багов, которые решаются подпорками то тут то там, что в свою очередь, еще сильнее повышает энтропию в вашем коде.

Единственное спасение от такого сценария — постоянное жестокое ревью каждого коммита/пул-реквеста, где каждое расширение интерфейса ставится под сомнение и отвергается, если задачу возможно решить уже существующими средствами. Чаще всего такой случай означает, что разработчик хочет передать данные в необычном формате, данные просто не подготовлены и разработчик хочет переложить ответственность за преобразование данных на класс получателя, а это уже архитектурное решение. Ну и постоянный рефакторинг и борьба с техническим долгом. Да, это противоречит большинству идей, что «Сначала доставить клиенту продукт, а потом наведем порядок» и, любимое многими, «Ну, ведь работает же?». Это все понятно, но крайности, — это всегда плохо, нужно искать баланс, когда вы сможете и продукт доставить вовремя, и не превратите процесс разработки и поддержки в ад для себя или других ваших товарищей. Ну или хотя бы отсрочите коллапс этого лапша-кода на максимальное время.

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

TypeScript — надстройка вокруг ES6, ES2015

Пришло время перейти к главной теме. TypeScript — это язык программирования, который является супер-сетом вокруг ES6, ES2015. Разработан в Microsoft и теперь развивается в содружестве с коммьюнити. Даже Google приложил руку в виде AtScript, был поглощен одной из прошлых версий TypeScript. Спросите, если хотите, подробности у Google.

Что из себя представляет супер-сет? Это надстройка вокруг основного языка. Таким образом, любой работающий JavaScript-код автоматически является валидным TypeScript-кодом.

Что нового привносит TypeScript:
— Статическая типизация и выведение типов;
— Необязательные аргументы для функций и значения по умолчанию;
— public, private, protect для свойств и методов классов;
— Геттеры и сеттеры для свойств «без головной боли»;
— Декораторы для всего*;
— Интерфейсы и абстрактные классы;
— Generics;
— Компилирование в ES5 или даже в ES3 (с оговорками).

И в том числе плюшки ES6:
— Arrow Functions;
— Классы с единым стилем наследования;
— async/await из ES7;
— Итераторы и Генераторы*;
— Многострочные строки с шаблонизацией и тоже «без головной боли» с плюсами и кавычками;
— Управление зависимостями, в том числе и их динамическая загрузка.

* — (цель компиляции — не ниже ES5) экспериментальная поддержка, имплементация может измениться.

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

Подавляющее большинство работы по защите вас от вас же компилятор производит именно в момент анализа типов данных и их взаимодействия. Вообще вся история про TS так или иначе сводится к сверке типов данных и интерфейсов объектов. Только после этого начинают работать преобразователи синтаксического сахара. Они чем-то напоминают простые макросы, которые по шаблону переделывают строки (конечно, это грубое сравнение, но оно близко к реальности).

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

Предупреждения — главное оружие компилятора. Через предупреждения, которые он выдает в консоли, он сообщает вам о своих «сомнениях» относительно качества кода — «Вы указали, что эта переменная имеет тип Строка, но вот тут вы используете её как Число, вы уверены?» (это очень вольный пересказ сообщения компилятора). Если вы уверены, и ваш выбор конкретно такой логики осознан, то вы можете такую строчную переменную дополнить приведением типа к числу (или воспользоваться, например, parseInt() ), явно сообщая компилятору, что ситуация под контролем.

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

Это на самом деле удобно и практично, особенно в самом начале осваивания TS, его внедрения в существующий проект — вы можете писать TypeScript-код и тут же видеть получаемый JavaScript-код.

Предупреждения и ошибки компиляции

В большинстве случаев компилятор может скомпилировать код, даже с предупреждениями. Возможных ошибок, останавливающих компиляцию, довольно мало — например, некоторые синтаксические конструкции вроде декораторов невозможно скомпилировать в код, совместимый со стандартом ES3. Но это не означает, что вы не можете настроить жесточайшие правила для своего проекта.
Например, пакет компиляции TypeScript для grunt-ts вы можете настроить так, что он будет обрывать сборку даже при одном предупреждении от компилятора.

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

Лишь в ближайшее время компилятор TypeScript научится использовать в своей работе JavaScript-код (то есть код в файлах .js) — это позволит расширить сферу его возможностей к анализу на jsDoc-комментарии, где часто можно встретить в том числе типы данных для переменных, аргументов и непосредственному выведению типов на основе кода.

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

Статическая типизация и выведение типов

У вас есть базовый набор типов JavaScript с явными декларациями, плюс парочка дополнительных, вроде enum(множество) и tuple (тьюплы, схожие по концепции с таковыми в python).

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

Компилятор достаточно умен, чтобы не требовать повсеместного указания типов, значительную часть типов он способен вывести, исходя из вашего кода. Местами это удобно и позволяет писать лаконичный компактный код. Но иногда все же следует себя заставлять и явно описывать типы, повышая читаемость кода для других программистов, да и для вас из «завтра».

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

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

Также TypeScript, как говорилось ранее, оставляет вам возможность использовать все богатства динамического языка и позволяет вводить особый тип данных any. Этот тип данных говорит компилятору буквально следующее: «В этой переменной может быть все что угодно».

Необязательные аргументы для функций и значения по умолчанию

Без предисловий, пример, который расскажет сразу все:

Кроме объявления типа или структуры (что по сути является типом, но без имени) аргумента, в F1 используется конструкция для функции с неограниченным количеством аргументов (при вызове). Фокус состоит в том, что в переменную otherParams будут помещены все прочие (после четвертого) аргументы, с которыми будет вызвана функция. Конечно, для этого будет сгенерированы несколько строк JS-кода, которые любезно отделят эти аргументы из arguments в массив.

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

F3 показывает пример с аргументом, который имеет значение по умолчанию. Синтаксически здесь все просто, с точки зрения генерируемого JS-кода тоже — создается условие, проверяющее аргумент на существование, если аргумент не определен, ему присваивают это значение.

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

Те из вас, кто знаком с языком Python, могут спросить, почему авторы не пошли дальше и не добавили передачу аргументов по имени, примерно вот так:

let x = F3(a = 1, c = 3);

Я, конечно же, выскажу только свое мнение, я даже не знаю, обсуждалась ли такая идея среди разработчиков языка. Но у этой идеи есть явная проблемная сторона — реализовать такой синтаксис возможно через оборачивание всех аргументов в объект. Но тогда такие функции будут потеряны для внешнего кода написанного на JS. Хотя, конечно, можно представить заглушку и на этот случай, но тогда генерируемый код станет существенно сложнее, да и будет сложнее сохранить прозрачность трансляции и увеличится риск коллизий в именах аргументов и полей в передаваемых структурах. Что если внешний JS код вызывает такую функцию и в первом аргументе передает объект в котором есть поля, чьи имена совпадают с именами аргументов функции? Вводить запрет на «первый сложный аргумент функции»? Это выглядит, как минимум, странно.

Public, private, protect для свойств и методов классов

Об этом пункте можно было бы рассказать в разделе «Без магии, или Контроль над ситуацией».

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

Геттеры и сеттеры для свойств «без головной боли»

Тут все просто — вы используете один синтаксис get name()<>, а TypeScript генерирует для вас способ определения таких свойств через стандартный Object.defineProperty. При этом вам доступен и вариант с вычисляемыми именами таких свойств.

Декораторы для всего (ES7)

Это экспериментальный функционал, доступный при включении опции —experimentalDecorators и при компиляции в JS версии не ниже ES5

Декораторы — это синтаксический сахар и паттерн одновременно.

В ранних версиях TS предлагалось использовать аннотации, но от этого отказались в пользу декораторов.

Аннотации — как это было (или могло быть)

Аннотации — это пометки на сущности. Выглядело это примерно вот так (в старых версиях TS и AtScript, откуда это и пришло):

А теперь JavaScript:

То есть к объекту прикреплялось дополнительное свойство __annotations или annotations, которые можно было использовать по своему усмотрению. Вы заметили это «__annotations или annotations»? В этом и скрывалась проблема, различные имплементации допускали разные варианты, что вводило путаницу. Проблема усугублялась еще больше, если существовал внешний код, который мог использовать эти свойства, но не знал, какой именно вариант нужно искать в объекте, если вообще знал, что нужно что-то искать, в итоге применение такого сгенерированного кода в модуле написанном на JS, обрастало условиями проверок вида аннотирования, что не способствовало качеству кода.

Мастер Йода рекомендует:  Как создать интернет-магазин на Shop-Script Легко!


Декораторы

Декораторы в свою очередь «декорируют» объект, оборачивают собой сущность и, если нужно, подменяют её.

Суть проще продемонстрировать на простом примере. Представим класс, который предоставляет доступ к некой админке и кратко выглядит вот так:

Декораторы в этом примере описывают уровни доступа текущего пользователя к конкретным методам класса:
— Метод login доступен гостю, иначе перенаправить на страницу home;
— Метод fetch доступен только авторизованному пользователю;
— Возможность вызвать конец света методом destroyUniverse дана только авторизованному пользователю с правами рут-пользователя.

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

Долго не задерживаясь, давайте посмотрим на имплементацию декоратора guest:

Итак, функция декоратора должна вернуть функцию, которая будет вызвана для объекта декорирования при создании объекта.

В случае декорирования метода класса функция-результат работы генератора декоратора получит прототип объекта, строчное имя метода и описание метода, если оно существует.

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

Возможность ответить на вопрос «Как применять декораторы в реальной практике и зачем они вам нужны?» я оставлю вам. Эта концепция имеет очень мощную основу и может существенно повлиять на архитектуру вашего приложения.

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

Интерфейсы и абстрактные классы

Ни интерфейсов, ни абстрактных классов в JavaScript нет, как и нет разумных аналогов их представления. Потому здесь речь опять про синтаксический сахар.

Приведу сразу объемный пример с комментариями, где я постарался использовать почти все:

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

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

Зачем это нужно? Ну, например, вы можете описать интерфейс требуемого колбека. Если вам в функцию попытаются передать функцию с другим интерфейсом, компилятор предупредит об этом.

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

Generics

Непростой функционал, хоть в базовом случае и работает очень просто. Пример из документации:

Как и в случае с интерфейсами, лучше прочесть главу в документации для полного понимания. Если очень кратко: компилятор подменяет T в декларации класса на number и перезапускает анализ, будто у класса там везде number. Вот и все. Опять же, до JavaScript-кода вся эта магия (как же я старался избегать этого слова) не доходит, все проверяется/сверяется/выводится до трансляции в JS-код.

Компилирование в ES5 или даже в ES3 (с оговорками)

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

Оговорки касаются экспериментальных конструкций вроде декораторов и того, что просто невозможно описать в конкретной версии EcmaScript. Например, ни декораторы, ни set/get для полей класса нельзя описать в стандарте ES3 — просто в этом стандарте нет нужных вызовов в API примитива Object.

Выбор цели компиляции, гарантии, что будут доступны в качестве цели и будущие версии EcmaScript, — это делает TypeScript чуть ли не серебряной пулей. Вы уже можете использовать все то, что придумано нового в синтаксисе JavaScript, использовать проверку типов, декларации интерфейсов, абстрактные классы, декораторы и т.д. И в момент, когда «бизнес решит», что браузеры клиентов уже готовы для ES6 или ES7, вы просто переключите компилятор на другую цель, и генерируемый код обретет новые конструкции, избавится от каких-то подпорок для обратной совместимости. Код потенциально даже может стать быстрее, так как вместо явных обходных путей будет использовать нативное API движка JS.

ES6 в TypeScript

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

Выводы

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

Внесите порядок и структуру в ваш код и . (тут допишите свой вариант рекламного лозунга).

Конечно, компилятор не может защитить вас от архитектурных ошибок. Но может предупредить о возможных несоответствиях между задуманным (интерфейсом) и реализацией (классом, функцией, структурой). Типизация переменных и аргументов поможет быть уверенным, что вы правильно прочитали интерфейс и применяете сущности правильно, а не руководствуетесь лишь своим внутренним чутьем. Декораторы могут существенно повлиять на сам подход к оформлению классов и архитектуры в целом. Шаблоны классов (generics), абстрактные классы, помогут не допустить потерю контроля над архитектурой приложения. Ну и весь прочий синтаксический сахар облегчает жизнь и делает код более выразительным.

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

Что такое TypeScript и почему я должен использовать его вместо JavaScript?

Не могли бы вы описать язык TypeScript?

Что это может сделать, что JavaScript или доступные библиотеки не могут сделать, что даст мне основание считать это?

5 ответов

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

1000 футов.

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

Чтобы получить представление о том, что я имею в виду, посмотрите Microsoft на вводном видео на этом языке.

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

Это с открытым исходным кодом, но вы получаете только умный Intellisense по мере ввода, если используете поддерживаемую среду IDE. Первоначально это была только Microsoft Visual Studio (также отмеченная в блоге от Мигеля де Икаса). В наши дни другие IDE также предлагают поддержку TypeScript.

Есть ли другие технологии?

Там CoffeeScript, но это действительно служит другой цели. IMHO, CoffeeScript обеспечивает читаемость для людей, но TypeScript также обеспечивает глубокую читаемость для инструментов с помощью необязательной статической типизации (см. Это недавнее сообщение в блоге для немного более критического анализа). Там также Dart, но полная замена для JavaScript (хотя он может создавать код JavaScript)

пример

В качестве примера можно привести несколько TypeScript (вы можете играть с этим на игровой площадке TypeScript)

И вот JavaScript, который он произведет

Обратите внимание, как TypeScript определяет тип переменных-членов и параметры метода класса. Это удаляется при переводе на JavaScript, но используется IDE и компилятором для обнаружения ошибок, например, для ввода числового типа в конструктор.

Он также способен вызывать типы, которые явно не объявлены, например, он будет определять, что метод greet() возвращает строку.

Отладка машинописных записей

Многие браузеры и IDE предлагают прямую поддержку отладки через sourcemaps. См. Этот вопрос о переполнении стека для более подробной информации: Отладка кода типа TypeScript с помощью Visual Studio


Хотите узнать больше?

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

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

Отношение к JavaScript

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

JavaScript стандартизирован по стандартам ECMAScript. Старые браузеры не поддерживают все функции новых стандартов ECMAScript (см. Эту таблицу). TypeScript поддерживает новые стандарты ECMAScript и компилирует их (более старые) целевые объекты ECMAScript по вашему выбору (текущие цели — 3, 5 и 6 [aka 2015]). Это означает, что вы можете использовать функции ES2015 и выше, такие как модули, лямбда-функции, классы, оператор распространения и деструктурирование, оставаясь в обратном порядке совместимыми со старыми браузерами.

Поддержка типов не является частью стандарта ECMAScript и, вероятно, никогда не будет связана с интерпретируемым характером, а не скомпилированным характером JavaScript. Типичная система TypeScript невероятно богата и включает в себя: интерфейсы, перечисления, гибридные типы, дженерики, типы объединения/пересечения, модификаторы доступа и многое другое. На официальном сайте TypeScript дается обзор этих функций. Система типов типов сегодня совместима с другим типизированным языком, а в некоторых случаях, возможно, более мощным.

Связь с другими языками ориентации JavaScript

ТипScript имеет уникальную философию по сравнению с другими языками, которые скомпилированы для JavaScript. Код JavaScript действителен; TypeScript — это надмножество JavaScript. Вы можете почти переименовать ваши .js файлы в .ts файлы и начать использовать TypeScript (см. » .ts JavaScript» ниже). Файлы TypeScript скомпилированы на читаемый JavaScript, так что миграция возможна и понимание скомпилированного TypeScript совсем не сложно. TypeScript основывается на успехах JavaScript и улучшает свои недостатки.

С одной стороны, у вас есть инструменты будущего доказательства, которые используют современные стандарты ECMAScript и сводят их к старым версиям JavaScript, причем Babel является самым популярным. С другой стороны, у вас есть языки, которые могут полностью отличаться от JavaScript, которые больше нацелены на JavaScript, такие как Coffeescript, Clojure, Dart, Elm, Haxe, ScalaJs и целый хост (см. Этот список). Эти языки, хотя они могут быть лучше, чем когда-либо будущее JavaScript, могут привести к большему риску не найти достаточного усыновления для обеспечения их будущего. У вас также может быть больше проблем с поиском опытных разработчиков для некоторых из этих языков, хотя те, которые вы найдете, часто могут быть более восторженными. Взаимодействие с JavaScript также может быть немного более сложным, поскольку они удалены от того, что на самом деле является JavaScript.

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

Необязательно статическая типизация и вывод типа

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

ТипScript делает типизацию немного проще и намного менее явной благодаря использованию вывода типа. Например: var x = «hello» в TypeScript совпадает с var x: string = «hello» . Тип просто выведен из его использования. Даже если вы явно не вводите типы, они все еще существуют, чтобы вы не делали то, что в противном случае могло бы привести к ошибке во время выполнения.

По умолчанию используется TypeScript. Например, function divideByTwo(x) < return x/2 >является допустимой функцией в TypeScript, которую можно вызывать с любым параметром, даже если вызов ее со строкой, очевидно, приведет к ошибке выполнения. Так же, как вы привыкли в JavaScript. Это работает, потому что, когда ни один тип не был явно назначен, и тип не может быть выведен, как в примере divideByTwo, TypeScript неявно назначает тип any . Это означает, что знак типа divideByTwo автоматически становится function divideByTwo(x: any): any . Существует флаг компилятора, запрещающий это поведение: —noImplicitAny . Включение этого флага дает вам большую степень безопасности, но также означает, что вам придется делать больше ввода.

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

Интересно отметить, что в этой же работе обнаруживается, что TypeScript менее подвержен ошибкам, чем JavaScript:

Для тех, у кого есть положительные коэффициенты, мы можем ожидать, что язык связан с ceteris paribus, большим количеством исправлений дефектов. Эти языки включают C, C++, JavaScript, Objective-C, Php и Python. Языки Clojure, Haskell, Ruby, Scala и TypeScript имеют отрицательные коэффициенты, подразумевающие, что эти языки менее вероятны, чем среднее, чтобы привести к фиксации дефектов.

Расширенная поддержка IDE

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

Существует широкий спектр IDE, которые отлично поддерживают TypeScript, такие как Visual Studio Code, WebStorm, Atom и Sublime.

Строгие проверки нуля

Ошибки выполнения формы cannot read property ‘x’ of undefined или undefined is not a function , которая обычно вызвана ошибками в коде JavaScript. Вне коробки TypeScript уже уменьшает вероятность возникновения таких ошибок, поскольку нельзя использовать переменную, которая не известна компилятору TypeScript (за исключением свойств any типизированных переменных). По-прежнему возможно, хотя ошибочно использовать переменную, которая установлена на undefined . Тем не менее, в версии 2.0 TypeScript вы можете полностью устранить эти ошибки, используя непустые типы. Это работает следующим образом:

При включении строгих проверок нулевой —strictNullChecks ( —strictNullChecks ) компилятор TypeScript не разрешает undefined назначать переменную, если вы явно не объявляете ее нулевым типом. Например, let x: number = undefined приведет к ошибке компиляции. Это идеально подходит для теории типов, поскольку undefined не является числом. Можно определить x , чтобы быть типом сумма number и undefined , чтобы исправить это: let x: number | undefined = undefined let x: number | undefined = undefined .

Как известно, тип известен как nullable, то есть он имеет тип, который также может иметь значение null или undefined , компилятор TypeScript может определять посредством анализа типа потока на основе потока управления, независимо от того, может ли ваш код безопасно использовать переменную или нет. Другими словами, когда вы проверяете переменную, не undefined через, например, оператор if компилятор TypeScript выводит, что тип в этой ветки потока управления кодом больше не имеет значения NULL, и поэтому его можно безопасно использовать. Вот простой пример:

Во время сборки 2020 года со-дизайнер TypeScript Андерс Хейлсберг дал подробное объяснение и демонстрацию этой функции: видео (с 44:30 до 56:30).

компиляция

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

Компилятор TypeScript может встроить информацию о исходной карте в сгенерированные файлы.js или создать отдельные файлы.map. Информация о исходной карте может быть использована путем отладки утилит, таких как Chrome DevTools и другая среда IDE, чтобы связать строки в JavaScript с теми, которые сгенерировали их в TypeScript. Это позволяет вам устанавливать контрольные точки и проверять переменные во время выполнения непосредственно на вашем коде TypeScript. Информация о исходной карте работает очень хорошо, она была задолго до TypeScript, но отладка TypeScript, как правило, не так велика, как при непосредственном использовании JavaScript. Возьмите this ключевое слово, например. Из-за измененной семантики this ключевого слова вокруг замыканий с ES2015 this может существовать во время выполнения как переменная с именем _this (см. Этот ответ). Это может запутать вас во время отладки, но, как правило, это не проблема, если вы знаете об этом или проверяете код JavaScript. Следует отметить, что Вавилон страдает от такой же проблемы.

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

Существуют плагины компиляции TypeScript, доступные для Webpack, Gulp, Grunt и почти любой другой инструмент для сборки JavaScript. Документация TypeScript содержит раздел по интеграции с инструментами построения, охватывающий их все. ЛИНТЕР также доступен, если вы хотите еще больше проверки времени сборки. Существует также большое количество проектов семян, которые помогут вам начать с TypeScript в сочетании с множеством других технологий, таких как Angular 2, React, Ember, SystemJs, WebPack, Gulp и т.д.

Совместимость JavaScript

Поскольку TypeScript так тесно связан с JavaScript, он обладает большими возможностями взаимодействия, но для работы с библиотеками JavaScript в TypeScript требуется дополнительная работа. Определения _.groupBy необходимы, чтобы компилятор TypeScript понимал, что вызовы функций, такие как _.groupBy или angular.copy или $.fadeOut , на самом деле не являются незаконными утверждениями. Определения для этих функций помещаются в файлы .d.ts .

Простейшая форма, которую может принять определение, — это позволить использовать идентификатор любым способом. Например, при использовании Lodash один файл определения строки declare var _: any позволит вам вызвать любую функцию, которую вы хотите на _ , но тогда, конечно, вы также можете ошибаться: _.foobar() будет юридический вызов TypeScript, но, конечно, это незаконный вызов во время выполнения. Если вам нужна правильная поддержка типов и завершение кода, ваш файл определения должен быть более точным (см. Определения lodash для примера).

Модули Npm, которые поставляются предварительно с их собственными определениями типов, автоматически понимаются компилятором TypeScript (см. Документацию). Для почти любой другой полупопулярной библиотеки JavaScript, которая не содержит собственных определений, кто-то там уже сделал определения типов доступными через другой модуль npm. Эти модули имеют префикс «@types/» и поступают из репозитория Github, называемого DefinitelyTyped.

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

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

Преобразование из JavaScript в TypeScript

Любой файл .js можно переименовать в .ts и .ts через компилятор TypeScript, чтобы получить синтаксически тот же код JavaScript, что и вывод (если он был синтаксически правильным в первую очередь). Даже когда компилятор TypeScript получает ошибки компиляции, он все равно будет создавать файл .js . Он может даже принимать файлы .js качестве входных данных с флагом —allowJs . Это позволяет сразу начать с TypeScript. К сожалению, ошибки компиляции могут возникнуть в начале. Нужно помнить, что это не ошибки остановки шоу, как вы можете использовать с другими компиляторами.

Ошибки компиляции, получаемые в начале, когда преобразование проекта JavaScript в проект типа TypeScript неизбежны по характеру TypeScript. TypeScript проверяет весь код на достоверность и, следовательно, ему нужно знать обо всех используемых функциях и переменных. Таким образом, определения типов должны быть установлены для всех из них, иначе ошибки компиляции должны произойти. Как уже упоминалось в главе выше, для почти любой инфраструктуры JavaScript существуют файлы .d.ts которые можно легко получить при установке пакетов DefinitelyTyped. Однако может случиться так, что вы использовали некоторую неясную библиотеку, для которой нет определений типа TypeScript, или что вы заполняете некоторые примитивы JavaScript. В этом случае вы должны указать определения типов для этих битов, чтобы ошибки компиляции исчезли. Просто создайте файл .d.ts и .d.ts его в массив files tsconfig.json, чтобы он всегда учитывался компилятором TypeScript. В нем объявляются те биты, которые TypeScript не знает о типе any . Как только вы устраните все ошибки, вы можете постепенно вводить текст в эти части в соответствии с вашими потребностями.

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

Наибольшим препятствием является кривая обучения. Я рекомендую вам сначала поиграть с небольшим проектом. Посмотрите, как он работает, как он создается, какие файлы он использует, как он настроен, как он функционирует в вашей среде разработки, как он структурирован, какие инструменты он использует и т.д. Преобразование большой базы JavaScript JavaScript в TypeScript выполнимо, когда вы знаете что ты делаешь. Прочтите этот блог, например, о преобразовании строк 600k в машинопись за 72 часа). Просто убедитесь, что вы хорошо понимаете язык, прежде чем совершать прыжок.

Принятие

ТипScript является открытым исходным кодом (лицензия Apache 2, см. Github) и поддерживается Microsoft. Андерс Хейлсберг, ведущий архитектор С#, возглавляет проект. Это очень активный проект; команда TypeScript выпустила много новых функций за последние несколько лет, и многие из них все еще планируются (см. дорожную карту).

В опросе разработчиков StackOverflow 2020 года TypeScript был самым популярным транспилером JavaScript (9-е место в целом) и занял третье место в самой любимой категории языков программирования.

Мастер Йода рекомендует:  Всё, что вам нужно знать о Fall Creators Update — следующем крупном обновлении Windows 10

Почему вам стоит использовать TypeScript

Если вы еще не в курсе: JavaScript победил. На сегодняшний день это самый кроссплатформенный язык, доступный для любых устройств. На нем можно создавать веб-приложения (клиент и сервер), в том числе с оффлайн-режимом работы, десктопные приложения (для Windows 8), приложения для смартфонов и планшетов (PhoneGap), расширения для Microsoft Office, SharePoint и Dynamics. Код на JavaScript работает в СУБД, таких как MongoDB и даже Hadoop в Windows Azure (BigData однако).

На Javascript уже написаны Doom и эмулятор Linux. Фактически решая любую задачу, кроме написания модуля ядра ОС, вы встретитесь с JavaScript. Если вы еще не знаете JavaScript, то вам следует срочно начать его изучать.

У JavaScript много недостатков

Многие разработчики испытывают такую реакцию на JavaScript:


Большую часть людей пугает отсутствие intellisense при наборе кода и манипуляции с HTML\CSS. Но это не самые большие проблемы.

Самая большая проблема JavaScript в том, что его придумал не Microsoft.

Основные недостатки JavaScript:

  • Динамическая типизация, которая вызывает множество регрессионных ошибок.
  • Отсутствие модульности. Нет ни модулей, ни классов, прототипное ООП рвет мозг тем, кто пишет на C++\Java\C#.
  • Неочевидное поведение во многих местах.

Для того чтобы не писать JavaScript были созданы компиляторы Java –> JavaScript, C# –> JavaScript, LLVM –> JavaScript. Но все это приводит к тому, что на программу на исходном языке накладываются существенные ограничения, а также существующие библиотеки для JavaScript не используются.

TypeScript исправляет часть недостатков

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

Так и появился язык TypeScript (ссылка на оффсайт). TypeScript является надмножеством JavaScript. То есть любой корректный код на JavaScript также является корректным кодом на TypeScript.

TypeScript использует статическую типизацию, то есть все типы проверяются при компиляции. Кстати сам компилятор TypeScript написан на TypeScript и является open source (ссылка на репозитарий).

TypeScript добавляет возможность объявлять модули, классы и интерфейсы. Это позволяет масштабировать разработку сложных JavaScript приложений.

На выходе получается обычный JavaScript, который не требует дополнительных библиотек или специальных компонентов.

TypeScript в действии

При наборе кода в VisualStudio доступна богатая подсказка:

Поддерживаются классы, аннотации и вывод типов, работает интерактивная отладка.

С легкостью можно использовать в TypeScript внешние библиотеки, например jquery:

При несовпадении типов компилятор ругается:

Компиляция TypeScript происходит при сборке проекта, проверяя многие ошибки без запуска.

Ну и самая главная фича, от вида которой я чуть не расплакался:

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

Как начать использовать TypeScript

Если вы используете VisualStudio, то вам необходимо поставить два расширения:

Тогда у вас появится вот такой режим редактирования:

Слева код на TypeScript, справа результат компиляции на JavaScript. Таким образом использование TypeScript поможет вам лучше понять и изучить JavaScript.

Тем, кто не использует visual studio, повезло чуть меньше. На сегодня доступны плагины для распространенных текстовых редакторов, а также инструменты командной строки.

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

Множество определений типов для популярных библиотек можно найти в проекте DefinitelyTyped . Судя по нику автора проекта это наш соотечественник.

Заключение

Это была вводная статья. В следующий раз больше примеров и реальное применение TypeScript.

Изучаем TypeScript за 30 минут

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

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

JavaScript довольно неплохой язык программирования и вы можете задаться вопросом: «Действительно ли мне нужен TypeScript»? Технически, вам не нужно изучать его, чтобы быть хорошим разработчиком. Тем не менее, работа с TypeScript имеет свои преимущества:

  • Благодаря статической типизации код, написанный в TypeScript более предсказуем и, как правило, легче в отладке.
  • Упрощает организацию базового кода для очень больших и сложных программ благодаря модулям, пространствам имен и мощной поддержке ООП.
  • Компиляция в TypeScript включает в себя этап перехода к JavaScript, который обнаруживает все ошибки до того, как код, их содержащий, выполнится.
  • Фреймворк Angular 2 написан на TypeScript и рекомендуется разработчикам к использованию в их проектах.

Последний пункт является самым важным. Angular 2 — один из наиболее популярных на сегодняшний день фреймворков и хотя разработчики при работе с ним могут использовать обычный JavaScript, большинство учебников и примеров написаны на TS. Angular 2 расширяет свое сообщество и, естественно, что все больше и больше людей будет изучать TypeScript.

Рост популярности TypeScript, данные из Google Trends

Установка TypeScript

Для работы нам потребуется Node.js и npm для этого урока. С помощью команды ниже мы можем установить пакет TypeScript на глобальном уровне, что делает компилятор TS доступным во всех наших проектах:

Попробуйте открыть терминал в любом месте и наберите tsc -v чтобы убедиться, что npm правильно установлено.

Текстовые редакторы с поддержкой TypeScript

TypeScript — проект с открытым исходным кодом, но разработан корпорацией Microsoft и изначально поддерживался лишь в платформе Visual Studio. В настоящее время существует масса текстовых редакторов и IDE, которые либо изначально, либо через плагины предлагают поддержку синтаксиса TypeScript, предложения автозаполнения, перехват ошибок и даже встроенные в компиляторы.

  • Visual Studio Code – легкий, с открытым исходным кодом редактор от Microsoft со встроенной поддержкой TypeScript.
  • Плагин для редактора Sublime Text .
  • Последняя версия WebStorm обладает встроенной поддержкой TypeScript.
  • Прочие , включая Vim, Atom, Emacs.

Компиляция TypeScript в JavaScript

TypeScript записывается в .ts файлы (или .tsx для JSX), которые не могут быть использованы непосредственно в браузере и должны быть переведены в vanilla .js. Этот процесс компиляции может быть сделан следующими способами:

  • В терминале, используя ранее упомянутый инструмент командной строки tsc .
  • Непосредственно в Visual Studio, IDE и других текстовых редакторах.
  • Используя автоматизированные таск раннеры, например gulp.

Первый способ нам показался самым простым, поэтому мы и будем использовать его в нашем уроке. Команда, представленная ниже, принимает TypeScript-файл по имени main.ts и переводит его в JavaScript-версию: main.js . Если main.js существует, — он будет перезаписан.

Мы также можем собрать несколько файлов одновременно, перечислив все из них, или применив символы подстановки:


Мы можем также использовать опцию —watch , чтобы автоматически скомпилировать TypeScript-файл, когда сделаны изменения:

Более продвинутые пользователи могут также создавать файл конфигурации tsconfig.json, состоящий из различных параметров сборки. Файл конфигурации очень удобен при работе над крупными проектами с большим количеством .ts-файлов так как он несколько автоматизирует процесс. Подробнее о файле конфигурации можно узнать в документации по tsconfig.json .

Статическая типизация

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

Поскольку TypeScript компилируется в JavaScript, который не имеет ни малейшего представления о типах данных, они будут полностью удалены:

Однако, если мы попробуем сделать что-то неправильное, попытка компиляции tsc выдаст предупреждение об ошибке в коде. Например:

main.ts(1,5): error TS2322: Тип ‘Строка’ не может быть назначен для типа ‘Логическое значение’.

Он также предупреждает нас, если мы передаем неправильный аргумент функции:

main.ts(5,30): error TS2345: Argument of type ‘string’ is not assignable to parameter of type ‘number’. (ошибка TS2345: Аргумент типа ‘string’ не может быть присвоен параметру типа ‘number’.)

Вот некоторые из наиболее часто используемых типов данных:

  • Number – Любые числовые значения представлены числовым типом. И нет никаких отдельных определений для целочисленных, дробных и прочих переменных.
  • String – строки, таклй же текстовый тип как и в JavaScript, может быть окружен ‘ (одинарные кавычки), или » (двойные кавычки).
  • Boolean – логическое значение true , или false . Использование 0 , или 1 вызовет ошибку компиляции.
  • Any – · Any – Такая переменная может иметь такой тип, как String, Number, или что-либо другое.
  • Arrays – массивы, имеют два возможных синтаксиса: my_arr: number[]; , или my_arr: Array .
  • Void – Используется для функций, которые ничего не возвращают.

Чтобы увидеть список всех доступных типов, перейдите на официальную документацию по TypeScript .

Интерфейсы

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

В приведенном ниже примере мы определяем простой интерфейс, который проверит аргументы функции:

Порядок свойств НЕ ИМЕЕТ значения, нужно лишь, чтобы они были верного типа. Если что-то отсутствует, имеет неправильный тип, или называется по-другому, — компилятор предупредит нас.

main.ts(16,7): error TS2345: Argument of type ‘ < nmae: string; calories: number; >is not assignable to parameter of type ‘Food’. Property ‘name’ is missing in type ‘< nmae: string; calories: number; >‘. ошибка TS2345: Аргумент типа ‘ < nmae: строка; calories: число; >не может быть присвоен параметру типа ‘Food’. Свойство ‘name’ не найдено в типе ‘< nmae: string; calories: number; >‘.

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

Классы

При создании крупномасштабных приложений, объектно-ориентированный стиль программирования является предпочтительным для многими разработчиков, особенно в таких языках, как Java или C#. TypeScript предлагает систему классов, которая очень похожа на ту, что используется в этих языках, в том числе наследование, абстрактные классы, реализации интерфейса, сеттеры/геттеры и многое другое.

Также стоит отметить, что с последнего обновления JavaScript (ECMAScript 2015), классы являются родными для vanilla JS и могут быть использована без TypeScript. Две эти реализации очень похожи, но имеют некоторые отличия.

Продолжая тему еды напишем простой класс на TypeScript:

Тот, кто работал с Java или C# заметит, что синтаксисы довольно похожи. То же самое касается наследования:

Для получения более подробной информации советуем вам изучить документацию по классам в TS .

Generics

Generics – это шаблоны, позволяющие одной и той же функции принимать аргументы разных типов. Лучше создавать компоненты в Generics, чем использовать тип данных any т.к. Generics сохраняет типы переменных, проходящих через него.

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

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

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

Модули в TypeScript

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

TypeScript вводит синтаксис для экспорта и импорта модулей, но но не может обрабатывать связи между файлами. Для подключения внешних модулей TS полагается на сторонние библиотеки: require.js для браузерных приложений и CommonJS для Node.js. Давайте рассмотрим простой пример TypeScript-модулей с require.js:

У нас будет два файла. Один экспортирует функцию, а другой импортирует и вызывает ее.

exporter.ts
importer.ts

Теперь нам нужно скачать require.js и подключить его через тег script. Последний шаг состоит в компиляции двух файлов .ts. Необходимо добавить дополнительный параметр, чтобы TypeScript знал, что мы создаем модули для require.js (называемый также AMD), в отличие от CommonJS.

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

Сторонние объявляющие файлы

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

Объявляющие файлы TypeScript обычно набираются вручную, но высока вероятность того, что нужная вам библиотека имеет файл с расширением .d.ts., созданный кем-то другим. DefinitelyTyped самое большое публичное хранилище файлов для различных библиотек. Существует также популярный Node.js-модуль для управления определениями TypeScript, которые называются Typings .

Если вам все еще нужно написать declaration file самостоятельно, то это руководство поможет вам начать работу.

Заключение

Мы надеемся, что вам понравился этот урок! Изучайте TypeScript и устраивайтесь на более высокооплачиваемую работу!

Чем отличается JavaScript от ES6 и EC2015?

Собственно, вопрос: чем отличается JavaScript от ES6, EC2015 и TypeScript? Никто мне толком не может ответить по существу. Зачем для Angular 2 мне нужен именно TS?

2 ответа 2

JavaScript от ES6 и ES2015 ничем не отличается.

JavaScript — это исторически сложившиеся название языка программирования.

ES — ECMAScript — Это спецификация JavaScript, в которой описано как этот язык должен работать.


ES5, ES6 — Это версии этой спецификации.

ES2015 — Это второе название ES6, начиная с этой версии каждое следующая спецификация будет включать в себя год в котором сделана.

TS — TypeScript — Это язык на основе JS расширяющий его возможности. Работает как SCSS.

Для Angular 2 выбрали TypeScript как раз из за его возможностей. Сам Angular2 написан на TypeScript. Приложения на Angular 2 можно писать и на ES6 и на ES5, но стандартный Туториал написан на TS.

JavaScript vs CoffeeScript vs TypeScript

JavaScript

JavaScript is a dynamic, advanced level interpreted programming language. It is one of the three core technologies of the World Wide Web alongside HTML and CSS. The majority of websites employ it and it is supported by all modern Web browsers.

JavaScript is prototype-based with first-class functions, making it a multi-purpose tool, supporting functional and object-oriented programming styles. It includes an API for working with arrays, expressions and texts, but does not have any I/O support, like storage, media, networking and graphics facilities. For these, it has to rely on the host environment but there are frameworks like Node.js to leverage all advantage of javascript.

JavaScript is also used in applications that are not entirely web-based, like desktop widgets, website-specific browsers, and PDF documents. It also plays an important part in game development, desktop/mobile applications, and server-side network programming.

JavaScript development has got even better with the advent of various new frameworks. For server-side web development, one can use a multitude of languages and frameworks, but for client-side programming, JavaScript is the sole option as it is supported by all browsers.

To overcome this problem, newer languages were developed that can compile down to JavaScript. These new languages offer new concepts and improved syntax while hiding the complex bits of JavaScript. They can offer good ways to write and manage large code, while automatically generating more ‘correct’ JavaScript as an alternative.

Why Javascript is so popular on the server-side too? Because, thanks to Google, it can be run by an ultrafast ES6 compiler that provides high speed comparing to other interpreted languages like Ruby, Python.

Advantages of Javascript

  • JavaScript is comparatively easy to learn and execute. Being client-side decreases the request on the main website server.
  • JavaScript is applied everywhere on the internet. The sources to study JavaScript are diverse. Various repositories have several projects that are utilizing Javascript and obtained a lot of flexibility in the business in recent years particularly.
  • JavaScript works accurately with other programming languages and can be applied in a tremendous diversity of applications. Unlike other scripting languages like PHP, JavaScript can be embedded into any web page despite the file extension.

Disadvantages of Javascript

  • The client-side security sometimes too difficult to manage in Javascript. Because the code runs on the users’ machine, in some instances it can be misused for malicious intentions. This is one end some people prefer to incapacitate Javascript.
  • JavaScript is seldom defined separately by various browsers. Whereas server-side codes will invariably provide the identical output, client-side codes can be a little irregular.

CoffeeScript

CoffeeScript is one of these languages and a popular one. Its syntax is kind of similar to JavaScript but has a lot of changes for the sake of cleaner, more concise code. It’s comparatively easy to read and becomes more easy to learn after some good effort.

Coffeescript is a clean little language type that nicely compiles into JavaScript. Underneath those lame complex ‘braces and semicolons’ composed structure, JavaScript has always had a classic object model at its heart. Coffeescript is an attempt to expose the good and bad parts of JavaScript in a simple easier way.

The classic rule of Coffeescript is: ‘It’s just a plain JavaScript’. The Coffeescript code compiles one by one into the equivalent JavaScript, and there is no interpretation at the runtime. The final compiled output is readable and nicely printed, passes through JavaScript without warnings, will work in every other JavaScript application or usage, and aims to run as fast or much faster than the plain equivalent handwritten JavaScript.

Aside from syntax, there are also some other features and improvisations in the Coffeescript. Like variable scoping is improved, there’s no need to actually declare variables, just use desired variables and they are declared for you in the output.

Advantages of Coffeescript

  • Coffeescript code is about 55% less than the Javascript for the equivalent functionality. That’s fewer cases programmers have to type and verify.
  • Coffeescript employs more limited syntax and hence is arguably simpler to manage in a big project. It also allows more syntax measures and thus various programmers on the same project design their code much more similar.

Disadvantages of Coffeescript

  • While you master the functions of CoffeeScript rather quickly, there are a lot of deceived time sinks compared to JavaScript such as sometimes it is difficult to compile.
  • CoffeeScript has become very successful in a small amount of time, but it’s doubtful that it’ll ever have as large society as JavaScript.
  • The syntax mistakes the CoffeeScript compiler gives are often problematic.
  • Some of the section logic doesn’t quite work as required, you have to study the underlying javascript code to understand the completely mysterious code.

TypeScript

Typescript is a newer contender, developed by Microsoft and made to have first-class citizen support in Visual Studio including Intelligence and on-the-fly compiler errors. TypeScript differs from Coffeescript in a way that it’s just a complete superset of JavaScript. All JavaScript code is a totally valid TypeScript code.

TypeScript provides a lot of help for generating better JavaScript, such as a natural syntax for defining classes. TypeScript has one major benefit which is the optional support for static type checking, which makes it a lot easier to interface with the external JavaScript libraries either without type checking or with a typed interface definition that you create.

TypeScript integrates well with all the existing JavaScript code and it’s easy to understand even if u know a little bit of JavaScript and C. Another point why to choose TypeScript is that someday today’s TypeScript will be standard JavaScript and therefore run in the browser.

TypeScript allows you to create today’s web applications with language features of tomorrow. TypeScript is the only one that is a very strict superset of JavaScript. This means that any type of valid JavaScript code is also good for TypeScript, and surely compatible with existing libraries without any problem.

This nice compatibility, however, has some issues as well. As a superset, TypeScript cannot make up for any of the JavaScript’s ugly complex sides. So, all the pitfalls of the JavaScript are there lurking, waiting for you to make a mistake. In the TypeScript, the static typing and Visual Studio plugins do a lot to alleviate these problems, though.

TypeScript usually supports all the definition files that contain method information of existing JavaScript libraries, much like C/C++ header files that explain the structures of previous object files. This enables other programs to use all the values defined in the files as if they were TypeScript entities which are statically typed.

TypeScript is obviously a forward step at what JavaScript may be in a few years’ time. The addition of, classes, modules, a type system and an IDE that takes full use of these features makes it a very tempting choice over plain JavaScript.

Overall, TypeScript is relatively much closer to JavaScript than Coffeescript, making it easier to learn as well as the generated output is closer to the input in its case.

Advantages of TypeScript

  • The main advantage of Typescript is that it gives the facility to combine static types to the Javascript.
  • Typescript combines the traditional with the new in the most reliable way possible. You can apply more extra features from ES6, ES7, and the compiler will transform them into ES5.
  • It is easier than Javascript.

Disadvantages of TypeScript

  • TypeScript works type checks only through compilation. Ultimately, you are trading with simple JavaScript that doesn’t make that. This suggests you may still find some flaws that the compiler didn’t get.
  • The most prominent disadvantage of TypeScript is that it can give you a fake sense of security.

It comes with a complicated typing system .

CoffeeScript or TypeScript?

There’s a good case for both of them, and if someone didn’t mind the odd maintenance and mental torture, he could actually use both of them on the same project. Since both compile to JavaScript, one can easily use any code written in the other language.

Following are some recommendations:

  1. For static type checking and a good toolchain support on Visual Studio, TypeScript is the option.
  2. For a quick and short learning curve from JavaScript or a need to add legacy code (which isn’t common since it can easily be used as old JavaScript without modification), choose TypeScript.
  3. If someone wants a more concise, cleaner code and lots of syntactic sugar, choose Coffeescript.
  4. If coming from Ruby or Python, Coffeescript is likely to be a good option, as it’s a closer mental match.

Summary

Coffeescript:

  • Small, clear language with lots of code examples.
  • Effective after learning the basics.
  • Good working tools provided.

TypeScript:

  • Developed by Microsoft (yes, some developers may consider this as a disadvantage)
  • Each part of JavaScript code is valid TypeScript and therefore it integrates much better than the other languages.
  • Compatible with next-gen JavaScript standards.
  • Compiled JavaScript runs on server (node.js).
  • Similar syntax as in C/C++.

When JavaScript was formed then JavaScript community launched JavaScript as client-side programming language. But when coders were applying JavaScript then developers found that JavaScript can be applied as a server-side script also.

But When JavaScript was developing then the code of JavaScript turned difficult and complicated. Due to this, JavaScript was even not capable to complete the condition of Object-oriented language. This restricts JavaScript from working at the company level as a server-side tool. Then TypeScript was produced by the community to fill this gap.

Добавить комментарий