The tsconfig.json file can be scary! Over all those years, dozens of options and settings have been added - and trying to make sense of them all is almost impossible.

Thankfully, you really don't need to understand them all, though!

Very often, you'll be working in a project created with build tools like Vite which create a fitting tsconfig.json file for you.

If you DO want to understand some of the settings you see in those generated tsconfig.json files, the official reference can be helpful.

And if you need a basic tsconfig.json file because you're working in a project that doesn't come with one, you can consider using this one (also available here and described in greater detail here):

{
  "target": "ES2022", // Good for modern browsers or Node.js
  "compilerOptions": {
    "esModuleInterop": true, // Ensures ESM and CJS imports work together well
    "skipLibCheck": true, // Ensures .d.ts files from 3rd libraries are not type-checked
    "target": "es2022", // Sets a relatively modern ECMAScript version as compilation target
    "allowJs": true, // Allows importing .js files into .ts (helpful when migrating projects)
    "strict": true, // Ensures strict type checking (i.e., noImplicitAny etc)
    "noUncheckedIndexedAccess": true, // Adds undefined as a value when accessing by index
    // "noImplicitOverride": true, // Enable this when working with classes & inheritance
    "noUnusedLocals": true, // to avoid unused variables
    "module": "NodeNext", // Supports both ESM & CJS modules / imports
    "outDir": "dist", // Store compiled files in "dist" folder
    "sourceMap": true, // Enables source maps for easier debugging
    "lib": ["es2022", "dom", "dom.iterable"] // Or without "dom" libs when building for Node
  }
}

The above configuration will likely NOT work when using third-party build tools or bundlers - but, again, if you are using such tools, you'll typically also use them or some helper tools to create projects with a pre-defined tsconfig.json file.