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

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

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

Ответы

Ответ 1

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

Ответ 2

Отношение TypeScript к JavaScript

TypeScript - это типизированный расширенный набор JavaScript, который компилируется в обычный JavaScript - typescriptlang.org.

JavaScript - это язык программирования, разработанный Техническим комитетом EMCA 39, который представляет собой группу людей, состоящую из множества различных заинтересованных сторон. TC39 - это комитет, организованный ECMA: внутренней организацией по стандартам. JavaScript имеет много разных реализаций от разных поставщиков (например, Google, Microsoft, Oracle и т.д.). Цель JavaScript - быть языком общения в Интернете.

TypeScript - это расширенная версия языка JavaScript, которая имеет один компилятор с открытым исходным кодом и разрабатывается главным образом одним поставщиком: Microsoft. Цель TypeScript - помочь выявить ошибки на ранних этапах через систему типов и повысить эффективность разработки JavaScript.

По сути, TypeScript достигает своих целей тремя способами:

  1. Поддержка современных функций JavaScript. Язык JavaScript (а не среда выполнения) стандартизирован с помощью стандартов ECMAScript. Не все браузеры и среды выполнения JavaScript поддерживают все функции всех стандартов ECMAScript (см. этот обзор). TypeScript позволяет использовать многие из новейших функций ECMAScript и переводит их в старые целевые объекты ECMAScript по вашему выбору (см. список целей компиляции в параметре компилятора --target). Это означает, что вы можете безопасно использовать новые функции, такие как модули, лямбда-функции, классы, оператор распространения и деструктурирование, оставаясь при этом обратно совместимыми со старыми браузерами и средами исполнения JavaScript.

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

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

Соотношение 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, Scala.js и многие другие (см. этот список). Эти языки, хотя они и могут быть лучше, чем те, которые может когда-либо вести будущее 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 } является допустимой функцией в TypeScript, которую можно вызывать с любым параметром, даже если вызов ее со строкой, очевидно, приведет к ошибке времени выполнения. Так же, как вы привыкли в JavaScript. Это работает, потому что, когда ни один тип не был явно назначен и тип не может быть выведен, как в примере divByTwo, TypeScript будет неявно назначать тип any. Это означает, что сигнатура типа функции divByTwo автоматически становится function divideByTwo(x : any) : any. Существует флаг компилятора, запрещающий такое поведение: --noImplicitAny. Включение этого флага дает вам большую степень безопасности, но также означает, что вам придется больше печатать.

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

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

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

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

Опыт разработки с использованием TypeScript является большим улучшением по сравнению с JavaScript. IDE информируется в режиме реального времени компилятором TypeScript о своей расширенной информации о типах. Это дает пару основных преимуществ. Например, с помощью TypeScript вы можете безопасно выполнять рефакторинги, такие как переименования, по всей вашей кодовой базе. Через завершение кода вы можете получить встроенную справку по любым функциям, которые может предложить библиотека. Больше не нужно помнить их или искать их в онлайн-ссылках. Об ошибках компиляции сообщается непосредственно в IDE красной волнистой линией, когда вы заняты кодированием. В целом, это позволяет значительно повысить производительность по сравнению с работой с 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) компилятор TypeScript не разрешит присваивать переменную undefined, если вы явно не объявите, что она имеет тип NULL. Например, 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 Андерс Хейлсберг подробно рассказал и продемонстрировал эту функцию: video (с 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. Однако вам, скорее всего, потребуется компоновщик, кроме компилятора Typescript. Например, если вы хотите сжать код, для этого вам потребуется добавить другие инструменты в процесс сборки.

Существуют подключаемые модули компиляции TypeScript для Webpack, Gulp, Grunt и практически любого другого инструмента сборки JavaScript. В документации по TypeScript есть раздел, посвященный интеграции со средствами сборки и охватывающий их все. linter также доступен на тот случай, если вы захотите еще больше проверить время сборки. Существует также множество начальных проектов, которые помогут вам начать работу с TypeScript в сочетании с рядом других технологий, таких как Angular 2, React, Ember, SystemJS, Webpack, Gulp и т.д.

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

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

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

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

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

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

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

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

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

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

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

Принятие

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

Некоторые факты об усыновлении и популярности:

  • В опросе разработчиков Qaru 2017 года TypeScript был самым популярным транспортом JavaScript (9-е место в целом) и занял третье место в категории самых популярных языков программирования.
  • В опросе о состоянии js в 2018 году TypeScript был объявлен одним из двух главных победителей в категории разновидностей JavaScript (другой - ES6).
  • В опросе StackOverlow 2019 года TypeScript поднялся на 9-е место по популярности среди профессиональных разработчиков, обогнав как C, так и C++. Он снова занял третье место среди самых любимых языков.

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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