Автор: Сарит Вакрат (Sarit Vakrat)
Оригинал статьи
Перевод: Ольга Алифанова

Javascript – прекрасный язык программирования: он легок, быстр, и располагает ресурсами для решения практически любых приходящих в голову вопросов. Он профессионально управляется с бэкендом через Node.js. Однако если в вашем javascript-коде попался баг, дебаг может сильно выматывать и раздражать, а иногда это глупые, легко предотвратимые баги.

TypeScript пользуется всеми преимуществами JavaScript и NodeJS и усиливает их – он поможет писать код, который легче читать и проще поддерживать. У него статическая типизация, классы, интерфейсы, типы, декораторы и поддержка IDE в режиме реального времени вроде Visual Studio Code.

Типы позволяют JavaScript-разработчикам пользоваться высокопроизводительными инструментами и практиками разработки при создании JavaScript-приложений – например, статической проверкой и рефакторингом кода.

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

Итак, что же такое TypeScript?

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

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

Несколько лет назад вокруг TypeScript была большая шумиха – он стал полностью поддерживаться Angular 2 и последующими версиями (тоже написанными на TypeScript!) Он также разработан Microsoft, то есть за его спиной стоят две крупные технические компании (что неплохо для любого языка). С тех пор он все набирает поклонников и поддержку, и сообщество TypeScript быстро растет.

Сниппет кода, демонстрирующий использование классов, интерфейса и типов:

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}
interface Person {
   firstName: string;
   lastName: string;
}
function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");document.body.innerHTML = greeter(user);

Ниже – список причин, делающих TypeScript мощным с моей точки зрения:

• Масштабируемость кода при помощи разработки, ориентированной на интерфейсы.
• Постоянно растущее сообщество и поддержка инструментария (отлично поддерживается Visual Studio Code и Intellisense).
• Соответствие ES-next.
• Доказано, что типы улучшают качество и понятность кода. К этому выводу постоянно приходят такие крупные команды, как Google, Microsoft и Facebook.
• Типы повышают гибкость при рефакторинге и программировании в целом. Ошибки лучше ловить компилятором, а не сталкиваться с отказами при запуске.
• Типы – одна из наилучших форм документации. Подпись функции – это теорема, а тело функции – доказательство. У VS Code есть отличное расширение для автоматической генерации комментариев при использовании TypeScript.
• Тестируемость. Паттерн внедрения зависимости сильно упрощает тестирование. Тест-службы можно имитировать при помощи тех же интерфейсов, которые используются в реальности. Ваш код разницы не поймет, и вы можете выполнять весь набор сценариев и добиться полного покрытия.
• Использование заглушек позволяет тест-автоматизаторам начать программировать еще до завершения процесса разработки – для этого разработчикам нужно подготовить схемы API и детальную документацию, прежде чем приступать к разработке.
• TypeScript позволяет внедрять принципы SOLID в язык, который на самом деле их не поддерживает.
• Типы делают код читабельнее. Они помогают разработчикам быстрее вспомнить, что именно делает каждый участок кода. Следовательно, разработчик может быстрее пополнять и менять существующий код.
• TypeScript может компилироваться в версию JavaScript, которая работает в любом браузере.
• Одно из крупнейших преимуществ TypeScript – это дополнение кода и IntelliSense. Intellisense предоставляет активные подсказки по мере добавления нового кода.
• TypeScript позволяет писать чистый код. Статическая типизация – это опция, которая ловит баги по мере написания скриптов. Это позволяет разработчикам писать более надежный код и поддерживать его – код становится лучше и чище.
• На Typescript можно легко написать чистый объектно-ориентированный код без специальных знаний.
• Рефакторинг с инструментами TypeScript становится проще и быстрее.
• Типизации для большинства библиотек доступны в проекте DefinitelyTyped, и после выхода TypeScript 2.0 их можно установить через npm, например:

npm install @types/lodash

• Декораторы дают разработчикам возможность писать аннотации метаданных, что помогает вникнуть в код. Наилучшее применение декораторов – это сквозная функциональность (аспектно-ориентированное программирование).
• В разработке автоматизации жизненный цикл разработчика – около двух лет, а в тестируемом продукте много компонентов, и новичок дольше вникает, что и когда делает каждая секция. Наличие типов и хорошо комментированного кода бережет время.
• Использование типов экономит время на поиск ошибок при компиляции.
• TypeScript позволяет использовать заглушки и делает подход к автоматизации более гибким – мы больше не зависим от готовности разработки.
• Благодаря отличным инструментам и поддержке IDE и IntelliSense мы экономим время на разработку.
• Рефакторинг – больше не матерное слово, теперь он гораздо быстрее.
• Наш код лучше структурирован, его легче читать и поддерживать.
• Сокращено время прогона благодаря инъекции зависимостей.
• Применение TSLint позволяет всем разработчикам легко следовать единым инструкциям.

Итак, почему же мы перевели свой фреймворк с чистого Javascript на TypeScript?

Стандартные примеры использования TypeScript в автоматизации:

UI-тесты

• https://github.com/dalenguyen/WebdriverIO-TypeScript-Boilerplate
• https://github.com/WillLuce/WebdriverIO_Typescript
• https://github.com/goenning/typescript-selenium-example

API-тесты

• https://github.com/qaloop/api-testing-protractor-typescript
• https://github.com/sudharsan-selvaraj/protractor-api-resource
• https://github.com/jdavis61/puppeteer-api-typescript-examples

Фреймворки автоматизации / инструменты, поддерживающие TypeScript

• Jest — пока не на 100% гладко, могут понадобиться доработки в зависимости от нужд фреймворка
• WebdriverIO
• Selenium
• Mocha
• Protractor
• Cucumber
• Puppeteer
• И поддержки все больше и больше!

Рекомендую заглянуть в песочницу TypeScript – она позволяет видеть компиляцию по мере ввода кода.

Удачного программирования!

Обсудить в форуме