tsconfig.json and Compiler Options

🧑‍🏫 Sabse pehle — simple mein samjho#

TypeScript ka ek "Constitution" (Samvidhan) hota hai, jise tsconfig.json kehte hain. Is file mein saare rules likhe hote hain ki TypeScript tumhare JS code pe kitni sakhthi (strictness) karega, compiler ko kitna modern code chahiye, aur output kahan save hoga. Agar is file mein configurations nahi set ki gayi, toh TS apne default settings pe kaam karta hai.

1. strict: true (The Most Important Rule 🚨)#

If you only want to understand one single line in your tsconfig, let it be this one. Setting "strict": true turns on the highest level of strictness in TS checks. Without this, much of TS's true power is wasted. It automatically flips several sub-rules to true:

• noImplicitAny: true: If you don't explicitly type a parameter and TS fails to infer it, it defaults to any. This rule throws an error in that exact scenario — "Please provide a type explicitly!".
• strictNullChecks: true: Normally, TS ignores null and undefined. Enabling this forces TS to warn you: "This value might be null, you must wrap it in an IF condition to check it first". (This is the rule responsible for throwing the Object is possibly 'null' error on DOM nodes).

2. Target and Module (Compilation Settings)#

"target"#

This informs the TS compiler which version of JavaScript it should convert your .ts files into.

• "target": "ES5" (For older browsers like IE11 - results in a larger output file size)
• "target": "ES2015" or "ES6" (The modern baseline)
• "target": "ESNext" (The absolute latest JS version - this is Vite's default)

"module"#

This dictates what module system (import/export vs require) the compiled JS output will use.

• For Browser/React applications: "ESNext"
• For Node.js (CommonJS) environments: "CommonJS"

3. "jsx"#

If you are using .tsx files in React, this setting is mandatory.

• "jsx": "react" (Converts JSX code into React.createElement calls)
• "jsx": "react-jsx" (Designed for React 17+'s new JSX transform — Vite automatically configures this for you).

4. "include" and "exclude"#

You have to tell TypeScript exactly which files to read and which to completely ignore.

{
  "compilerOptions": { ... },
  "include": ["src/**/*"], // All files inside the Src folder will be compiled
  "exclude": ["node_modules", "dist", "**/*.spec.ts"] // Ignore these folders/files
}

Note: If node_modules is not excluded, the TS compiler will mistakenly try to type-check every single library installed in your project, drastically slowing down the compilation process.

5. "lib"#

This tells TS which internal, global APIs it should be aware of (like window, document, DOM, Array.map). In a standard React setup, you will mostly see: "lib": ["dom", "dom.iterable", "esnext"]. If this isn't set, TS will throw errors on common browser properties, complaining "I don't know what this is".