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

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

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

1000-футовый вид ...

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

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

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

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

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

Есть CoffeeScript , но он действительно служит другой цели. ИМХО, 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()метод, возвращающий строку.

Отладка TypeScript

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

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

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

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

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

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

Компилятор 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 есть раздел по интеграции со средствами сборки, охватывающий их все. ЛИНТЕР также доступен в случае , если вы хотели бы еще больше времени сборки проверки. Существует также множество начальных проектов, которые помогут вам начать работу с TypeScript в сочетании с рядом других технологий, таких как Angular 2, React, Ember, SystemJS, Webpack, Gulp и т. Д.

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

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

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

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

Есть одно предостережение: определения типов должны соответствовать версии библиотеки, которую вы используете во время выполнения. Если этого не произойдет, 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файл и включите его в filesмассив tsconfig.json , чтобы он всегда учитывался компилятором TypeScript. В нем объявляются те биты, о которых TypeScript не знает как о типе any. После того, как вы устранили все ошибки, вы можете постепенно вводить ввод в эти части в соответствии с вашими потребностями.

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

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

Принятие

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

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

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

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

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

« Основы TypeScript » - видеокурс Pluralsight Дана Уолина и Джона Папы, который в настоящее время (25 марта 2016 г.) обновлен и отражает TypeScript 1.8, введение в Typescript.

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

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

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

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

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