IT технологии: TypeScript

• История TypeScript
• Характеристики TypeScript
• Почему стоит попробовать TypeScript?
• Как установить TypeScript
• Начинаем работать
• Пишем приложение на TypeScript
• Заключение
• Вакансии с технологией TypeScript

История TypeScript

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

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

TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Код на TypeScript выглядит почти так же, как и код на JS, и, если у вас есть опыт frontend-разработки, изучить TypeScript достаточно просто. Особенно учитывая, что вы можете писать JS-код прямо в TS-скриптах.

Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры — тем более что можно выбрать версию JS, в которую будет компилироваться код.

TypeScript — проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например, let и const, стрелочные функции и так далее.

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

Характеристики TypeScript

TypeScript – это просто JavaScript. TypeScript начинается в JavaScript и заканчивается в JavaScript. Typescript принимает базовые структурные элементы программы от JavaScript. Соответственно, чтобы использовать TypeScript, нужно знать только JavaScript. С целью выполнения, код TypeScript полностью конвертируется в JavaScript эквивалент.

TypeScript поддерживает другие JS библиотеки. Компилируемый TypeScript может быть использован любым JavaScript кодом. JavaScript, сгенерированный с помощью TypeScript, может повторно использовать все существующие JavaScript фреймворки, инструменты и библиотеки.

JavaScript – это TypeScript. Это значит, что любой валидный .js файл можно переименовать в .ts и скомпилировать с другими TypeScript файлами.

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

Почему стоит попробовать TypeScript?

• Возможность жестко описать каждый элемент приложения — это, вероятно, исключает возможность неверной реализации или некорректного вызова методов; Заставляет разработчиков продумать логику (например, в методах) до самой реализации; Не дает возможность изменить один кусок приложения, сломав другой;
• Возможность описать область видимости свойств класса — еще один барьер, который ограничивает разработчика от совершения ошибок;
• Из-за жесткой архитектуры, возможно, необходимо писать меньше тестов — все параметры методов жестко описаны, и если код скомпилировался, тогда, вероятно, каждый вызов является валидным, и не требует дополнительной проверки;
• Можно настроить проект таким образом, что любой некомпилируемый код (фактически, код с синтаксической ошибкой) нельзя будет закоммитить. Случаи в которых разработчик позволяет себе закоммитить сломанный код в обход проверок перед коммитом не рассматриваем;
• Многие конструкции в TypeScript имеют жесткий формат, поэтому многие из ошибок форматирования кода (в соответствии каким-то принятым в коллективе нормам) исключены. Это является однозначным плюсом, потому что процесс ревью кода часто выявляет ошибки форматирования, на которые тратится ценное время. Если это время можно потратить на другие более полезные активности — это уже плюс.

Начнем с основных плюсов:

1. Строгая типизация.

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

   function checkAllMyArgsAgain(check, me, please) {
       if(check && me && please) {
           if(check instanceof CheckObject){
               console.log('Урааааа!');
           } else {
               console.log('И снова исключение...')
           }
           if(me){ } // И так далее.......
       }
   }

   В любом случае, TypeScript сильно упрощает этот процесс:

   function checkAllMyArgsAgain(check: CheckObject, me: MeObject, please: string): string {
       return 'Какая проверка аргументов? Вы о чем? ';
   }

2. Читабельность кода.

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

   Можно представить, во что превратится код, написанный на JavaScript, спустя какое-то время…

   
   function checkMe(check, me) {
        if(check && me) {
            if(check){ ... }
            if(me){ ... }
        }
   }

   function andCheckMe(check, me) {
        if(check && me) {
            if(check){ ... }
            if(me){ ... }
        }
   }

   function andCheckMeToo(check, me) {
        if(check && me) {
            if(check){ ... }
            if(me){ ... }
        }
   }

   Против:

   
   function checkMe(check: CheckObject, me: MeObject) {
        console.log('Ну круто же!');
   }
   function andCheckMe(check: CheckObject, me: MeObject) {
        console.log('Просто песня');
   }
   function andCheckMeToo(check: CheckObject, me: MeObject) {
        console.log('Писать легко и с удовольствием');
   }

   В некоторых случаях, в JS, можно уменьшить ущерб путем абстракций, но в целом, TS сильно впереди по данному вопросу.

3. Более легкий переход из мира строгой типизации, нежели на JavaScript напрямую, в котором правит бал Динамика.

   Многие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.

4. Обратная совместимость с JavaScript.

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

5. Широкая поддержка IDE. TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.

С другой стороны, есть ряд минусов:

Разработчики любят этот язык, а некоторые крупные проекты уже переходят на него. Например, популярный фреймворк Angular.JS. Но этого всё равно недостаточно, чтобы он стал таким же востребованным, как JavaScript. Это связано с тем, что разработка веб-приложения на TypeScript стоит дороже и отнимает больше времени.

