Вопрос: Что такое TypeScript и зачем использовать его вместо JavaScript? [закрыто]


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

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


1224


источник


Ответы:


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

1000 футов ...

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

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

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

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

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

Там в CoffeeScript , но это действительно служит другой цели. IMHO, CoffeeScript обеспечивает читаемость для людей, но TypeScript также обеспечивает глубокую читаемость для инструменты через его необязательную статическую типизацию (см. последнее сообщение в блоге для еще большей критики). Есть также дротик но это полная замена для 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 был все еще горячим. Проверять, выписываться Ответ Лодвейка на этот вопрос для более подробной информации.


991



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

Отношение к JavaScript

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

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

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

Тип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 и Машинопись ,   все имеют отрицательные коэффициенты, подразумевающие, что эти языки меньше   скорее всего, чем средний результат, связанный с фиксацией дефекта.

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

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

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

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

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

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

Как известно, тип является нулевым, то есть он имеет тип, который также может иметь значение 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 Anders Hejlsberg дал подробное объяснение и демонстрацию этой функции: видео (с 44:30 до 56:30).

компиляция

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

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

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

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

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

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

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

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

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

Принятие

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

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


691



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

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


50



" Основы TypeScript »- видео-курс Pluradesight Дэн Вахлин а также Джон Папа в настоящее время (25 марта 2016 года) обновлен, чтобы отразить TypeScript 1.8, введение в TypScript.

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

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


30



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


7