Почему TypeScript? От хаоса к порядку

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

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

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

console.log(add(2, 3)); // 5 (всё отлично)
console.log(add(2, "3")); // "23" (что?!)

Здесь нет ошибок в рантайме, программа работает. Но результат отличается от ожидаемого, потому что оператор + в JavaScript используется и для сложения чисел, и для конкатенации строк. JavaScript принудительно привел (coercion) число к строке, потому что один из операндов оказался строкой.

Или вот ещё пример, который я часто вижу у новичков:

function getTotal(items) {
  return items.length * 10;
}

console.log(getTotal([1, 2, 3])); // 30
console.log(getTotal(null)); // Ошибка! Cannot read property 'length' of null

Ваше приложение падает, потому что вы передали null, а функция этого не ожидала. Всё, что мы могли сделать в vanilla JS — это надеяться на документацию или добавлять кучу проверок:

function getTotal(items) {
  if (items && Array.isArray(items)) {
    return items.length * 10;
  }
  return 0;
}

Согласитесь, это утомительно. Половина кода в больших проектах начинает состоять из таких «защитных» проверок. Мы тратим время не на решение бизнес-задач, а на борьбу с языком.

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

Что это значит?

1. Любой ваш существующий .js файл — это уже валидный .ts файл. Вы можете мигрировать постепенно.
2. TypeScript добавляет в JavaScript систему типов, которая проверяется на этапе компиляции (до того, как код попадёт в браузер).

Представьте, что TypeScript — это строгий, но справедливый наставник, который сидит у вас за плечом и говорит: «Эй, ты точно уверен, что передаешь строку туда, где ожидается число? Может, перепроверим?»

Возьмём наш первый пример с функцией add. Перепишем её на TypeScript:

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

// Теперь это просто не скомпилируется!
// add(2, "3"); // Ошибка: Аргумент типа "string" не назначаем параметру типа "number".

Ошибка возникает не в браузере, когда пользователь уже кликнул по кнопке, а у вас в редакторе кода в тот момент, когда вы пишете эту строчку. Вы экономите часы отладки.

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

1. Union Types (Объединения типов) — научимся говорить TypeScript: «Эта функция принимает либо строку, либо число», и обрабатывать оба случая безопасно.
2. Type Guards (Защитники типов) — узнаем, как сужать типы в коде, чтобы компилятор точно понимал, с чем мы работаем в данный момент (например, различать массив и null).
3. Интерфейсы — изучим, как описывать сложные структуры объектов (например, «пользователь должен иметь имя и возраст»), чтобы весь ваш код работал с чёткими контрактами.

Прежде чем мы перейдём к этим темам, давайте быстро настроим среду. Вам понадобится (откроется в новой вкладке)Node.js установленный на компьютере.

Установите TypeScript глобально через npm (менеджер пакетов Node):

npm install -g typescript

После установки у вас появится команда tsc (TypeScript Compiler). Создайте файл index.ts, напишите в нём простую строчку:

let message: string = "Hello, TypeScript!";
console.log(message);

И скомпилируйте его в терминале:

tsc index.ts

Вы увидите, что рядом появился файл index.js с обычным JavaScript-кодом, который понятен любому браузеру. Это и есть суть работы TypeScript — вы пишете с типами, а компилятор превращает это в чистый JS, вычищая всю информацию о типах на выходе.

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

В следующем уроке мы детально разберём базовые типы и начнём писать наши первые реальные функции с типами. А пока — поэкспериментируйте с функцией add в TypeScript, попробуйте передать ей разные типы и посмотрите на подсказки ошибок в вашем редакторе ((откроется в новой вкладке)VS Code рекомендую). Удачи!