Стандарт ECMAScript и назначение TypeScript
TypeScript – это язык и коллекция инструментов для генерации JavaScript. Вместо того, чтобы требовать совершенно новую среду выполнения, созданный с помощью TypeScript JavaScript может повторно использовать все доступные инструменты JavaScript, фреймворки и множество библиотек, доступных для JavaScript. Однако язык и компилятор TypeScript приближают разработку JavaScript к более традиционному объектно-ориентированному опыту.
JavaScript как язык существует уже давно. Первоначально разработанный как язык для поддержки HTML в одном веб-браузере, он вдохновил множество клонов языка, каждый со своими реализациями. Со временем был введен глобальный стандарт, позволяющий веб-сайтам поддерживать несколько браузеров. Язык, определенный в этом стандарте, называется ECMAScript.
Каждый интерпретатор JavaScript должен предоставлять функции, соответствующие стандарту ECMAScript. Стандарт ECMAScript, который был опубликован в 1999 году, официально назывался ECMA-262, 3-е издание, но стал известен просто как ECMAScript 3. Эта версия JavaScript получила широкое распространение и стала основой для взрывной популярности и роста интернета в том виде, в котором мы его знаем сейчас.
С популярностью языка и ростом использования вне веб-браузера стандарт ECMAScript неоднократно пересматривался и обновлялся. К сожалению, время, которое требуется между предложением новых языковых функций и ратификацией нового стандарта для их покрытия, может быть довольно длительным. Даже когда публикуется новая версия стандарта, веб-браузеры только принимают эти стандарты с течением времени, а также могут реализовывать части стандарта раньше других.
Поэтому, прежде чем выбирать, какой стандарт принять, важно понять, какие браузеры или, точнее, какой механизм времени выполнения необходимо будет поддерживать. Для поддержки этих решений существует ряд справочных сайтов, которые перечисляют поддержку в так называемой таблице совместимости.
В настоящее время на выбор предлагаются 3 основные версии ECMAScript: ES3, ES5 и недавно ратифицированная ES6. ES3 существует уже давно, и почти любой веб-браузер будет поддерживать его. ES5 поддерживается большинством современных веб-браузеров. ES6 является последней версией стандарта и, безусловно, самым большим обновлением языка до настоящего времени. Он впервые вводит классы в язык, что облегчает реализацию объектно-ориентированного программирования.
Компилятор TypeScript имеет параметр, который может переключаться между различными версиями стандарта ECMAScript. В настоящее время TypeScript поддерживает ES3, ES5 и ES6. Когда компилятор запускает ваш TypeScript, он генерирует ошибки компиляции, если код, который вы пытаетесь скомпилировать, недопустим для этого стандарта. Команда Microsoft взяла на себя обязательство следовать стандартам ECMAScript в любых новых версиях компилятора TypeScript, так что, как только новые версии будут приняты, язык TypeScript и компилятор последуют его примеру.
Компиляция
Одна из самых любимых функций JavaScript – отсутствие этапа компиляции. Просто измените свой код, обновите браузер, а интерпретатор позаботится обо всем остальном. Нет необходимости ждать какое-то время, пока компилятор не закончит работу, чтобы запустить ваш код.
Хотя это может рассматриваться как преимущество, есть много причин, по которым вы захотите ввести этап компиляции. Компилятор может найти глупые ошибки, такие как пропущенные скобки или запятые. Он также может найти другие более неясные ошибки, такие как использование одиночной кавычки ('), где должна была использоваться двойная кавычка ("). Каждый разработчик JavaScript расскажет ужасные истории о часах, потраченных на поиск ошибок в своем коде, только для того, чтобы найти пропущенную закрывающую скобку { или простую запятую. Введение шага компиляции в ваш рабочий процесс действительно начинает сиять при управлении большой базой кода.
При внесении изменений в большую кодовую базу нам также необходимо убедиться, что мы не нарушаем существующую функциональность. В большой команде это часто означает использование функций ветвления и слияния репозитория исходного кода. Выполнение шага компиляции до, во время и после слияния из одной ветви в другую дает нам дополнительную уверенность в том, что мы не допустили никаких ошибок или что процесс автоматического слияния также не допустил никаких ошибок.
Используя непрерывный процесс интеграции в команде разработчиков, сервер CI отвечает за создание и развертывание всего сайта, а затем запускает набор модульных и интеграционных тестов для вновь проверенного кода. Мы можем сэкономить часы сборки и часы тестирования, гарантируя отсутствие синтаксических ошибок в коде, прежде чем приступить к развертыванию и запуску тестов.
Наконец, как упоминалось ранее, компилятор TypeScript может быть настроен для вывода ES3, ES5 или ES6 JavaScript. Это означает, что мы можем ориентироваться на разные версии среды выполнения из одной и той же базы кода.
Строгая типизация
JavaScript не сильно типизирован. Это очень динамичный язык, в котором объекты могут изменять свои свойства и поведение на лету. Для примера можно рассмотреть такой кусок кода:
В первой строке этого фрагмента кода объявлена тестовая переменная и ей присвоено строковое значение. Чтобы убедиться, что это так, мы записали значение в консоль. Затем мы присваиваем числовое значение тестовой переменной и снова записываем ее значение в консоль. Обратите внимание на последний фрагмент кода. Мы назначаем функцию, которая принимает два параметра для тестовой переменной. Если мы запустим этот код, мы получим следующие результаты:
Здесь мы можем ясно увидеть изменения, которые мы вносим в тест переменной. Он изменяется от строкового значения до числового значения, а затем становится функцией.
Изменение типа переменной во время выполнения может быть очень опасным делом и может вызвать неисчислимые проблемы. Вот почему традиционные объектно-ориентированные языки обеспечивают строгую типизацию. Другими словами, они не позволяют типу переменной изменяться после объявления.
Хотя весь приведенный выше код является допустимым в JavaScript (и может быть оправдан), довольно легко увидеть, как он может привести к ошибкам во время выполнения. Представьте, что вы были ответственны за написание библиотечной функции для добавления двух чисел, а затем другой разработчик непреднамеренно переназначил вашу функцию, чтобы вместо этого вычесть эти числа.
Подобные ошибки могут быть легко обнаружены в нескольких строках кода, но становится все труднее находить и исправлять их по мере роста вашей базы и развития команды разработчиков.
Проверка типов
В большинстве случаев JavaScript не заботится о том, какие типы вы ему предоставляете, и вместо этого он пытается сделать все возможное, чтобы преобразовать то, что вы ему дали, в то, что он ожидает.
TypeScript, с другой стороны, проверяет ваш код во время компиляции. Таким образом, вам не нужно фактически запускать свой код, чтобы увидеть какую-либо ошибку. Typescript статически анализирует ваш код на наличие ошибок, подобных этим, и показывает их вам, прежде чем вы действительно запустите свой код. Если ваш код не компилируется, то это действительно хороший признак того, что вы допустили ошибку, и вы должны исправить ее, прежде чем пытаться запустить свой код.
С хорошим плагином TypeScript для выбранного вами редактора кода ошибка будет отображаться в виде красной волнистой линии под вашим кодом при вводе. Это значительно ускоряет цикл обратной связи между написанием вашего кода, сообщением о том, что вы сделали ошибку, и обновлением вашего кода, чтобы исправить эту ошибку.
Настройка IDE
Теперь, когда у вас есть некоторое представление о том, как работает компилятор TypeScript и система типов, давайте настроим вашу IDE, чтобы мы могли приступить к изучению реального кода.
Начните с загрузки текстового редактора для написания своего кода. Хорошим выбором является VSCode, потому что он обеспечивает особенно приятный опыт редактирования TypeScript, но вы также можете использовать Sublime Text, Atom, Vim, Webstorm или любую другую IDE, которая вам нравится. Инженеры, как правило, очень разборчивы в IDE, поэтому мы постараемся не оскорбить ваши чувства и предоставляем окончательное решение вам. Если вы хотите использовать VSCode, следуйте инструкциям на веб-сайте VSCode, чтобы настроить его.
TSC сам по себе является приложением командной строки, написанным на TypeScript3, что означает, что вам нужен NodeJS для его запуска. Следуйте инструкциям на официальном сайте NodeJS, чтобы запустить NodeJS на своем компьютере.
NodeJS поставляется с NPM, менеджером пакетов, который вы будете использовать для управления зависимостями вашего проекта и управления вашей сборкой. Начните с создания новой папки и инициализации нового проекта NPM:
tsconfig.json
Каждый проект TypeScript должен включать файл с именем tsconfig.json в корне проекта, в котором проекты TypeScript определяют такие вещи, как, какие файлы должны быть скомпилированы, в какой каталог их компилировать и какую версию JavaScript генерировать.
Создайте новый файл с именем tsconfig.json в корневой папке, затем откройте его в вашей IDE и введите следующее содержимое:
Ваш tsconfig.json поддерживает десятки опций, и постоянно добавляются новые. Вы не обнаружите этих изменений на практике, кроме набора номера модуля и настроек цели при переключении на новый пакет модуля, добавления «dom» в lib при написании TypeScript для браузера или настройки уровня «строгости» при взаимодействии с существующим кодом JavaScript. Для получения полного и актуального списка поддерживаемых опций перейдите к официальной документации на веб-сайте TypeScript.
В вашем проекте также должен быть файл tslint.json, содержащий вашу конфигурацию TSLint, кодифицирующую любые стилистические соглашения, которые вы хотите для своего кода (табуляции или пробелов и т. д.).