Как работать с TypeScript

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

Что такое TypeScript

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

Отличия от JavaScript

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

Основные отличия TypeScript от JavaScript:

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

Программист сможет легко освоить TypeScript, если он уже знаком с JavaScript: язык предлагает те же возможности и некоторые преимущества. Рассмотрим их подробнее.

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

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

Например, есть функция, которая принимает два числа и возвращает сумму. Если вместо числа в функцию передать строку, то JavaScript объединит оба аргумента в новую строку и вернет как валидный результат. Это приведет к непредсказуемым проблемам.

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

add(2, 2); // 4
add(2, "not a number"); // 2not a number

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

 
function add(a: number, b: number): number {
return a + b;
}

add(2, "not a number"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

TypeScript может «догадаться» о типе переменной по ее значению, если типы не заданы явно.

На курсе Skypro «Веб-разработчик» можно освоить базовый синтаксис JavaScript с нуля, научиться решать задачи frontend-разработки и работать в команде. Получите готовую систему работы.

Хорошая документация

Документация TypeScript полностью представлена на официальном сайте. Компания Microsoft сделала материалы доступными для всех, это не зависит от уровня и специализации: есть раздел для новичков, для JavaScript-разработчиков, для тех, кто использует Java/C#.

Многие современные редакторы кода, например Visual Studio Code, поддерживают TypeScript. Редактор подсвечивает синтаксис и исправляет простые ошибки, подсказывает названия методов и дает ссылки на документацию.

Функция IntelliSense «дописывает» код на основе типов переменных, определений функций и импортированных модулей. Источник: Visual Studio Code

Улучшенное ООП

Объектно-ориентированное программирование (ООП) — подход, при котором разработчик создает систему объектов и классов. Например, класс Human хранит в себе имя человека и метод greet, который возвращает приветствие:

class Human {
private name: string;

constructor(name: string) {
this.name = name;
}

public greet() {
return "Hello, " + this.name;
}
}

let jack = new Human("Jack");
jack.greet(); // "Hello, Jack"

let janie = new Human("Janie");
janie.greet(); // "Hello, Janie"

Хотя современный JavaScript поддерживает классы, TypeScript активнее использует возможности ООП. Например, можно применить модификаторы доступа public, protected или private. Они помогают более тонко настроить доступ к методам и данным объекта и сделать работу с классами эффективнее. Еще на TypeScript можно типизировать данные и методы класса, а еще сам класс с помощью интерфейсов:

interface IHuman {
greet: () => string;
}

class Human implements IHuman {
private name: string;

public greet() {
return "Hello, " + this.name;
}
}

Компиляция

JavaScript компилируется, когда выполняется программа, а TypeScript компилирует код до этого. Компилятор берет TypeScript-код, проверяет синтаксис и типы и — если всё в порядке — удаляет информацию о типах и генерирует оптимизированный JavaScript-код. Дальше JS-код выполняется как обычно.

При компиляции TypeScript исходный код на одном языке переходит в код на другом. Этот процесс называют source-to-source-компиляцией, или транспиляцией. Поэтому TypeScript можно запускать там же, где работает JavaScript. И при этом можно отлаживать неполадки и находить ошибки в типах до момента исполнения программы.

Недостатки TypeScript

У TypeScript есть и недостатки. Например, начать легко, но чем дальше, тем больше нюансов и сложностей.

Можно легко начать писать на TypeScript, если вы знаете JavaScript или другой похожий язык. Но за внешней простотой скрываются сложные вещи, например типы, наследование, дженерики.

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

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

Онлайн-университет Skypro предлагает стать Java-разработчиком за 11 месяцев. Это 440 часов теории и практики, мастер-классы с реальными рабочими задачами и пять проектов в портфолио. Полученные знания и навыки помогают 95% студентов выйти на новую работу за четыре месяца.

Где используют TypeScript и в каких случаях

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

• Frontend-разработка. Фреймворк Angular изначально написан на TypeScript и активно его использует, а React и Vue поддерживают TypeScript, чтобы лучше контролировать типы.
• Backend-разработка. С TypeScript код предсказуемее, особенно в больших API и микросервисах, а Deno runtime изначально поддерживает TypeScript без дополнительной настройки.
• Кросс-платформенные и настольные приложения. TypeScript снижает количество runtime-ошибок, когда разрабатываются мобильные приложения, и помогает поддерживать сложные десктоп-приложения.
• Разработка библиотек и инструментов. Многие популярные npm-пакеты, например Redux, Express и Jest, либо написаны на TypeScript, либо имеют типизированные версии (@types/…).

Когда стоит выбирать TypeScript:

✅ Большие проекты — чем сложнее код, тем полезнее статическая типизация.
✅ Командная разработка — типы делают код более читаемым и уменьшают количество ошибок.
✅ Долгосрочная поддержка — проще рефакторить и обновлять код.
✅ Строгий контроль типов — если важно избегать неявных преобразований, например в финансовых или медицинских приложениях.

Когда лучше использовать JavaScript:

❌ Маленькие проекты или прототипы — если нужно быстро что-то сделать, TS может замедлить разработку.
❌ Легаси-код или проекты без сборки — если нет возможности настроить компиляцию.
❌ Если команда не знает TypeScript — обучение может затормозить процесс.

Как именно TypeScript улучшает JavaScript

TypeScript добавляет в JavaScript типы и задает их для всех структур данных. Это улучшает читаемость кода и уменьшает количество ошибок в финальной сборке приложения.

Еще у TypeScript есть компилятор (транспайлер), который проверяет код на ошибки и помогает их исправить до выхода в продакшен.

TypeScript использует последние возможности JavaScript, которые поддерживают не все браузеры. Но при этом при TypeScript можно безопасно использовать весь потенциал JavaScript и не переживать за совместимость: в результате код будет скомпилирован в максимально совместимый со всеми браузерами JavaScript.

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

Писать проекты на JavaScript самостоятельно учат на курсе Skypro «Веб-разработчик». Все готовые проекты можно положить в портфолио, а специалисты центра карьеры помогают написать резюме и подготовиться к собеседованию. Устроиться на работу по новой специальности можно еще в процессе учебы.

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

Рассмотрим основные составляющие TypeScript и примеры кода.

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

Можно явно указать тип переменной или позволить TypeScript узнать тип из значения.

let var1: string = 'Hi TypeScript';
let var2 = 'Hi TypeScript';

TypeScript поддерживает такие типы:

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

Массивы

TypeScript позволяет объявить типы для массивов так же, как для переменных.

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

А еще у TypeScript есть специальный интерфейс Array.

let array4: Array = [1, 2, 3];

Кортежи

Кортежи (tuple) — это массивы с данными разного типа. Кортежи используют, чтобы хранить разнородную информацию в одной сущности. Например, ID и имя пользователя.

let user: [number, string] = [123, 'Jack'];

Для доступа к значениям кортежа используют индекс массива.

user[0] // 123
user[1] // 'Jack'

Объекты

Как и в JavaScript, объекты в TypeScript — один из основных способов, с помощью которых можно структурировать данные.

TypeScript выводит тип объекта из значений его полей.

const user = {
id: 123,
name: 'Jack'
}

Можно присвоить анонимный тип.

const user: {
id: number;
name: string;
} = {
id: 123,
name: "Jack",
};

Или указать тип с помощью интерфейса.

interface User {
id: number;
name: string;
}

const user: User = {
id: 123,
name: "Jack",
};

Еще можно использовать псевдоним типа.

type User = {
id: number;
name: string;
}

const user: User = {
id: 123,
name: "Jack",
};

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

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

function add(a: number, b: number): number {
return a + b;
}

Интерфейсы

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

const user = {
id: 123,
name: "Jack",
};

Интерфейсы могут быть определены и явно.

interface User {
id: number;
name: string;
}

const user: User = {
id: 123,
name: "Jack",
};

Таким образом, TypeScript будет знать, из каких полей состоит каждый объект, и проведет необходимые проверки. Еще одно преимущество работы с типизированными объектами — редактор кода сможет подсказать свойства объекта и давать подсказки по мере ввода кода.

Дженерики

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

Например, функции, которые конвертируют аргументы разного типа в массив, могут выглядеть так:

function stringToArray(value: String): Array {
return [value];
}

function numberToArray(value: Number): Array {
return [value];
}

function userToArray(value: User): Array {
return [value];
}

interface User {
id: number;
name: string;
}

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

function valueToArray(value: T): Array {
return [value];
}

const array = convertToValueArray({ id: 123, name: 'Jack'})
array[0].id // 123
array[0].name // 'Jack'
array[0].city // Error: Property 'city' does not exist on type

Модификаторы доступа

Они управляют видимостью свойств и методов класса. В TypeScript есть три модификатора:

• Public — свойство или метод доступен как внутри класса, так и извне. Метод greet() можно вызывать за пределами класса. По умолчанию, если не указывать явно, все свойства и методы публичны.
• Private — доступ только внутри данного класса, свойство name не видно извне. Попытка обратиться извне приведет к ошибке.
• Protected — аналогичен private, разрешает доступ внутри данного класса, а еще в классах-наследниках.

class Human {
private name: string;

constructor(name: string) {
this.name = name;
}

public greet() {
return "Hello, " + this.name;
}
}

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

Вам понадобится Node.js и npm-пакет, чтобы работать с TypeScript. Собрали инструкцию, которая поможет вам установить и настроить все инструменты:

1. Перейдите на официальный сайт Node.js и скачайте последнюю версию для вашей операционной системы.
2. Установите Node.js.
3. Проверьте, что npm — менеджер пакетов Node.js — установлен вместе с Node.js. Для этого откройте терминал и введите команду npm -v. Вы увидите версию npm, если всё в порядке.
4. Откройте терминал и введите команду npm install -g typescript. Она установит TypeScript.
5. После установки введите команду tsc -v в терминале. Вы должны увидеть версию TypeScript.
6. Создайте новый каталог для вашего проекта TypeScript. Например, mkdir my-typescript-project.
7. Перейдите в каталог проекта: cd my-typescript-project.
8. Введите команду tsc —init в терминале. Это создаст файл конфигурации tsconfig.json в корне вашего проекта.
9. Откройте файл tsconfig.json в вашем редакторе кода и настройте параметры компиляции TypeScript по своему усмотрению. Например, вы можете изменить целевую версию ECMAScript или
10. настроить пути к модулям.
11. Создайте новый файл с расширением .ts в вашем проекте. Например, touch app.ts.
12. Откройте файл в редакторе кода и начните писать код на TypeScript.
13. Введите команду tsc в терминале. Это скомпилирует все файлы .ts в вашем проекте в соответствующие файлы .js.
14. По умолчанию скомпилированные файлы .js будут в том же каталоге, что и исходные файлы .ts. Вы можете настроить параметры компиляции в файле tsconfig.json и изменить это поведение.
15. После компиляции вашего кода TypeScript в JavaScript вы можете запустить его с помощью Node.js. Введите команду node app.js в терминале, чтобы запустить ваше приложение.

Коротко о главном

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