TypeScript — одна из многих попыток создания лучшего опыта с JavaScript.
«О, я использую Gulp по причине A» или «О, я использую Redux по причине B». Вы постоянно слышите подобные вещи от разработчиков. Стало модным использовать новые способы исправления старых ошибок 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;
Как видите, здесь нет большой разницы. Все, что мы делаем, — это явно указываем системе, какой тип у каждой переменной; с самого начала мы говорим, что nameage Но кажется, что нам нужно написать больше кода. Зачем сообщать системе такую конкретную информацию? Потому что она дает системе больше информации о нашей программе, что, в свою очередь, означает, что она может отлавливать ошибки, которые мы могли бы совершить в будущем.
Представьте, например, что у вас есть что-то вроде этого в вашем коде:
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);
Теперь здесь есть несколько более необычных вещей, чем мы имели раньше. У нас есть заурядный объект, называемый usergreeter() Но в аргументах функции greeterinterface
Давайте начнем с функции greeter
function greeter(person: Person):string {
return "Hello, " + person.firstname + " " + person.lastname;
}
Мы можем видеть, что greeterpersonPerson Таким образом, мы можем быть уверены, что когда мы попросим имя этого человека, оно определенно будет там, и мы не будем вызывать головную боль, если она потерпит неудачу. :string
В теле функции нет ничего сложного, но, конечно, сейчас вы, вероятно, задаетесь вопросом, что же на самом деле представляет собой тип Person Вот где появляется функция interface
interface Person {
firstname: string;
lastname: string;
}
Интерфейсы используются в TypeScript для определения структуры объектов (и только объектов). В этом примере мы говорим, что любая переменная типа Personfirstname Мы в основном создаем пользовательский тип для нашего объекта.
Это полезно, потому что он сообщает компилятору, а также вам и любому разработчику, который будет работать над этим в будущем, именно то, какой тип данных ожидать. Мы в основном моделируем свойства объекта, создавая что-то, на что мы можем ссылаться, если нам понадобится отладить позже. Именно поэтому вы увидите интерфейсы в верхней части файлов TypeScript, поскольку они дают нам хорошее представление о данных, с которыми работает программа, в остальной части файла.
В нашем примере, если мы используем этот интерфейс lastnameне содержит ни имя, ни Personоба типа firstnamelastname
Мало того, но статическая типизация означает, что IDE или редактор с поддержкой TypeScript смогут предоставить нам очень хорошие, очень специфические подсказки и автозаполнение, чтобы мы могли разрабатывать код, который был бы быстрее и безопаснее.
Есть много других функций, которые позволяет нам использовать TypeScript, таких как универсальные шаблоны и пространства имен, поэтому настоятельно рекомендуется, по крайней мере, быстро прочитать их документацию .
Как мне это настроить?
Поскольку TypeScript — это расширенный набор JavaScript, нам нужно преобразовать его в JavaScript, если мы хотим использовать его в браузере. К счастью, он уже хорошо интегрируется с рядом исполнителей и упаковщиков задач.
Если вы просто хотите сначала поиграть с ним локально, вы можете установить TypeScript глобально через npm и использовать его из командной строки с stringuser
tsc
Это выведет файл JavaScript, в данном случае называемый tsc your-typescript-file.ts Однако его настройка в проекте почти наверняка повлечет за собой настройку правильного
your-typescript-file.js
Этот файл обозначает, что проект является проектом TypeScript, и позволяет нам установить ряд параметров конфигурации. Вот усеченный пример из документации:
tsconfig.json
Здесь мы настраиваем компилятор несколькими способами. Мы указываем систему модулей для компиляции, куда поместить скомпилированный файл после его завершения и включить исходную карту. Мы также даем ему опцию {
"compilerOptions": {
"module": "commonjs",
"outFile": "./build/local/tsc.js",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
exclude.tsnode_modules
Отсюда мы можем интегрировать вещи в наш любимый исполнитель задач или пакет. И у Grunt, и у Gulp есть плагины для TypeScript, которые предоставят опции компилятора для ваших исполнителей задач. В Webpack есть отличный загрузчик TypeScript , а также есть хорошая поддержка для некоторых других настроек. В принципе, вы можете интегрировать TypeScript практически в любой рабочий процесс, который у вас сейчас есть, без особых усилий.
Внешние наборы
Если вы используете в своем проекте внешние библиотеки (давайте будем честны, а кто нет?), Вам, вероятно, также понадобятся некоторые определения типов. Эти определения, обозначенные расширением .d.ts По большому счету, эти определения доступны в гигантском репо под названием DefinitiveTyped, откуда мы их и устанавливаем.
Чтобы использовать их, вам нужно установить Typings , что-то вроде npm, но для определений типов TypeScript. Он имеет свой собственный конфигурационный файл с именем typings.json
Здесь мы не будем вдаваться в подробности, но если мы хотим использовать, например, типы AngularJS 1.x, мы можем просто пойти typings install angularjs --savetypings.json После этого вы можете использовать определения типов Angular в любом месте вашего проекта, просто включив эту строку:
/// <reference path="angularjs/angular.d.ts" />
Теперь мы можем использовать определения типа Angular, например:
var http: ng.IHttpService;
Любые разработчики, которые столкнутся с нашим кодом на более поздней стадии (или мы сами, через три месяца после того, как мы его написали), смогут лучше понять, что мы написали, посмотрев на них.
Хорошо, а как насчет сообщества?
Сообщество TypeScript продолжает расти, как и принятие языка. Возможно, самое главное, это то, на чем написан Angular 2+, и фреймворк обеспечивает его полную поддержку с самого начала. Существует также фантастическая поддержка его синтаксиса, встроенного в Microsoft Visual Studio IDE и код Visual Studio, а также доступны пакеты и плагины для таких редакторов, как Atom , Sublime Text и Emacs .
Это означает, что вокруг TypeScript происходит множество действий, поэтому вы должны следить за этим.
Дальнейшее чтение
- Официальный сайт TypeScript
- Определенно Тип — Сторонние определения TypeScript
Вывод
TypeScript — это интересный толчок к исправлению недостатков JavaScript за счет введения статической системы типизации, включающей интерфейсы и объединения типов. Это помогает нам писать более безопасный, разборчивый и декларативный код.
В настоящее время он хорошо интегрируется практически со всеми основными настройками сборки и даже дает нам возможность создавать и использовать пользовательские типы. Есть также множество IDE и текстовых редакторов, которые имеют отличную поддержку своего синтаксиса и процесса компиляции, так что вы можете использовать его в своей среде программирования без каких-либо трудностей или процессов.
Возможно, самое важное, что TypeScript является большой частью Angular 2+, а это значит, что мы продолжим видеть его в будущем. Чем больше мы знаем об этом и как оно работает, тем лучше мы будем иметь дело с ним, когда он станет полноценной альтернативой JavaScript.
Чувствуете ли вы вдохновение использовать TypeScript в вашем следующем проекте? Является ли строгая типизация будущего JavaScript или это просто причуда? Дайте мне знать, что вы думаете ниже!