• Чтобы использовать какой-то внешний инструмент (читай «библиотеку» или «фреймворк»), тогда сигнатуру каждого из методов каждого модуля этого инструмента необходимо описать, чтобы компилятор не выбрасывал ошибки (он просто не будет знать про ваш инструмент). Если это популярный инструмент, тогда, вероятнее всего, описание интерфейсов можно найти в этом репозитории. Если нет — придется описывать самому;
• Вероятно, самый большой минус (возможно, временный) — порог вхождения и количество специалистов на рынке. Сейчас почти нет специалистов которые знают этот язык. Это плохо, потому что любой солидный проект со временем переходит на этап поддержки, и в случае потери специалистов, найти им замену будет сложнее. Статистика Github показывает — создано лишь ~6k репозиториев с TypeScript кодом против ~1.4kk на JavaScript;
• На разработку тратится больше времени, в сравнении с JavaScript. Это вызвано тем, что помимо реализации класса необходимо описать все задействованные интерфейсы, сигнатуры методов.

Чтобы использовать преимущества TS, важно знать типы данных и объектно-ориентированное программирование.

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

Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.

Установка через NPM

Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду: npm install -g typescript

В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo: sudo npm install -g typescript

Для начала можно потренироваться в онлайн-версии TypeScript – для этого ничего устанавливать не нужно и сразу виден результат.

Установка через Visual Studio

Если при инсталляции IDE отметить опцию "Node.js development", установятся все средства для работы с TypeScript.

Начинаем работать

Синтаксис TypeScript

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

Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.

Основные типы данных:

Большинство из этих типов соотносится с примитивными типами из JavaScript.

{} – комплексный объект, которому можно определить свойства или индикатор: {name: string, age: number} // объект с атрибутами имени и возраста.

или

Рассмотрим пример кода:

Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age. Должно быть соответствие по названиям, количеству и типу свойств.

Array используется для определения типов элементов массива.

Указать тип можно двумя способами:Array и T[ ]

Массив чисел Number[ ]

Пример:

Массив строкArray :

Enum – перечисление, возможность дать имена наборам числовых значений:

Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:

Компилятор выдаст приблизительно такие сообщения об ошибках:Type 'number' is not assignable to type 'string'.

Type 'string' is not assignable to type 'number'.

Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.

1. По умолчанию function NAME_F (NAME_P:тип = “х”):

Пример:

Для определения классов поддерживаются модификаторы контроля доступа public, protected и private:

Класс, название, атрибуты:

Тот же класс, вместе с модификаторами:

Идентификаторы в TypeScript – это имена переменных, функций и других элементов кода. Идентификаторы могут содержать буквы, цифры и некоторые спецсимволы ('_' и '$'). Цифра не может стоять в начале идентификатора.

Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.

Например, Name_one, Name_1, Name1, Name$.

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

AMD

Тренируемся писать приложения на TypeScript

Hello world

TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).

Создаём базовый файл index.html

Создаем файл с расширением HelloWorld.ts и добавляем в него следующую строку:

Компиляция. Чтобы преобразовать наш файл в файл на JavaScript нужно в командной строке запустить:

Калькулятор

Теперь создадим простой калькулятор и посмотрим, как отличается код для него на JS и на TS.Сначала сверстаем форму:

Здесь два поля для ввода чисел, кнопка, которая запускает скрипт и элемент для вывода результата

Код TypeScript выглядит так:

А скомпилированный JS-код для такого калькулятора выглядит вот так:

Заключение

Несмотря на то что в TypeScript очень достойный синтаксис, JavaScript ещё долго будет доминировать во frontend-разработке. Поэтому его в любом случае нужно знать, даже если он вам не нравится.

6 книг по TypeScript для углубленного изучения

• «Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений», Борис Черный.
• «Эффективный TypeScript: 62 способа улучшить код», Дэн Вандеркам.
• «Изучаем TypeScript 3», Натан Розенталс.
• «TypeScript», Jesse Russell, Ronald Cohn.
• «Angular и TypeScript. Сайтостроение для профессионалов», Яков Файн, Антон Моисеев.
• Бесплатное пособие «TypeScript Deep Dive».

Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!

Вакансии с технологией TypeScript

Для поиска вакансий на сайте Apeirondb.com выберите в разделе с вакансиями город, страну и технологию, которые вас интересуют: Технология TypeScript. А также, очень легко осуществить поиск при помощи телеграм бота HIRE:bot(t.me/hireIT_bot) @hireIT_bot, который при правильной настройке, будет отправлять вам только вакансии с технологией TypeScript.

↑