Чтобы добавить TypeScript в существующий проект React, вы можете использовать несколько методов. Вот некоторые из наиболее распространенных из них, а также примеры кода:

Метод 1: настройка вручную

1. Установить TypeScript как зависимость от разработчика:

   npm install --save-dev typescript

2. Переименуйте файлы JavaScript в файлы TypeScript (например, .jsв .tsили .jsxв .tsx).
3. Создайте файл tsconfig.jsonв корневом каталоге проекта:

   {
   "compilerOptions": {
   "jsx": "react",
   "esModuleInterop": true,
   "allowJs": true,
   "moduleResolution": "node",
   "noEmit": true,
   "strict": true,
   "target": "es6"
   },
   "include": ["src"]
   }

4. Начните конвертировать свой код JavaScript в TypeScript, добавляя при необходимости аннотации типов.

Метод 2. Создание приложения React с использованием шаблона TypeScript

1. Если вы использовали Create React App (CRA) для загрузки проекта, вы можете добавить поддержку TypeScript, используя шаблон TypeScript:

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

   При этом будет создан новый проект React с предварительно настроенным TypeScript.

Метод 3: сценарий миграции TypeScript

1. Используйте инструмент миграции, например ts-migrate, чтобы автоматически преобразовать код JavaScript в TypeScript:

   npx ts-migrate your-js-directory --js=your-js-directory --overwrite

   Этот инструмент сгенерирует файлы TypeScript на основе существующего кода JavaScript.

Метод 4: плагин TypeScript ESLint

1. Если вы уже используете ESLint, вы можете добавить плагин typescript-eslint, чтобы включить проверку TypeScript:

   npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. Обновите конфигурацию ESLint (.eslintrc.jsили .eslintrc.json), включив в нее правила TypeScript:

   {
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
   "extends": [
   "eslint:recommended",
   "plugin:@typescript-eslint/recommended"
   ]
   }