TypeScript: как с ним работать и чем он отличается от JavaScript 

Обычно frontend — внешнюю часть сайта, которую видит пользователь, — разрабатывают на JavaScript. Этот язык программирования уже много лет является стандартом для создания интерактивных веб-приложений. Однако у JavaScript есть ряд недостатков, которые могут осложнять разработку, особенно в больших проектах.

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

Что такое TypeScript 

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

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

Преимущества и недостатки TypeScript 

Перечислим основные плюсы TypeScript: 

1. Статическая типизация. Это главное, за что многие разработчики выбирают TypeScript вместо JavaScript: в нем можно четко обозначить типы переменных и структур данных. Благодаря статической типизации получается находить ошибки в коде до его запуска. Не случится ситуации, когда тип данных будет неверным, как в случае JS с его динамической типизацией. 

Пример кода со строгой типизацией: 

function addNumbers(a: number, b: number): number {

    return a + b;

}

let result: number = addNumbers(20, 26);

console.log(result);

Этот код выполняет простую операцию сложения двух чисел. Функция addNumbers принимает два аргумента, a и b, оба из которых должны быть числами. Это указано через : number. Функция возвращает результат сложения a и b, и тип возвращаемого значения тоже строго задан как number.

Затем функция вызывается с аргументами 20 и 26, и результат сложения, равный 46, сохраняется в переменную result. Тип переменной result также явно указан как number. После этого значение переменной result выводится в консоль с помощью console.log.

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

А вот так выглядел бы тот же самый код, но на JavaScript:

function addNumbers(a, b) {
    return a + b;
}

let result = addNumbers(20, 26);
console.log(result);

В нем также определена функция addNumbers, которая принимает два аргумента, a и b, и возвращает их сумму. Затем функция вызывается с аргументами 20 и 26, и результат сложения, равный 46, сохраняется в переменную result. После этого значение переменной result выводится в консоль с помощью console.log.

Но в JavaScript нет строгой типизации, поэтому аргументы функции addNumbers могут быть любыми типами данных: числами, строками, объектами и т.д. Это делает код более гибким, но также может привести к непредсказуемым результатам, если передать аргументы неправильного типа.

Например, если передать строки "20" и "26", то оператор + выполнит конкатенацию строк, и результат будет "2026", а не 46. Если передать число и строку, например 20 и "26", JavaScript попытается преобразовать число в строку и снова выполнит конкатенацию, результатом которой будет "2026". Если передать другие типы данных, например null и undefined, результат будет NaN (Not a Number), так как операция сложения с такими значениями не имеет смысла.

2. Компиляция. В TypeScript компиляция кода происходит до его выполнения, в отличие от JavaScript. Компилятор использует код, анализирует типы и синтаксис. Если все в порядке, он сразу генерирует JS-код. При этом код нужно преобразовать до выполнения, что занимает некоторое время. 
3. Совместимость с JavaScript. Если написать код на TS, он точно будет работать на JS. Поэтому можно сразу создавать проект на удобном языке. 
4. Полноценное ООП (объектно-ориентированное программирование). JavaScript тоже поддерживает ООП: классы, объекты, наследование. Но у TypeScript больше возможностей, например, можно создавать полноценные интерфейсы. 
5. Обширная документация. TypeScript популярен в среде разработчиков, о нем написано написано много материалов и инструкций. Поэтому легко найти ответ на любой вопрос по работе с этим языком. 

У TypeScript есть и недостатки. Например, писать код на нем дольше и, как следствие, дороже, чем на JavaScript. Например, не все библиотеки JS имеют типизацию для TS. В результате разработчикам нужно самим создавать определения типов или искать их. 

Как работает TypeScript 

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

Типы переменных 

В TypeScript можно создавать любые переменные. Вот несколько популярных типов: 

• String — текстовые строки; 
• Number — числа; 
• Boolean — истина или ложь; 
• Symbol — идентификатор объекта; 
• Any — обозначение неизвестного типа переменной, например, динамического; 
• Void — отсутствие конкретного типа; 
• Undefined — отсутствие конкретного значения; 
• Null — недоступная переменная. 

Массивы и кортежи 

Массивы работают одинаково и в JavaScript, и в TypeScript. Но при использовании последнего можно добавить типизацию, как для переменных. Например, чтобы элементы одного массива имели одинаковый тип. Для этого нужно использовать тип[] или Array<тип>: 

let array1: number[] = [1, 2, 3];

let array2 = [1, 2, 3];

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

user[0] // red

user[1] // ford

user[2] // 10000

Объекты 

Объекты — основной способ структурировать данные в TS. В таблице приведены примеры использования объектов в TypeScript. 

Модификаторы 

Модификаторы в TS открывают внешний доступ к данным или, наоборот, закрывают его. Есть три вида модификатора: 

• public — доступ к данным не ограничен; 
• private — данные доступны только из класса, к которому относятся;
• protected — кроме класса, к которому определены данные, они доступны в производных классах или подклассах. 

Аргументы функций и возвращаемые типы 

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

Интерфейсы 

Интерфейсы показывают, какие имена и свойства сможет иметь объект. Создаются автоматически при определении новых объектов. Для последующих интерфейсы будут состоять из двух полей — id с типом number и name с типом string.  

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

Обобщенные типы (дженерики) 

Используются, когда класс или функция могут работать с разными типами. Так, чтобы не использовать тип any и не дублировать код, получится создать «переменную типа» и задать тип позже, уже при вызове функции. 

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

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

TypeScript можно установить на компьютер тремя способами — с помощью модуля npm, пакета NuGet или расширения Visual Studio. Выбор зависит от того, как именно вы собираетесь использовать TS. Например, для Node.JS нужна версия npm, а для MSBuild — NuGet или Visual Studio. 

Рассмотрим вариант с Node.JS. Нужно установить его, а затем в консоли ввести такую команду: 

npm install -g typescript

Далее в папке со скриптами необходимо создать файл с расширением .ts: именно здесь вы будете писать код. Также при работе с TS понадобится команда для компиляции кода — tsc. Чтобы скомпилировать файл app.ts, введите такую команду: 

tsc app.ts 

В результате должен появиться файл app.js: его нужно подключить к странице. 

Пример кода на TypeScript 

Как выглядит пример создания класса с конструктором, свойствами и методом. 

class Person {

    firstName: string;

    lastName: string;

    age: number;

    constructor(firstName: string, lastName: string, age: number) {

        this.firstName = firstName;

        this.lastName = lastName;

        this.age = age;

    }

    displayInfo(): void {

        console.log(First name: ${this.firstName}, Last name: ${this.lastName}, Age: ${this.age});

    }

}

let person1: Person = new Person('Ivan', 'Petrov', 25);

person1.displayInfo();

TypeScript: коротко о главном 

• TypeScript — язык программирования, который может заменить JavaScript для frontend-разработки. Позволяет устранить недостатки JS. 
• Главное преимущество TypeScript — статическая типизация. Также он полностью совместим с JavaScript и имеет больше возможностей для ООП. 
• У TypeScript развитое комьюнити и много полезных материалов, поэтому язык удобен для освоения и работы.