В современной разработке Web-приложений очень часто используются различные инструменты, например, Gulp для сборки проектов, фреймворки, к примеру, React с Redux подходом и ещё множество других вещей, позволяющих значительно улучшить JavaScript. Несмотря на то, что новая версия ECMAScript 2015, в которой были произведены существенные доработки и изменения JavaScipt, является официально утвержденной, подобный инструментарий будет востребован ещё долгое время.

Одним из таких инструментов, улучшающих взаимодействие с JavaScript, является TypeScript и о нём пойдет речь в этой статье.

Что такое TypeScript?

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

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

Учитывая всё вышесказанное, TypeScript действительно стоит того, чтобы разобрать его более подробно.

Как он работает?

По большому счёту, TypeScript выглядит как современный JavaScript. На самом основном уровне его использования, он предоставляет парадигму статического типизирования для JavaScript. Таким образом, вместо этого кода:

var name = 'Вольдемар',
    age = 25,
    hasCode = true;

Мы можем написать так:

let name: string = 'Вольдемар',
    age: number = 25,
    hasCode: boolean = true;

Как вы могли заметить, каких-то особых изменений не произошло. Всё, что мы сделали, так это указали точный тип данных для каждой переменной. Для переменной name это будет строчный тип, для переменной age – цифровой и т.д. Но всё привело к тому, что нам пришлось написать немного больше кода. Зачем нужно прилагать дополнительные усилия для определения типов переменных? Подробное описание типов данных позволит точно указать данные нашего приложения, что поможет избежать или перехватывать ошибки на начальной стадии написания кода.

Например, представим, что в нашем коде есть что-то подобное:

var age = 25;
age = 'twenty-five';

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

Однако, есть кое-что ещё. Рассмотрим пример TypeScript кода с официального сайта:

interface Person {
  firstname: string;
  lastname: string;
}

function greeter( person: Person ): string
{
  return "Hello, " + person.firstname + " " + person.lastname;
}

let user = { firstname: "Jane", lastname: "User" };

document.body.innerHTML = greeter( user );

Здесь можно увидеть несколько необычных вещей. У нас есть заурядный объект с именем user, содержащий имя и фамилию, и он передаётся в функцию greeter(), а затем его вывод вставляется в тело документа. Но есть одна странно выглядящая вещь в аргументах функции greeter(), которая зовётся интерфейсом.

Давайте начнём с разбора функции greeter():

function greeter( person: Person ): string
{
  return "Hello, " + person.firstname + " " + person.lastname;
}

Мы можем увидеть, что greeter() принимает параметр person и мы ожидаем, что его тип данных будет Person. В этом случае, мы уверены, что, когда нужно будет обратиться к свойству firstname, оно точно будет присутствовать со строковым типом данных, и это значительно поспособствует уменьшению головной боли, если что-то пойдёт не так. Указание :string после параметров функции наглядно демонстрирует нам, какой тип данных вернёт данная функция после её вызова.

Тело функции не содержит нечего особо сложно, но, тем не менее, возникает резонный вопрос, а что же это за такой тип данных Person? Это именно тот момент, когда в игру вступает интерфейс:

interface Person {
  firstname: string;
  lastname: string;
}

Интерфейсы используются в TypeScript для определения структуры объектов (и только объектов). В этом примере, мы указываем, что любая переменная с типом Person должна быть объектом, который содержит в себе свойства firstname и lastname, которые являются строчным типом данных. Таким образом, мы создали свой собственный тип данных для нашего объекта.

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

В нашем примере, если мы используем интерфейс Person применительно к переменной в какой-либо точке приложения, и эта переменная не будет содержать или firstname, или lastname, причем обязательно со string типом данных, то компилятор пожалуется на это и нам придётся устранить данное замечание.

Имея возможность применять статическую типизацию, мы приобретаем ещё одну прекрасную особенность, а именно то, что при написании кода в IDE, которая поддерживает TypeScript, она будет подсказывать нам на ходу наличие ошибок, предоставлять авто-завершение синтаксиса, что даст более быстрое и безошибочное написание кода.

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

