Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому TS-код потрібно компілювати?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Тому що браузери та Node.js **не розуміють TypeScript**

TypeScript - це **надбудова над JavaScript**, і його основна мета - **додавання типів** та нових синтаксичних можливостей.
Але:

- браузери та Node.js **виконують лише JavaScript**,
- тому **TypeScript не можна запустити напряму**.

Приклад:

```javascript
const user: string = "Tim";
```

> Браузер не знає, що таке `: string`, і видасть помилку, якщо спробувати запустити цей код напряму.

---

## 2. Що робить компілятор (`tsc`)

Компілятор TypeScript (`tsc`) виконує **два кроки**:

1. **Перевірка типів**
Він аналізує весь проєкт і перевіряє, чи відповідають значення вказаним типам.

```javascript
  let count: number = "5"; // Помилка: очікується number
  ```
2. **Транспіляція (перетворення)**
Він видаляє всю типову інформацію (`: string`, `interface`, `type`, `enum` тощо)
і генерує **чистий JavaScript**, який можна запустити.

```javascript
  // Після компіляції:
  var user = "Tim";
  ```

---

## 3. Приклад: до і після компіляції

### TypeScript (код розробника)

```javascript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

### Після компіляції в JS

```javascript
function greet(name) {
  return "Hello, " + name + "!";
}
```

> Типи (`: string`) повністю зникають - залишається чистий JavaScript.

---

## 4. Компіляція також дозволяє:

- Використовувати **сучасні можливості JS** (ES2022, ESNext) навіть у старих браузерах
- `tsc` перетворює код у старіший стандарт (наприклад, ES5);
- Перевіряти **типову сумісність між файлами**;
- Налаштовувати збірку під різні середовища (`target`, `module`, `outDir`);
- Працювати з **модулями, namespace, декораторами та enum**, яких немає в JS.

---

## 5. Що саме відбувається під час збірки

Якщо у тебе є проєкт з `tsconfig.json`, при запуску:

```javascript
npx tsc
```

TypeScript:

1. Перевіряє всі `.ts` і `.tsx` файли;
2. Ловить типові помилки;
3. Генерує `.js` файли у вказану директорію (`outDir`);
4. (опційно) Створює `.d.ts` файли - описи типів для бібліотек.

---

## 6. Підсумок

> TypeScript **потрібно компілювати**, тому що:
>
> - він **не є виконуваною мовою** (браузери не розуміють TS);
> - він містить **типову інформацію**, яку потрібно видалити;
> - він часто використовує **новий синтаксис**, що потребує перетворення на сумісний JavaScript.

Компіляція робить код **безпечним, перевіреним і сумісним** з будь-яким JS-середовищем.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати345 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.