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

1268

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

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

  • 8
    Проверьте этот блог: blogs.msdn.com/b/somasegar/archive/2012/10/01/…
  • 0
    Вот некоторые мысли по этому поводу : blog.priceandcost.com/development/…
Показать ещё 5 комментариев

5 ответов

1013
Лучший ответ

Я изначально написал этот ответ, когда 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)

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

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

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

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

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

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

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

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

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

  • 0
    не забудьте livescript.net
  • 0
    @PaulDixon Это звучит так, как будто TypeScript обеспечивает удобочитаемость для людей и инструментов при сравнении с CoffeeScript. Учитывая, что TypeScript только добавляет концепцию «класса» или «модуля», а не, например, красивое зацикливание массива, деструктурирование присваивания, я думаю, что CS справился с этим.
Показать ещё 31 комментарий
738

Хотя принятый ответ в порядке, я чувствовал, что на самом деле это не делает справедливость 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, и поэтому его можно безопасно использовать. Вот простой пример:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

Во время сборки 2016 года со-дизайнер 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 2017 года TypeScript был самым популярным транспилером JavaScript (9-е место в целом) и занял третье место в самой любимой категории языков программирования.

  • 0
    Моя единственная неприятность с TS - это сообщение о спартанской ошибке по сравнению с типом потока FB
  • 15
    «Код JavaScript является допустимым кодом TypeScript» - на самом деле это не всегда так. Я имею в виду код вроде if (1 === '1') {} выдает ошибку в TS, а в JS - нет. Но большую часть времени, если код JS написан хорошо, это правда.
Показать ещё 7 комментариев
57

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

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

  • 12
    Каким-то образом это помогло мне понять лучше, чем любой из ответов с большим количеством голосов. Я думаю, мне просто нужен ответ TL; DR, ELI5.
  • 2
    Лучший TL; DR - страница TS: «TypeScript - это типизированный расширенный набор JavaScript, который компилируется в простой JavaScript».
Показать ещё 2 комментария
34

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

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

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

  • 7
    что такое SDLC? AMD?
  • 13
    @ Oooogi, SDLC == Жизненный цикл разработки программного обеспечения. AMD == Определение асинхронного модуля. Последний характерен для JavaScript, в то время как первый является довольно общим по своему охвату.
Показать ещё 1 комментарий
9

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

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

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

  • 2
    Не каждый год приятель! .. они изменили спецификацию после очень долгого ожидания
  • 0
    ... и эти изменения вы можете соотнести с тем, как Microsoft в этом разбирается. ;-)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню