TypeScript

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

Что добавляет TypeScript

TypeScript — надстройка над JS. Код пишется с типами, а компилятор tsc превращает его в чистый JavaScript, который исполняется везде. Типы при этом исчезают — это проверка времени разработки, а не рантайма.

npm install -D typescript
npx tsc --init

// app.ts
const name: string = "Ира";
let age: number = 26;

function priceWithTax(price: number, tax: number): number {
  return price * (1 + tax);
}

priceWithTax(100, "0.2"); // ❌ ошибка компиляции: ждали число

Интерфейсы: форма объекта

interface описывает, какие поля и типы есть у объекта. Линтер поймает опечатку в поле ещё до запуска.

interface Product {
  id: number;
  name: string;
  price: number;
  inStock?: boolean;   // необязательное поле
}

const products: Product[] = [
  { id: 1, name: "Кружка", price: 450 }
];

function render(p: Product) {
  console.log(p.name.toUpperCase());
}

Типы против интерфейсов

interface хорош для объектов (его можно «дополнить» и описать повторно). type гибче: умеет объединять (|) и пересекать (&) типы.

type Status = "new" | "active" | "blocked";
type ID = number | string;

let s: Status = "active";   // а "ожидание" — уже ошибка типа

type Circle = { radius: number };
type Colored = { color: string };
type Dot = Circle & Colored;   // и круг, и цвет — вместе

В связке с Vite

Руками TS в браузер не отдаём — его собирает инструмент. Быстрее всего стартовать с шаблона:

npm create vite@latest my-app -- --template react-ts
# или --template vanilla-ts для чистого TS-проекта