Добавление typescript в существующий проект react

Эта заметка поможет вам понять, как добавить typescript в существующий проект Create React App и начать писать новые файлы в typescript. Я использую npm в качестве менеджера пакетов, но для вас не будет проблемой использовать yarn или какой-либо другой способ.

Если вы не используете Redux, выполните только шаги под номерами 1, 2 и 7.

Основные шаги

1) Установим необходимые пакеты через терминал[1].

npm i --save typescript @types/node @types/react 
npm i --save @types/react-dom @types/jest
npm install --save-dev @tsconfig/node16
npm i @typescript-eslint/parser
Войдите в полноэкранный режим Выйти из полноэкранного режима

2) Создаем файл tsconfig.json вручную или с помощью команды терминала и заполняем его моим примером файла

tsc --init
Войти в полноэкранный режим Выйти из полноэкранного режима
{
 "$schema": "https://json.schemastore.org/tsconfig",
 "display": "Node 16",
 "extends": "@tsconfig/node16/tsconfig.json",
 "compilerOptions": {
   "target": "ES2022",
   "lib": [
     "dom",
     "dom.iterable",
     "ES2022"
   ],
   "allowJs": true,
   "skipLibCheck": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "noFallthroughCasesInSwitch": true,
   "module": "es2022",
   "moduleResolution": "node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx",
   "typeRoots": [
     "src/@types"
   ]
 },
 "include": [
   "src"
 ]
}
Войти в полноэкранный режим Выйти из полноэкранного режима

$schema, display и extends ничего не устанавливают в файл tsconfig. Они лишь ведут к интерактивному списку опций со значениями, которые могут присутствовать в tsconfig.json. Другими словами, вам придется добавлять конфигурацию, глядя на схему[2][3].

Моя IDE меняет модуль с es2022 на esnext. Не волнуйтесь, если вы увидите это в панели уведомлений вашей IDE.

typeRoots содержит путь к файлу с состоянием приложения useSelector по умолчанию (объяснение вы найдете позже). Сотрите typeRoots из файла, если вы не используете Redux.

3) Пропустите этот шаг, если вы не используете Redux.

Пришло время изменить расширение имени файла индекса react-redux с .js на .ts (ваш файл может иметь другое имя). После этого замените

export default combineReducers({
   ...yourReducers
});
Войти в полноэкранный режим Выйти из полноэкранного режима

на

export const reducers = combineReducers({
   ...yourReducers
})

export type AppState = ReturnType<typeof reducers>;
Войти в полноэкранный режим Выйти из полноэкранного режима

Объяснение назначения AppState будет позже.

4) Этот раздел необходим для разработчиков, использующих Redux.

Измените файл store.js (ваш файл реализации может иметь другое имя). Вам нужно будет заменить

import reducers from './reducers';
Войти в полноэкранный режим Выйти из полноэкранного режима

на

import { reducers } from './reducers/index.ts';
Войти в полноэкранный режим Выйти из полноэкранного режима

5) Пожалуйста, проигнорируйте этот шаг, если вы не используете redux.

А текущий шаг требует создания файла react-app-env.d.ts (src/react-app-env.d.ts)[4].

/// <reference types="react-scripts" />
Вход в полноэкранный режим Выйти из полноэкранного режима

6) Этот файл не нужен для пользователей не-redux.

Добавьте файл по пути src/@types/react-redux.d.ts следующим кодом

import 'react-redux';

import { AppState } from '../reducers';

declare module 'react-redux' {
   interface DefaultRootState extends AppState {}
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Несмотря на то, что AppState больше нигде не используется, это позволяет не импортировать состояние app reducers в метод useSelector каждый раз, и метод всегда знает возвращаемое значение типа аргумента[5].

7) Ну и последний шаг — модификация файла ESlint:

  • Изменить парсер
"parser": "@typescript-eslint/parser",
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Изменить параметры синтаксического анализатора
"parserOptions": {
   "ecmaVersion": "latest",
   ...rest code
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Обновить окружение
"env": {
   "es2021": true,
   ...rest code
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Измените правила для отключения предупреждений или ошибок для неиспользуемого кода (только по вашему выбору), удаления ошибки о расширениях файлов typescript (код будет работать и без этого правила, но вы увидите неприятное сообщение) и удаления предупреждения об отсутствии реквизитов по умолчанию
"rules": {
   "no-use-before-define": "off",
   "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
   "react/require-default-props": "off"
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Заключение

Должен предупредить, что импорт файлов с расширениями .ts и .tsx теперь обязателен (игнорировать его можно только в созданном приложением create-react-app). Недостатком является то, что живая перезагрузка может быть нарушена, и вам придется каждый раз перезагружать страницу вручную.

Источники

[1] Добавление TypeScript
[2] Что такое tsconfig.json
[3] базовая конфигурация tsconfig.json
[4] Для чего нужен react-app-env.d.ts в проекте react typescript
[5] TS2339: Свойство ‘tsReducer’ не существует для типа ‘DefaultRootState’

Оцените статью
devanswers.ru
Добавить комментарий