Create React App (CRA) — популярный инструмент для быстрой настройки проекта React со всеми необходимыми зависимостями и конфигурациями. По умолчанию CRA использует JavaScript в качестве языка программирования. Однако если вы предпочитаете статическую типизацию и дополнительные функции, предлагаемые TypeScript, интеграция TypeScript в проект Create React App не вызывает затруднений. В этой статье мы рассмотрим несколько методов добавления TypeScript в приложение Create React, а также примеры кода, иллюстрирующие каждый метод.

Метод 1. Создание нового проекта TypeScript с помощью CRA

1. Откройте терминал и перейдите в каталог, в котором вы хотите создать проект.
2. Выполните следующую команду, чтобы создать новый проект Create React App на основе TypeScript:

   npx create-react-app my-app --template typescript

3. Подождите, пока проект будет создан. После завершения перейдите в каталог проекта:

   cd my-app

4. Запустите сервер разработки:

   npm start

   Ваш проект откроется в браузере, и вы сможете начать писать код TypeScript.

Метод 2: добавление TypeScript в существующий проект JavaScript

1. Если у вас уже есть проект Create React App на JavaScript, вы можете добавить TypeScript, выполнив следующие действия.
2. Откройте терминал и перейдите в каталог проекта.
3. Установите необходимые зависимости TypeScript:

   npm install --save typescript @types/node @types/react @types/react-dom @types/jest

4. Переименуйте файл src/App.jsв src/App.tsx. Это изменение отражает новое расширение TypeScript.
5. Обновите файл src/index.jsдо src/index.tsx.
6. Перезапустите сервер разработки, чтобы применить изменения:

   npm start

Метод 3. Преобразование файлов JavaScript в TypeScript

1. Если вы предпочитаете постепенно конвертировать файлы JavaScript в TypeScript, вы можете воспользоваться этим подходом.
2. Переименуйте файл JavaScript в .tsx, чтобы указать, что он содержит код TypeScript.
3. Начните добавлять в преобразованный файл синтаксис, специфичный для TypeScript, например аннотации типов и интерфейсы.
4. Повторяйте этот процесс для других файлов JavaScript в вашем проекте, пока вы не перенесете их все на TypeScript.

Метод 4: использование пакета react-scripts-ts

1. Другой способ добавить TypeScript в приложение Create React — использовать пакет react-scripts-ts.
2. Откройте терминал и перейдите в каталог проекта.
3. Установите пакет react-scripts-ts:

   npm install react-scripts-ts

4. Обновите раздел сценариев в файле package.json:

   "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test",
    "eject": "react-scripts-ts eject"
   }

5. Переименуйте файл src/App.jsв src/App.tsx.
6. Перезапустите сервер разработки:

   npm start

В этой статье мы рассмотрели несколько методов добавления TypeScript в проекты создания приложений React. Независимо от того, начинаете ли вы новый проект или уже имеете существующий проект JavaScript, вы можете легко интегрировать TypeScript и воспользоваться преимуществами его статической типизации и расширенных инструментов. Добавление TypeScript в приложение Create React позволяет повысить производительность разработки, улучшить качество кода и упростить совместную работу внутри вашей команды.

Приняв TypeScript, вы сможете создавать надежные и удобные в обслуживании приложения React. Начните экспериментировать с TypeScript в Create React App сегодня и ощутите преимущества, которые он приносит в ваш рабочий процесс разработки.