Зачем нужен TypeScript: статическая типизация поверх JavaScript

TypeScript — это JavaScript с добавленной системой типов. Вы описываете, какие данные ожидает код (строка, число, объект определённой формы), а компилятор проверяет программу ещё до запуска и подсвечивает ошибки прямо в редакторе. Сегодня на TypeScript пишут большинство новых проектов на React, Vue, Angular и Node.js, и его знание — обычное требование в вакансиях.

Проблема: JavaScript узнаёт об ошибках слишком поздно

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

// cart.js — обычный JavaScript
const user = { name: "Aysel", email: "aysel@example.com" };
console.log(user.emial.toLowerCase()); // опечатка в имени свойства

const users = [{ id: 1, name: "Murad" }];
const found = users.find((u) => u.id === 2);
console.log(found.name); // пользователя с id 2 нет — found равен undefined

function formatPrice(amount) {
  return amount.toFixed(2) + " AZN";
}
formatPrice("15"); // передали строку вместо числа

Редактор не видит здесь ничего плохого. Запускаем node cart.js:

TypeError: Cannot read properties of undefined (reading 'toLowerCase')

Программа остановилась на первой ошибке, две другие проявятся только при следующих запусках (reading 'name', затем amount.toFixed is not a function). Если строка выполняется редко, баг может жить в коде месяцами.

Тот же код на TypeScript

TypeScript добавляет статическую типизацию: типы проверяются до запуска, по тексту программы. Укажем тип пользователя и тип параметра:

type User = { name: string; email: string };

const user: User = { name: "Aysel", email: "aysel@example.com" };
console.log(user.emial.toLowerCase()); // ❌ ошибка в редакторе

const users: User[] = [{ name: "Murad", email: "murad@example.com" }];
const found = users.find((u) => u.name === "Leyla");
console.log(found.name); // ❌ ошибка в редакторе

function formatPrice(amount: number): string {
  return amount.toFixed(2) + " AZN";
}
formatPrice("15"); // ❌ ошибка в редакторе

Все три проблемы подчёркнуты красным прямо во время набора. Компилятор сообщает:

error TS2551: Property 'emial' does not exist on type 'User'. Did you mean 'email'?
error TS18048: 'found' is possibly 'undefined'.
error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

TS знает все свойства типа User и предлагает правильное имя; помнит, что find может вернуть undefined, и требует это обработать; видит, что функция ждёт number, а получает строку.

TypeScript — надмножество JavaScript

TypeScript — надмножество (superset) JavaScript: любой корректный JS-код синтаксически корректен и в TS. TS лишь добавляет аннотации типов (: string), объявления type, interface и т. п., поэтому переходить можно постепенно.

Браузер и Node.js исполняют только JavaScript, поэтому перед запуском TS-код превращается в JS. При этом типы стираются — в итоговом коде от них не остаётся ничего:

// price.ts — исходный код
type Product = { title: string; price: number };

function withTax(product: Product): number {
  return product.price * 1.18;
}

console.log(withTax({ title: "Keyboard", price: 45 }));

// price.js — результат компиляции
"use strict";
function withTax(product) {
    return product.price * 1.18;
}
console.log(withTax({ title: "Keyboard", price: 45 }));

Тип Product и аннотации исчезли, логика осталась прежней. Следствие: в рантайме типов нет, и TS не может проверить данные извне — ответ сервера, JSON.parse, ввод пользователя:

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

const data: User = JSON.parse('{"name": "Leyla"}'); // TS верит на слово
console.log(data.age.toFixed(0));
// → TypeError: Cannot read properties of undefined (reading 'toFixed')

JSON.parse возвращает значение без проверки, и TS верит, что это User. На таких границах нужна проверка во время выполнения — в курсе мы делаем её библиотекой Zod.

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

Главная выгода в команде: подсказки и безопасный рефакторинг

Редактор знает форму каждого значения: после user. показывает список свойств, при вызове функции — параметры, при наведении — тип. Сигнатура функции становится документацией, которая не устаревает:

type Order = { id: number; total: number; status: "new" | "paid" | "shipped" };

function updateStatus(order: Order, status: Order["status"]): Order {
  return { ...order, status };
}

const order: Order = { id: 1, total: 120, status: "new" };
updateStatus(order, "payed");
// ❌ Argument of type '"payed"' is not assignable to parameter of type '"new" | "paid" | "shipped"'.

Из сигнатуры видно, какие статусы допустимы, и опечатку "payed" TS не пропустит. Вторая выгода — безопасный рефакторинг. Переименуем в типе price в amount:

type Product = { title: string; amount: number }; // раньше было price

function cartTotal(items: Product[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
  // ❌ Property 'price' does not exist on type 'Product'.
}

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

Где используется TypeScript сегодня

О версиях: линейка 5.x (2023–2025) встречается во многих рабочих проектах. TypeScript 6.0 (2026) — последний компилятор, написанный на самом TypeScript; он переходный и меняет ряд настроек по умолчанию. TypeScript 7 — компилятор, переписанный на Go: он проверяет проекты примерно в 10 раз быстрее. Язык не изменился: код курса работает и в 5.x, и в 7.

Типичные ошибки

1. Считать, что TS проверяет данные во время работы. Ответ API или содержимое localStorage могут не совпадать с типом: аннотация : User сама ничего не гарантирует.

2. Отключать проверки через any. Тип any означает «проверять не нужно», и TS замолкает:

const user: any = { name: "Aysel" };
user.emial.toLowerCase(); // TS молчит — в рантайме снова TypeError

const safeUser: { name: string } = { name: "Aysel" };
safeUser.emial; // ❌ Property 'emial' does not exist on type '{ name: string; }'.

3. Игнорировать подчёркивания, «раз всё запускается». JavaScript по умолчанию генерируется даже при ошибках типов, но ошибка типа почти всегда означает реальный баг.

4. Переписывать проект с нуля. Проект переводят постепенно: переименовывают файлы в .ts и добавляют типы там, где это полезнее всего.

Итог

• TypeScript — это JavaScript плюс статические типы; ошибки видны в редакторе до запуска.
• Он ловит опечатки в свойствах, обращение к возможному undefined, неверные аргументы и многое другое.
• TS — надмножество JS: любой JS-код валиден, переходить можно постепенно.
• При компиляции типы стираются; в рантайме их нет, внешние данные нужно проверять отдельно.
• Главная выгода в команде — автодополнение, типы как документация и безопасный рефакторинг.
• TS используется в React, Vue, Angular, Node.js, Deno и Bun; актуальная версия — TypeScript 7 с компилятором на Go.

Практика

1. Найдите в коде ниже все ошибки, которые поймал бы TypeScript, и объясните каждую: const city = { name: "Baku", population: 2300000 }; console.log(city.populaton); const n = Math.round("3.7");.
2. Откройте TypeScript Playground, вставьте пример из раздела «Тот же код на TypeScript» и исправьте код так, чтобы ошибок не осталось.
3. В Playground опишите тип Student с полями name, group и scores (массив чисел) и функцию average(student: Student): number. Переименуйте поле scores в grades и посмотрите, какие места TS подсветит.
4. Перенесите в Playground небольшую функцию из своего JS-проекта (сумма корзины, фильтрация списка) и добавьте типы. Проверьте, что вызов с неверными данными подсвечивается.

💡 В задании 4 не старайтесь описать всё сразу: начните с параметров функции — это даёт больше всего пользы.