Create React App и TypeScript: как установить, запустить и п

Короткий ответ: чтобы создать React-проект с TypeScript через Create React App, выполните npx create-react-app my-app --template typescript, затем перейдите в папку проекта и запустите npm start. Но для нового проекта важно знать нюанс: Create React App считается устаревающим стартовым вариантом, а React-документация сейчас чаще направляет к современным сборщикам и фреймворкам. Поэтому ниже покажу команду для CRA и практичную альтернативу через Vite

Содержание

Вариант 1: Create React App с TypeScript
Проверка, что TypeScript действительно работает
Вариант 2: современный React + TypeScript через Vite
Что означает template typescript
Частые ошибки
Какой вариант выбрать
Следующий шаг
Что почитать дальше по TypeScript

Вариант 1: Create React App с TypeScript

Команда для проекта:

npx create-react-app my-app --template typescript
cd my-app
npm start

После запуска откройте адрес из терминала, обычно это http://localhost:3000. Если страница React открылась, проект создан

Внутри вы увидите файлы с расширением .tsx:

my-app/
  src/
    App.tsx
    index.tsx
  package.json
  tsconfig.json

.tsx используется там, где TypeScript-код содержит JSX-разметку. Обычные TypeScript-файлы без JSX можно хранить как .ts

Проверка, что TypeScript действительно работает

Откройте src/App.tsx и добавьте типизированную переменную:

type User = {
  name: string;
  role: "student" | "developer";
};

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

function App() {
  return (
    <main>
      <h1>React + TypeScript</h1>
      <p>{user.name}: {user.role}</p>
    </main>
  );
}

export default App;

Теперь намеренно допустите ошибку:

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

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

Вариант 2: современный React + TypeScript через Vite

Если вы не обязаны использовать Create React App, для нового учебного или рабочего проекта часто удобнее Vite:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

После запуска Vite покажет локальный адрес, обычно http://localhost:5173. Структура будет похожей, но старт и пересборка обычно быстрее:

my-app/
  src/
    App.tsx
    main.tsx
  package.json
  tsconfig.json
  vite.config.ts

Для SEO-материала по запросу create react app typescript важно не прятать CRA-команду: пользователь пришел именно за ней. Но в тексте полезно объяснить, что для новых проектов есть более современный путь

Что означает template typescript

Флаг --template typescript говорит Create React App создать проект сразу с TypeScript-настройками: .tsx-файлами, tsconfig.json и зависимостями для типизации React

Без этого флага CRA создаст JavaScript-проект. Его тоже можно перевести на TypeScript, но новичку проще стартовать сразу с шаблона

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

npx: command not found или похожая ошибка означает, что не установлен Node.js/npm или терминал не видит их в PATH. Проверьте node -v и npm -v

Если команда долго висит, проблема может быть в сети, прокси или доступе к npm-пакетам. Попробуйте повторить позже или проверить npm registry

Если проект создан, но npm start не запускается, убедитесь, что вы находитесь внутри папки проекта. Частая ситуация: пользователь выполнил npx create-react-app my-app --template typescript, но не сделал cd my-app

Если TypeScript не подсвечивает ошибки, проверьте, что файл имеет расширение .tsx или .ts, а не .js

Какой вариант выбрать

Create React App стоит использовать, если вы проходите старый курс, поддерживаете существующий проект или вам прямо нужна совместимость с CRA-шаблоном

Vite лучше выбрать, если вы создаете новый проект без жесткой привязки к старому гайду. Команда короче по смыслу, запуск быстрый, а шаблон react-ts сразу дает TypeScript

Следующий шаг

После создания проекта сделайте маленькую практику: создайте компонент UserCard.tsx, опишите тип UserCardProps и передайте в компонент имя и роль пользователя. Если TypeScript начнет ловить неправильные props, значит React + TypeScript настроены правильно

Больше связанных материалов удобно держать внутри рубрики TypeScript: установка через npm, подключение TypeScript к HTML, компилятор tsc, настройка tsconfig.json и практические задачи на React