Чим JSX відрізняється від TSX?

ReactJunior~2 хв читання

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 - це стандарт, що забезпечує якість, автодоповнення і передбачувану поведінку коду.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.