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

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

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

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

Контент

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

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

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

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

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

## 1. Базове визначення

| Формат файлу | Мова | Для чого використовується |
|---|---|---|
| `.jsx` | JavaScript + JSX | React-компоненти без типізації |
| `.tsx` | TypeScript + JSX | React-компоненти **з типами** (підтримка TypeScript) |

> Простіше кажучи:
> **JSX** = "JavaScript з синтаксисом React",
> **TSX** = "TypeScript з синтаксисом React".

---

## 2. Що таке JSX

**JSX (JavaScript XML)** - це синтаксичне розширення JS,
яке дозволяє писати React-компоненти у вигляді "HTML-подібного" коду:

```javascript
function Hello() {
  return <h1>Hello, world!</h1>;
}
```

На етапі компіляції Babel перетворює це на звичайний JS-виклик:

```javascript
function Hello() {
  return React.createElement("h1", null, "Hello, world!");
}
```

У `.jsx`-файлах **немає типізації**,
все перевіряється лише під час виконання коду.

---

## 3. Що таке TSX

**TSX (TypeScript + JSX)** - це розширення синтаксису JSX,
що додає **статичну типізацію** за допомогою TypeScript.

Файл `.tsx` - це той самий JSX, але TypeScript знає типи всіх елементів, пропів, хуків і контекстів.

Приклад:

```javascript
type Props = {
  name: string;
};

function Hello({ name }: Props) {
  return <h1>Hello, {name}</h1>;
}

// Коректно
<Hello name="Tim" />;

// Помилка компіляції - тип не відповідає
<Hello name={42} />;
```

> TSX додає "мозок" до JSX:
> він знає, що `name` має бути рядком, і одразу попередить про порушення типу.

---

## 4. Ключові відмінності JSX і TSX

| Особливість | JSX | TSX |
|---|---|---|
| Мова | JavaScript | TypeScript |
| Типізація | Немає (динамічна) | Є (статична) |
| Перевірка пропів | Лише під час виконання | На етапі компіляції |
| Підказки IDE | Обмежені | Повні (props, state, контексти) |
| Безпека | Низька | Висока |
| Використання у великих проєктах | Зазвичай у прототипах | Стандарт де-факто |

---

## 5. Як компілятор їх обробляє

- **JSX** -> компілюється Babel'ом -> чистий JS.
- **TSX** -> компілюється TypeScript'ом -> JS з видаленими типами + JSX -> потім Babel чи SWC перетворює в JS.

TypeScript просто **відкидає типи** при компіляції,
у продакшн-коді типів немає, але всі перевірки виконуються заздалегідь.

---

## 6. Коли використовувати який

| Сценарій | Що обрати |
|---|---|
| Швидкий прототип / демо-компонент | `.jsx` (якщо TS не налаштований) |
| Будь-який продакшн-проєкт | `.tsx` |
| Спільна розробка / великий код | `.tsx` |
| UI-бібліотека, дизайн-система | `.tsx` (обов'язково) |
| Старий проєкт на JS | `.jsx` (або поступово мігрувати в `.tsx`) |

---

## 7. Приклад порівняння JSX vs TSX

### JSX:

```javascript
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// Помилки лише в рантаймі
<Button label={42} />;
```

### TSX:

```javascript
type ButtonProps = {
  label: string;
  onClick: () => void;
};

function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

// Помилка вже під час збірки
<Button label={42} />; // label має бути рядком
```

---

## 8. Висновок

| Параметр | **JSX** | **TSX** |
|---|---|---|
| Типізація | Немає | Є |
| Перевірка пропів і стану | У рантаймі | На етапі компіляції |
| Автодоповнення в IDE | Обмежене | Повне |
| Безпека і передбачуваність | Низька | Висока |
| Підтримка React 18 API | Часткова | Повна |
| Рекомендація для нових проєктів | Не рекомендується | Обов'язково |

---

> Коротко:
>
> - **JSX** - просто синтаксичний цукор для React.
> - **TSX** - той самий JSX, але з типами, безпекою й інтелектом TypeScript.
>
> Тому в сучасних React-застосунках майже все пишеться в `.tsx` -
> це стандарт, що забезпечує якість, автодоповнення і передбачувану поведінку коду.

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

Для рев’юера

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

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