React и TypeScript: как настроить и использовать в проекте

Короткий ответ: React TypeScript — это React-проект, где компоненты, props, state, события и API-ответы описаны типами. Файлы с JSX обычно имеют расширение .tsx, а TypeScript помогает поймать ошибки до запуска приложения: неверный prop, неправильный тип state, пропущенное поле объекта или некорректный обработчик события

Если проект уже создан, минимальная установка такая:

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

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

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

Содержание

Минимальный компонент
Настройка tsconfig
Типизация useState
Типизация событий
Когда использовать type и interface
Частые ошибки
Как переводить React-проект постепенно
Самопроверка
Что почитать дальше по TypeScript

Минимальный компонент

type ButtonProps = {
  title: string;
  disabled?: boolean;
};

function Button({ title, disabled = false }: ButtonProps) {
  return <button disabled={disabled}>{title}</button>;
}

export default function App() {
  return <Button title="Сохранить" />;
}

Если написать:

<Button title={123} />

TypeScript покажет ошибку, потому что title должен быть строкой

Настройка tsconfig

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

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

В большинстве современных шаблонов tsconfig.json создается автоматически. Но если React-проект переводится с JavaScript на TypeScript, проверьте jsx, strict и наличие DOM-типов

Типизация useState

Для простого state TypeScript часто сам выводит тип:

const [name, setName] = useState("");

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

type User = {
  id: number;
  name: string;
};

const [users, setUsers] = useState<User[]>([]);

Для статуса:

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

const [status, setStatus] = useState<Status>("idle");

Теперь нельзя случайно установить status в "done", если такого значения нет в типе

Типизация событий

Для input:

import type { ChangeEvent } from "react";

function handleChange(event: ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

Если обработчик пишется прямо в JSX, TypeScript часто сам понимает тип:

<input onChange={(event) => setName(event.target.value)} />

Но в вынесенных функциях тип лучше указать

Когда использовать type и interface

Для props можно использовать оба варианта:

type CardProps = {
  title: string;
};

или:

interface CardProps {
  title: string;
}

Для большинства React-компонентов это вопрос стиля команды. Главное — не использовать any там, где можно описать форму данных

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

Первая ошибка — писать JSX в .ts вместо .tsx

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

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

Четвертая ошибка — типизировать API-ответ как any и потом удивляться ошибкам в UI

Пятая ошибка — усложнять типы раньше времени. Для новичка лучше начать с props, state и событий, а generic-компоненты разбирать позже

Как переводить React-проект постепенно

Если проект уже большой, не обязательно переписывать все за один день. Начните с файлов, где меньше зависимостей:

utils.ts
types.ts
простые компоненты
формы
страницы с API

Затем переводите компоненты с props. В местах, где данные приходят из API, сначала заведите тип ответа, а потом уже типизируйте state. Такой порядок снижает хаос: вы не спорите сразу со всем проектом, а шаг за шагом уточняете границы данных

Хороший первый результат — проект собирается, основные props описаны, any не размазан по всем компонентам, а ошибки TypeScript понятны и локальны

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

Создайте компонент UserCard с props { name: string; age?: number }. Передайте name={123} и убедитесь, что TypeScript подсветил ошибку. Затем создайте useState<User[]>([]) и попробуйте добавить объект без id

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

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