Как установить и настроить TypeScript?

По той причине, что TypeScript является надстройкой над JavaScript, нам необходим транспайлер для преобразования кода, чтобы вся эта прелесть работала в обычном браузере. К счастью, процесс преобразования легко встраивается в сборщики проектов, например, в такие, как Gulp, Webpack или Grunt.

Если вам захочется просто попробовать поработать с TypeScript без сборщиков проектов, то можно установить траспайлер глобально через npm и использовать его через командную строку с командой tsc, например, так:

tsc ВАШ-TYPESCRIPT-ФАЙЛ.ts

На выходе получится обыкновенный JavaScript файл с именем ВАШ-TYPESCRIPT-ФАЙЛ.js, который можно использовать в браузере. Для использования транспайлера в проекте, тем не менее, нужно произвести его корректную настройку, опции которой должны храниться в файле tsconfig.json.

Такой файл определит, что данный проект является TypeScript проектом, и позволит установить нам множество дополнительных опций. Далее приведён пример с необходимым минимумом конфигурации:

{
  "compilerOptions": {
    "module": "commonjs",
    "outFile": "./build/local/tsc.js",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

Здесь мы конфигурируем наш транспайлер следующим образом: сначала определяем работу в связке с системой модулей CommonJS; директорию, куда поместить конечный результат работы; включаем файл для обратного восстановления кода из минифицированного состояния (source map). Также мы исключаем из обработки все файлы в папке node_modules, в тоже время, во всех других директориях, любые файлы с расширением .ts будут обработаны транспайлером.

С этой точки, мы можем произвести интеграцию с нашим любимым сборщиком проектов. Оба Gulp и Grunt имеют расширения для работы с TypeScript, ну и конечно же Webpack также имеет потрясающий TypeScript Загрузчик, что уже даёт огромные возможности для работы. По большому счёту, вы можете получить интеграцию TypeScript практически в любой рабочий процесс без особых усилий.

Внешняя типизация

Если вы используете сторонние библиотеки в вашем проекте (а кто не использует, если честно?), то вам, возможно потребуются некоторые дополнительные определения типов данных. Такие определения указываются в файлах с расширением .d.ts и они дают нам доступ к интрефейсам, который уже были созданы другими разработчиками для множества JavaScript библиотек. В общем и целом, эти определения доступны в огромном репозитории, названном DefinitelyTyped, из которого мы установим некоторые из них.

Для этого необходимо сначала установить менеджер определений для TypeScript: Typings, который является чем-то похожим на npm. У него есть свой собственный конфигурационный файл с именем typings.json, в котором можно указать настройки бандлов и путей для установки.

Мы не станем углубляться в детали, но если, например, вы захотите использовать типы данных для Angular 1.x, то для этого достаточно будет просто ввести команду typings install angularjs --save, с помощью которой будет загружены определения типов в директорию, указанную в файле typings.json. После чего, мы сможете использовать типы данных AngularJS в любом месте вашего проекта, просто включив в начало файла такую строку:

/// <reference path="angularjs/angular.d.ts" />

Теперь мы можем использовать Angular типы данных, например, вот так:

var http: ng.IHttpService;

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

Хорошо, а что на счёт сообщества?

Про сообщество TypeScript можно сказать с уверенностью, что оно растёт хорошими темпами. Вероятно на это оказывает значительное влияние тот факт, что на нём написан фреймворк AngularJS 2 и он предоставляет полную поддержку TypeScript прямо с самого начала своего существования. Также есть отличная поддержка в Microsoft Visual Studio IDE и Visual Studio Code, пакеты и расширения для редакторов, например, Atom и Sublime Text.

Ну и конечно же TypeScript превосходно поддерживается популярнейшими IDE WebStorm и PhpStorm.

Всё это означает, что существует большая активность вокруг TypeScript и возможно, что она увеличится со временем.

Что ещё почитать на эту тему?

• Официальный сайт TypeScript
• Typings – менеджер определений типов данных для TypeScript
• DefinitelyTyped – репозиторий для определений типов данных

Заключение

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

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