tsconfig.json

Learning objectives#

• Read and edit a tsconfig.json
• Choose target, module and lib
• Set up input and output folders
• Pick sensible settings for apps vs libraries
• Extend a shared base config

Explanation#

target: which JavaScript version to output (ES2022 is a safe modern choice). lib: which built-in APIs exist (e.g. DOM for browsers).

module and moduleResolution: how imports work. For bundled apps (Vite) use "ESNext" + "bundler". For Node.js use "NodeNext" for both.

include, rootDir and outDir: which files to check and where to write output. With a bundler, set noEmit: true — the bundler emits the JavaScript.

strict: true enables all the strict checks — always on for new projects. Extra safety: noUncheckedIndexedAccess, noImplicitOverride, noUnusedLocals.

Other useful options: sourceMap (debug original .ts), paths (import aliases), esModuleInterop, skipLibCheck (faster builds), extends (share a base config).

Code example: A modern tsconfig for a Vite / React app#

1{
2  "compilerOptions": {
3    "target": "ES2022",
4    "lib": ["ES2022", "DOM", "DOM.Iterable"],
5    "module": "ESNext",
6    "moduleResolution": "bundler",
7    "jsx": "react-jsx",
8

9    "strict": true,
10    "noUncheckedIndexedAccess": true,
11    "noImplicitOverride": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true,
14

15    "noEmit": true,
16    "isolatedModules": true,
17    "verbatimModuleSyntax": true,
18    "skipLibCheck": true,
19

20    "baseUrl": ".",
21    "paths": { "@/*": ["src/*"] }
22  },
23  "include": ["src"]
24}

TypeScript checks every file in src/ with strict rules and modern browser APIs. Vite handles the actual compilation, so tsc only type-checks (noEmit).

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. target ES2022 outputs modern syntax that all current browsers support.
2. lib includes DOM so document and window are typed.
3. ESNext + bundler matches how Vite resolves imports; jsx enables React’s JSX transform.
4. strict and the extra flags catch the most bugs.
5. noEmit because Vite builds the files; isolatedModules and verbatimModuleSyntax keep code compatible with fast single-file compilers.
6. paths defines the @/ alias; include limits checking to src/.

Real-world use case#

Common mistakes#

Best practices#

• Always enable strict
• Use noEmit when a bundler compiles your code
• Use NodeNext for Node.js projects
• Share settings across packages with "extends"
• Run tsc --noEmit in CI

Remember this#

Practice exercise#

1{
2  "compilerOptions": {
3    "target": "ES2022",
4    "module": "NodeNext",
5    "moduleResolution": "NodeNext",
6    "rootDir": "src",
7    "outDir": "dist",
8    "strict": true,
9    "sourceMap": true,
10    "esModuleInterop": true,
11    "skipLibCheck": true
12  },
13  "include": ["src"]
14}

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.