App.tsx: что это за файл и как добавить TypeScript в React

Короткий ответ: App.tsx — это обычно главный React-компонент приложения, написанный на TypeScript. Расширение .tsx используют для файлов, где TypeScript совмещается с JSX-разметкой. Если файл содержит React-компонент с тегами вроде <div>, ему нужен .tsx, а не просто .ts

Пример:

export default function App() {
  return <h1>Привет, React и TypeScript</h1>;
}

Такой файл может быть входной точкой интерфейса или главным компонентом, который собирает остальные части страницы

Содержание

Чем .tsx отличается от .ts
Как выглядит App.tsx
Типизация props
Типизация state
Как добавить TypeScript в React
Что должно быть в tsconfig
Частые ошибки
Самопроверка
Что почитать дальше по TypeScript

Чем .tsx отличается от .ts

.ts используют для обычного TypeScript-кода:

export function sum(a: number, b: number): number {
  return a + b;
}

.tsx используют, когда в файле есть JSX:

export function Button() {
  return <button>Нажать</button>;
}

Если написать JSX в .ts, сборщик или TypeScript обычно покажет ошибку парсинга

Как выглядит App.tsx

type User = {
  name: string;
  role: "admin" | "user";
};

const user: User = {
  name: "Dinar",
  role: "admin",
};

export default function App() {
  return (
    <main>
      <h1>{user.name}</h1>
      <p>Роль: {user.role}</p>
    </main>
  );
}

Здесь TypeScript проверяет объект user, а React отображает JSX

Типизация props

Если внутри App.tsx есть дочерний компонент:

type UserCardProps = {
  name: string;
  age?: number;
};

function UserCard({ name, age }: UserCardProps) {
  return (
    <section>
      <h2>{name}</h2>
      {age !== undefined && <p>Возраст: {age}</p>}
    </section>
  );
}

export default function App() {
  return <UserCard name="Dinar" age={30} />;
}

Если передать age="30" строкой, TypeScript подскажет ошибку, потому что ожидается number

Типизация state

import { useState } from "react";

type Status = "idle" | "loading" | "success" | "error";

export default function App() {
  const [status, setStatus] = useState<Status>("idle");

  return (
    <button onClick={() => setStatus("loading")}>
      {status}
    </button>
  );
}

Для простых значений TypeScript часто сам выводит тип. Но для union-типов и пустых массивов лучше указать тип явно

Как добавить TypeScript в React

Если проект уже на React, обычно нужны TypeScript и типы React:

npm install -D typescript @types/react @types/react-dom

Затем файлы с JSX переименовывают:

App.jsx -> App.tsx
main.jsx -> main.tsx

И добавляют tsconfig.json. В современных шаблонах Vite, Next.js и других фреймворках это часто делается автоматически

Что должно быть в tsconfig

Для React важна настройка jsx:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "target": "ES2022",
    "module": "ESNext"
  }
}

Если jsx настроен неправильно, TypeScript может не понять JSX-разметку

Частые ошибки

Первая ошибка — оставить JSX в файле .ts. Переименуйте в .tsx

Вторая ошибка — забыть установить @types/react и @types/react-dom

Третья ошибка — типизировать props как any. Тогда смысл TypeScript в React почти пропадает

Четвертая ошибка — хранить слишком много логики в App.tsx. Главный компонент лучше использовать как сборку страницы, а формы, карточки и списки выносить в отдельные компоненты

Пятая ошибка — думать, что App.tsx обязан называться именно так. Это распространенное имя, но технически компонент может называться иначе

Самопроверка

Создайте компонент UserCard, передайте ему name: string и age?: number, затем попробуйте передать age="30". Если TypeScript показывает ошибку, .tsx, props и типы работают правильно

Что почитать дальше по TypeScript

Если нужен общий маршрут по теме, откройте рубрику TypeScript. Для соседних задач пригодятся эти разборы: