tsconfig.json для React + TypeScript

Готовый tsconfig.json для проекта на React + TypeScript с Vite — строгий режим, JSX, алиасы путей.

Задача

Настроить TypeScript так, чтобы он понимал JSX, работал со строгой проверкой типов и не ругался на импорты .tsx-файлов. Нужен готовый конфиг, объясняющий назначение каждой опции.

Решение

tsconfig.json (корень проекта, для IDE и тайпчека):

{
  "compilerOptions": {
    /* Целевая платформа */
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",

    /* JSX */
    "jsx": "react-jsx",        /* автоматический импорт React 17+ */

    /* Строгость */
    "strict": true,            /* включает: strictNullChecks, noImplicitAny и др. */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Совместимость модулей */
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,   /* нужно для Vite/esbuild */

    /* Пути */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]         /* алиас: import { fn } from '@/utils/fn' */
    },

    /* Только проверка типов, не компиляция (Vite компилирует сам) */
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

tsconfig.node.json (для vite.config.ts и других конфигов):

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts"]
}

Алиас в vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
});

Ключевые моменты

  • "moduleResolution": "bundler" — новый режим для Vite/esbuild; позволяет импортировать без расширений и понимает exports в package.json.
  • "isolatedModules": true — каждый файл компилируется отдельно, как делает esbuild; блокирует конструкции, несовместимые с этим подходом.
  • "noEmit": true — TypeScript только проверяет типы; компиляцию в JS делает Vite.
  • "jsx": "react-jsx" — автоматический import React (React 17+); "react" требует ручного импорта в каждом файле.

Варианты

  • @tsconfig/strictest — готовый пресет максимальной строгости: npm install -D @tsconfig/strictest, затем "extends": "@tsconfig/strictest".
  • Для Next.js — свой конфиг, генерируется автоматически при create-next-app.

Связанные рецепты / темы