Frontend

Зачем использовать TypeScript?

Представьте, вы пишете большой фронтенд-проект на JavaScript. Всё работает локально, тесты зелёные, вы деплойите в продакшн... и внезапно приложение падает с ошибкой Cannot read property 'map' of undefined…динамическая типизация…мммм…

Вот тут бы вас выручил TypeScript - надстройка над JavaScript, которая добавляет статическую типизацию и ловит кучу ошибок ещё до запуска кода.

Какую задачу решает TypeScript?

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

Раннее обнаружение ошибок на этапе разработки
Лучшую автодополняемость и навигацию в IDE
Самодокументирующийся код
Упрощённый рефакторинг больших проектов

Главные плюсы TypeScript

Ловит баги до продакшна — самые дорогие ошибки обнаруживаются на этапе разработки или при создании мердж реквеста
Отличная поддержка в редакторах — VS Code подсвечивает ошибки мгновенно, автодополнение знает всё о ваших типах.
Масштабируемость — в проектах на 10k+ строк без типов легко потеряться. TS делает код предсказуемым.
Постепенное внедрение — можно добавлять TS в существующий JS-проект по файлу за файлом (расширение .ts или .tsx).
Поддержка современного JS — все фичи ESNext + свои собственные (enums, tuples, generics и др.).
Используется везде — Angular, React (с типами), Vue 3, NestJS, Deno и даже многие Node.js-проекты.

Где TypeScript упрощает жизнь

Пример 1: Ошибка с undefined

// JavaScript — работает, пока не придут кривые данные 
function renderUsers(users) {
  return users.map(user =&gt; `&lt;div&gt;${user.name}&lt;/div&gt;`).join('');
}

renderUsers(null); // 💥 TypeError: Cannot read property 'map' of null
// TypeScript — ошибка на этапе компиляции
function renderUsers(users: Array&lt;{ name: string }&gt; | null) {
  if (!users) return 'Нет пользователей';
  return users.map(user =&gt; `&lt;div&gt;${user.name}&lt;/div&gt;`).join('');
}

renderUsers(null); // OK, обработано
renderUsers(undefined); // ❌ Ошибка компиляции: Argument of type 'undefined' is not assignable to parameter of type 'Array&lt;{ name: string }&gt; | null'

Пример 2: Неправильные свойства объекта

// JS— молча вернёт undefined
function getUserEmail(user) {
  return user.email.toLowerCase();
}

getUserEmail({ name: 'Влад', gmail: 'vlad@example.com' }); // 💥 Cannot read property 'toLowerCase' of undefined
// TS — сразу ругается
interface User {
  name: string;
  email: string;
}

function getUserEmail(user: User): string {
  return user.email.toLowerCase();
}

getUserEmail({ name: 'Влад', gmail: 'vlad@example.com' });
// ❌ Property 'email' is missing in type '{ name: string; gmail: string; }' but required in type 'User'

Ловит опечатки и неправильную структуру данных

Пример 3: Рефакторинг без страха

Допустим, вы переименовали поле userId → id. В чистом JS нужно искать все использования вручную. В TypeScript:

interface User {
  id: number; // было userId
}

// Все места, где использовался user.userId, теперь подсвечены красным
user.userId; // ❌ Property 'userId' does not exist on type 'User'

Мгновенно видите все проблемные места.

Если вы до сих пор используете чистый js в огромных проектах, то я вам не завидую, заканчивайте, и будьте счастливы 😁🙌