От автора: что такое TypeScript? По сути, это одна из многих попыток создания лучшего опыта работы с JavaScript. «О, я использую Gulp из-за причины A» или «О, я использую Redux из-за причины Б». Вы все время слышите это от разработчиков front-end. Стало модным использовать новые способы улучшения старых ошибок JavaScript, и это неплохо. Даже ES2015 и последующие обновления являются хорошими попытками устранить эти ошибки. TypeScript — многообещающее изменение нашего любимого языка, который может оказать существенное влияние на будущее JavaScript.
Вводная информация о TypeScript
TypeScript является строго типизированным надмножеством JavaScript, что означает, что он добавляет некоторые синтаксические преимущества для языка, но при этом позволяет писать обычный JavaScript, если хотите. Он поощряет более декларативный стиль программирования через такие вещи, как интерфейсы и статическую типизацию (подробнее об этом позже), предлагает модули и классы, а самое главное, довольно хорошо интегрируется с популярными библиотеками и кодом JavaScript. Вы могли бы подумать об этом как о сильном статическом уровне над текущим JavaScript, который имеет несколько функций, чтобы сделать жизнь (и отлаживать особенно) более терпимой.
TypeScript получил особое внимание несколько лет назад, потому что был выбран для полной поддержки с помощью Angular 2 и выше (что написано в самом TypeScript). Он также разработан Microsoft, что означает, что он поддерживает две крупные технические компании (неплохое место для любого языка). С этого времени он получил статус основного.
Стоит пересмотреть свои взгляды на TypeScript.
Как он работает?
TypeScript действительно похож на современный JavaScript. На самом базовом уровне он вводит статическую типизирующую парадигму JavaScript, поэтому вместо следующего:
var name = “Susan”, age = 25, hasCode = true;
Мы могли бы написать следующее:
let name: string = "Susan", 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 , содержащий first и lastname, и это передается в greeter(), а результат вставляется в body документа. Но в аргументах функции greeter есть некоторые странности, а также что-то, что называется interface.
Начнем с функции greeter:
function greeter(person: Person):string { return "Hello, " + person.firstname + " " + person.lastname; }
Мы видим, что greeter принимает параметр person и ожидаем, что он будет типа Person. Таким образом, мы можем быть уверены, что когда мы запросим имя рerson, оно, безусловно, будет там, и у нас не будет головные боли, если ничего не получится. :string после параметров функции сообщает нам, какой тип ожидать, когда эта функция вернется после нашего вызова.
В body функции нет ничего сложного, но вы, вероятно, зададитесь вопросом, что такое на самом деле тип Person . Это тип, в котором присутствует функция interface:
interface Person { firstname: string; lastname: string;
}
Интерфейсы используются в TypeScript для определения структуры объектов (и только объектов). В этом примере мы говорим, что любая переменная типа Person должна быть объектом, содержащим свойство firstname и lastname, как тип строки. В основном мы создаем настраиваемый тип для нашего объекта.
Это нужно, потому что он сообщает компилятору, а также самому себе и разработчику, который будет работать над этим в будущем, какой тип данных ожидать. Мы в основном моделируем свойства объекта, создавая что-то, на что можем ссылаться, если нам нужно позже сделать отладку. Часто бывает, что вы увидите интерфейсы в верхней части файлов TypeScript, так как в остальной части файла они дают нам представление о данных, с которыми работает программа.
В нашем примере, если мы используем интерфейс Person с переменной в любой точке программы и в ней не будет содержаться ни firstname ни lastname , как тип string (к счастью, наш user объект содержит), тогда компилятор будет сигналить нам и мы будем вынуждены исправить ошибки.
Не только это, но и статическая типизация означает, что IDE или редактор с поддержкой TypeScript смогут предоставить нам очень хорошие, очень конкретные подсказки и автозаполнение, чтобы мы могли разработать код, который является более быстрым и безопасным.
Есть еще множество функций, которые позволяют использовать TypeScript, например, дженерики и пространства имен, поэтому рекомендую хотя бы быстро ознакомиться с их документацией.
Как настроить?
Поскольку TypeScript является надмножеством JavaScript, нужно перевести его на JavaScript, если мы хотим использовать в браузере. К счастью, он хорошо интегрируется с рядом задач и комплектами задач.
Если сначала вы просто хотите попробовать его локально, можете установить TypeScript по всему миру через npm и использовать его из командной строки с tsc командой, например:
tsc your-typescript-file.ts
Это выведет файл JavaScript (здесь он называется your-typescript-file.js), который затем можно будет использовать в браузере, как обычно. Однако при настройке в проекте почти наверняка возникнет свойственный tsconfig.json.
Этот файл означает, что проект является проектом TypeScript и позволяет нам установить несколько параметров конфигурации. Вот укороченный пример из документов:
{ "compilerOptions": { "module": "commonjs", "outFile": "./build/local/tsc.js", "sourceMap": true }, "exclude": [ "node_modules" ]
}
Здесь мы настраиваем компилятор несколькими способами. Указываем модульную систему для компиляции, куда поместить скомпилированный файл, когда он будет завершен, и включаем исходную карту. Мы также предоставляем ему exclude вариант, который в основном говорит компилятору компилировать любые файлы TypeScript , которые заканчиваются на .ts — он ищет их, пока они не в папке node_modules.
Отсюда мы можем интегрировать вещи в нашу любимую задачу или спутник. У Grunt и Gulp есть плагины для TypeScript, которые будут раскрывать параметры компилятора для участников задач. У Webpack есть удивительный загрузчик TypeScript, и есть хорошая поддержка для других настроек. В принципе, вы можете без особых усилий интегрировать TypeScript практически в любой рабочий процесс, который сейчас выполняете.
Внешняя типизация
Если вы используете внешние библиотеки в своем проекте (давайте будем честными, кто не использует?), вам также понадобятся другие определения типов. Эти определения, обозначенные расширением .d.ts дают доступ к интерфейсам, которые другие люди писали для библиотек JavaScript. По большому счету эти определения доступны в гигантском репо, называемом DefinitelyTyped, с которого мы их устанавливаем.
Чтобы использовать их, нужно будет установить Typings, это похоже на npm, но для определений типов TypeScript. Он имеет собственный файл конфигурации, называемый typings.json , где можно настроить свои пакеты и пути для установки определения типа.
Мы не будем вдаваться в подробности, но если бы нам хотелось использовать типы AngularJS 1.x, то мы могли бы просто перейти к typings install angularjs —save и загрузить в путь, определенный в typings.json. После этого вы можете использовать определения типа Angular в любом месте своего проекта, просто включив эту строку:
/// <reference path="angularjs/angular.d.ts" />
Теперь мы можем использовать Angular определения типа следующим образом:
var http: ng.IHttpService;
Любые разработчики, которые работают на нашем коде на более позднем этапе (или мы, через три месяца после его написания), смогут больше понять, что мы написали, посмотрев на них.
Что по поводу сообщества?
Сообщество TypeScript продолжает расти, как и принятие языка. Возможно, самое главное здесь то, что написано в Angular 2+, и структура, обеспечивающая полную поддержку с самого начала. Существует также фантастическая поддержка его синтаксиса, испеченного в Microsoft Visual Studio IDE и Visual Studio Code, с пакетами и плагинами для таких редакторов, как Atom, Sublime Text и Emacs.
Это означает, что вокруг TypeScript много активности, поэтому вам нужно следить за ним.
Вывод
TypeScript — интересный толчок к улучшению недостатков JavaScript, который ввёл систему статической типизации с интерфейсами и объединениями типов. Это помогает нам писать более безопасный, четкий и декларативный код.
Он хорошо интегрируется с практически каждой основной конструкцией сборки в настоящий момент и даже дает нам возможность создавать и использовать пользовательские типы. Есть также множество интегрированных IDE и текстовых редакторов, которые отлично поддерживают процесс синтаксиса и компиляции, поэтому вы можете использовать его в своей среде кодирования.
TypeScript является большой частью Angular 2+, что означает, что мы будем и дальше встречаться с ним. Чем больше мы знаем о том, как это работает, тем легче нам будет справиться, когда он станет полноценной альтернативой JavaScript.
Вы чувствуете себя вдохновленным использовать TypeScript в своем следующем проекте? Является ли сильная формулировка будущего JavaScript, или это просто причуда? Дайте мне знать, что вы думаете ниже!
Автор: Byron Houwens
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
