🏆Преимущества TypeScript🚀

Компиляция

Одна из самых любимых черт JavaScript – отсутствие шага компиляции. Прос­
то измените свой код, обновите браузер, а интерпретатор позаботится обо всем
остальном. Нет необходимости ждать какое-то время, пока компилятор не закон-
чит работу, чтобы запустить свой код.
Хотя можно рассматривать это как преимущество, есть много причин, по ко-
торым вы захотите использовать шаг компиляции. Компилятор может найти
глупые ошибки, такие как пропущенные скобки или запятые. Он также может
найти другие более невнятные ошибки, такие как использование одной кавыч-
ки (') там, где должна использоваться двойная кавычка ("). Каждый разработ-
чик JavaScript может рассказать страшные истории о часах, потраченных на поиск
ошибок в своем коде, только для того, чтобы узнать, что он пропустил случайную
закрывающую скобку } или простую запятую.
Использование шага компиляции в своем рабочем процессе действительно упро-
щает работу при управлении большой базой кода. Существует старая поговорка,
в которой говорится, что мы должны рано выходить из строя и громко выходить
из строя, а компилятор будет очень громко кричать на самой ранней возможной
стадии, когда будут обнаружены ошибки. Это означает, что любая фиксация из-
менений в исходном коде будет свободна от ошибок, обнаруженных компилято-
ром.
При внесении изменений в большую кодовую базу нам также необходимо убе-
диться, что мы не нарушаем существующую функциональность. В большой ко-
манде это часто означает использование ветвления и слияния репозитория ис-
ходного кода. Выполнение шага компиляции до, во время и после слияния из
одной ветки в другую дает нам дополнительную уверенность в том, что мы не
совершили ошибок или что в процессе автоматического слияния также не было
допущено ошибок.
Если команда разработчиков использует процесс непрерывной интеграции, сер-
вер непрерывной интеграции (CI) может быть ответственным за создание
и развертывание всего сайта, а затем за выполнение набора модульных и инте-
Инструменты TypeScript и параметры фреймворков
грационных тестов для вновь зарегистрированного кода. Мы можем сэкономить
часы, которые уходят на сборку и тестирование, гарантируя отсутствие синтакси-
ческих ошибок в коде, прежде чем приступать к развертыванию и запуску тестов.
Наконец, как упоминалось ранее, компилятор TypeScript может быть настроен на
вывод ES3, ES5 или ES6 JavaScript. Это означает, что мы можем ориентироваться
на разные версии среды выполнения из одной и той же базы кода.

Сильная типизация

JavaScript не сильно типизирован. Это очень динамичный язык, поскольку он по-
зволяет объектам изменять свои свойства и поведение на лету. В качестве приме-
ра рассмотрим приведенный ниже код:
var test = "this is a string; console.log('test=' + test); test = 1; console.log('test=' + test); test = function (a, b) { return a + b; }
console.log('test=' + test);
В первой строке этого фрагмента объявлена переменная с именем test и ей при-
своено строковое значение. Чтобы убедиться в этом, мы записали значение в кон-
соль. Затем мы присваиваем числовое значение переменной test и снова записы-
ваем ее значение в консоль. Обратите внимание, однако, на последний фрагмент
кода. Мы назначаем функцию, которая принимает два параметра для переменной
test. Если мы запустим этот код, то получим следующие результаты:
test = this is a string test = 1 test = function (a, b) { return a + b; }
Здесь ясно видны изменения, которые мы вносим в переменную test. Она ме-
няется, переходя от строкового значения к числовому, а затем становится функ-
цией.
Изменение типа переменной во время выполнения может быть очень опасным
занятием и привести к бесчисленным проблемам. Вот почему традиционные объ-
ектно-ориентированные языки обеспечивают сильную типизацию. Другими сло-
вами, они не позволяют природе переменной изменяться после объявления.
Инструменты TypeScript и параметры фреймворков
Хотя весь приведенный выше код является допустимым кодом JavaScript – и мо-
жет быть оправдан, – довольно легко видно, как это может привести к ошибкам
во время выполнения. Представьте, что вы были ответственны за написание
библио­течной функции для добавления двух чисел, а затем еще одного разработ-
чика, который непреднамеренно переназначил вашу функцию, вместо того что-
бы вычитать эти числа.
Подобного рода ошибки можно легко обнаружить в нескольких строках кода, но
находить и исправлять их по мере расширения вашей базы кода и команды раз-
работчиков будет все труднее.

Синтаксический сахар

