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

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

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

5 ответов


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

1000ft вид...

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

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

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

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

есть ли другие технологии, как это?

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

пример

в качестве примера, вот некоторые TypeScript (вы можете играть с этим в TypeScript Playground)

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() метод возвращает строку.

Отладка Typescript

многие браузеры и IDEs предлагают прямую поддержку отладки через sourcemaps. Видите эту стопку Переполнение вопрос для более подробной информации:отладка кода TypeScript с помощью Visual Studio

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

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


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

отношение к JavaScript

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

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

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

отношение к другим языкам таргетинга JavaScript

TypeScript имеет уникальную философию по сравнению с другими языками, которые компилируются на JavaScript. Код JavaScript является допустимым кодом TypeScript; TypeScript является надмножеством JavaScript. Вы можете почти переименовать свой .js файлы .ts файлы и начать пользоваться TypeScript (см. "взаимодействие 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. Ошибки, вызванные ложными предположениями о том, что какая-то переменная имеет определенный тип, могут быть полностью устранены, если вы правильно играете в карты (насколько строго вы вводите свой код или если вы наберете свой код вообще, это зависит от вас).

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

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

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

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

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

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

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

существует широкий спектр IDEs, которые имеют отличную поддержку для 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 вы можете устранить эти виды ошибок все вместе за счет использования ненулевых типов. Это работает как следует:

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

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

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.

во время конференции build 2016 co-designer of TypeScript Anders Hejlsberg дал подробное объяснение и демонстрацию этой функции:видео (с 44:30 до 56:30).

сборник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

принятие

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

на 2017 StackOverflow Developer survey TypeScript был самым популярным транспилером JavaScript (9-е место в целом) и занял третье место в категории самых любимых языков программирования.


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

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


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

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

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


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

* TypeScript is Types - > означает, что мы должны определить тип данных каждого свойства и методов. Если вы знаете C#, то Typescript легко понять.

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