Compiler Options

Definition

The specific settings nested inside `"compilerOptions"` in `tsconfig.json` that dictate how TypeScript emits JavaScript, performs type checking, and handles JSX.

Explain Like I'm New

If `tsconfig.json` is the rulebook, the Compiler Options are the individual dials and switches. You can turn a dial to say 'Compile JSX for React', turn another switch to say 'Do not allow unused variables', and flip a switch that says 'Output source maps for debugging'.

Real World Example

Changing `"jsx": "preserve"` (used with Next.js which handles its own JSX compilation) vs `"jsx": "react-jsx"` (standard React 17+ compilation).

Common Use Cases

•Tailoring TS to specific frameworks (React, Node, Vue)
•Enforcing code quality rules

Interactive Example

Console output will appear here...

Interview Questions

basic

What does the `target` option do?

intermediate

What is the difference between `noUnusedLocals` and `noUnusedParameters`?

advanced

What does `isolatedModules` do and why do tools like Vite/Babel require it?

Flash Cards

Question

What does 'target' do?

Click to reveal answer

Answer

It specifies the ECMAScript version of the compiled JavaScript. E.g., `ES5` (old browsers) or `ESNext` (latest Node.js).

Question

What does isolatedModules do?

Click to reveal answer

Answer

Compilers like Babel or Vite (esbuild) compile files one at a time, completely ignoring other files in the project. They cannot safely compile things like `const enum` because they don't have access to the whole project's type system. `isolatedModules: true` forces TypeScript to warn you if you write code that a single-file compiler cannot handle.