TypeScript представляет очень простой синтаксис для проверки типа объекта во
время компиляции. Этот синтаксис известен как синтаксический сахар, или, бо-
лее формально, аннотация типов. Рассмотрим приведенную ниже версию нашего
исходного кода JavaScript, написанного на TypeScript:
var test: string = "this is a string";
test = 1;
test = function(a, b) { return a + b; }
Обратите внимание, что в первой строке этого фрагмента мы ввели двоеточие :
и ключевое слово string между нашей переменной и ее присваиванием. Этот
синтаксис аннотации типа означает, что мы устанавливаем тип нашей перемен-
ной как тип string и что любой код, который не придерживается этих правил,
приведет к ошибке компиляции. Запуск предыдущего кода через компилятор
TypeScript вызовет две ошибки:
hello.ts(3,1): error TS2322: Type 'number' is not assignable to
type 'string'.
hello.ts(4,1): error TS2322: Type '(a: any, b: any) => any' is
not assignable to type 'string'.
Первая ошибка довольно очевидна. Мы указали, что переменная test является
строкой, и поэтому попытка присвоить ей номер вызовет ошибку компиляции.
Вторая ошибка похожа на первую и, по сути, говорит о том, что мы не можем при-
своить функцию строке.
Таким образом, компилятор TypeScript вводит сильную или статическую типи-
зацию в нашем коде JavaScript, предоставляя нам все преимущества сильно ти-
пизированного языка. Поэтому TypeScript описывается как расширенный вари-
ант JavaScript.

Инкапсуляция

Одним из фундаментальных принципов объектно-ориентированного програм-
мирования является инкапсуляция, возможность определять данные, а также на-
бор функций, которые могут работать с этими данными, в единый компонент.

Большинство языков программирования обладает концепцией класса для этой
цели – предоставляя способ определения шаблона для данных и связанных функ-
ций.
Для начала давайте посмотрим на простое определение класса TypeScript:
class MyClass { add(x, y) { return x + y; } } var classInstance = new MyClass(); var result = classInstance.add(1,2); console.log('add(1,2) returns ${result}');
Этот код довольно прост для чтения и понимания. Мы создали класс MyClass
с простой функцией add. Чтобы использовать его, мы просто создаем его экземп­
ляр класса и вызываем функцию add с двумя аргументами.
JavaScript, предшествующий ES6, не имеет оператора класса, но вместо этого ис-
пользует функции для воспроизведения функциональности классов. Инкапсуля-
ция через классы достигается с помощью либо шаблона прототипа, либо шабло-
на замыкания. Понимание прототипов и шаблона замыкания и их правильное
использование считаются фундаментальным навыком при написании кода на
JavaScript корпоративного уровня.
Замыкание – это, по сути, функция, которая ссылается на независимые перемен-
ные. Это означает, что переменные, определенные в функции замыкания, запо-
минают среду, в которой они были созданы. Это позволяет JavaScript определять
локальные переменные и предоставлять инкапсуляцию. Запись определения
MyClass в предыдущем коде с использованием замыкания в JavaScript бу­дет вы-
глядеть примерно так:
var MyClass = (function () { // самовызывающаяся функция – это среда, // которую замыкание запомнит; function MyClass() { // MyClass – это внутренняя функция, // замыкание; } MyClass.prototype.add = function (x, y) { return x + y; }; return MyClass; })();

var classInstance = new MyClass(); var result = classInstance.add(1, 2); console.log("add(1,2) returns " + result);

Мы начнем с переменной MyClass и назначим ее функции, которая выполняется
немедленно, – обратите внимание на }) (); синтаксис в нижней части опреде-
ления замыкания. Этот синтаксис является распространенным способом написа-
ния кода на JavaScript во избежание утечки переменных в глобальное простран-
ство имен. Затем мы определяем новую функцию с именем MyClass и возвра-
щаем ее внешней вызывающей функции. После этого мы используем ключевое
слово prototype, чтобы добавить новую функцию в определение MyClass. Эта
функция называется add и принимает два параметра, возвращая их сумму.
Последние несколько строк предыдущего фрагмента кода показывают, как ис-
пользовать это замыкание в JavaScript. Создайте экземпляр типа замыкания,
а затем выполните функцию add. Выполнение этого кода будет регистрировать
add(1,2) returns 3 в консоль, как и ожидалось.
Сравнив код JavaScript с кодом TypeScript, легко увидеть, насколько просто вы-
глядит TypeScript по сравнению с эквивалентным JavaScript. Помните, мы упо-
минали, что программисты на JavaScript могут легко потерять фигурную { или
обычную ( скобку? Посмотрите на последнюю строку в определении замыкания:
})(); на обнаружение одной такой скобки может уйти несколько часов отладки.