tsconfig for beginners

In plain English

The tsconfig file tells the TypeScript compiler how to behave. The strict flag turns on a bundle of checks that catch more mistakes, including accidental null and any. The target flag decides which JavaScript version the compiler emits, so newer targets keep newer syntax and older targets rewrite it. The module flag decides how files import and export each other. The noUncheckedIndexedAccess flag makes every array or record lookup possibly undefined, so you must handle a missing value before using it.

Step by step

1. 1Open or create a tsconfig.json at the root of your project.
2. 2Set strict to true and fix the errors it reports.
3. 3Set target to the JavaScript version your environment supports.
4. 4Set module to match your bundler, often ESNext.
5. 5Turn on noUncheckedIndexedAccess and handle undefined lookups.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "noUncheckedIndexedAccess": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Common mistakes

• Turning off strict to clear errors hides real bugs instead of fixing them.
• Setting target to a version newer than your runtime means your users get syntax their browser cannot run.
• Forgetting noUncheckedIndexedAccess lets a missing array item crash at runtime instead of at compile time.
• Changing module without updating your imports can break how files load each other.