Как отключить проверку TypeScript для .js компонентов в React

При постепенной типизации React-проекта часто возникает ситуация: вы создаёте новый компонент на TypeScript (.tsx), но он импортирует старый JavaScript-компонент (.js). Сборщик ломается, потому что TypeScript проверяет не только сам .js файл, но и всё дерево его дочерних компонентов. В этой статье разберём, как настроить компилятор, чтобы избежать этих ошибок без ручной типизации десятков файлов.

Почему TypeScript проверяет .js файлы?

По умолчанию, если в tsconfig.json установлен флаг allowJs: true, TypeScript включает JavaScript-файлы в процесс компиляции. При этом checkJs: false должен отключать проверку типов в .js файлах, но на практике это не всегда срабатывает, особенно если .js файлы импортируются в .tsx. Ошибки могут всплывать из-за настроек strict: true или неявного наследования проверок через цепочку импортов.

Настройка tsconfig.json для отключения проверки

Чтобы TypeScript не проверял типы в JavaScript-файлах, используйте следующие параметры:

• allowJs: true - разрешает импорт .js файлов в .tsx.
• checkJs: false - отключает проверку типов в .js файлах.
• exclude: ['node_modules', '**/*.js'] - исключает все .js файлы из компиляции.

В вашем конфиге уже есть эти настройки, но проблема может быть в том, что exclude не обрабатывает .js файлы, которые импортируются из .tsx. TypeScript всё равно анализирует их для разрешения модулей. Попробуйте добавить skipLibCheck: true - это ускорит сборку и частично снизит количество ошибок.

Проверка цепочки импортов

Если .js компонент импортирует другие .js файлы, TypeScript может проверять и их. Чтобы это исправить, добавьте в compilerOptions:

"noImplicitAny": false,
"strictNullChecks": false

Но лучшее решение - использовать // @ts-nocheck в начале каждого .js файла, который вызывает проблемы. Это отключает проверку для конкретного файла, не затрагивая остальные.

Альтернативные подходы

Если проблема массовая, рассмотрите вариант: оберните все .js компоненты в файлы-прокладки с расширением .d.ts. Создайте декларации типов для импортируемых модулей. Например:

// components/oldComponent.d.ts
declare module 'components/oldComponent' {
  const OldComponent: React.FC;
  export default OldComponent;
}

Это скажет TypeScript, что модуль существует, и он не будет лезть в исходный .js файл.

Почему @ts-ignore не помогает?

Директива // @ts-ignore работает только на следующей строке, но не отключает проверку всего файла или цепочки импортов. Если ошибка возникает в дочернем компоненте, который импортируется внутри .js файла, @ts-ignore в .tsx не поможет. Используйте // @ts-nocheck в начале .js файла.

Пример рабочего tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "strict": false,
    "esModuleInterop": true,
    "baseUrl": "./"
  },
  "exclude": [
    "node_modules",
    "**/*.js"
  ]
}

Этот конфиг отключает строгую проверку и игнорирует .js файлы, что должно решить проблему при постепенной типизации.