tsconfig.json Compiler Options & Config Template
Last updated: 2026-10-22
tsconfig.json Compiler Options & Config Template
tsconfig.json is the master switch of a TypeScript project: placed at the project root, it tells the compiler (tsc) which files to build and how. strict is the most important option — one flag enables the whole strict family (strictNullChecks, noImplicitAny, ...), catching most null and type hazards at compile time.
| Group | Engineering & Practice |
|---|---|
| Kind | Config |
| Strict mode | Not required |
ℹ️ Info The editor transpiles TypeScript to JavaScript and runs it (no type checking); see each example's Output for type-check results.
📝 Syntax
// tsconfig.json (minimal strict config)
{
"compilerOptions": {
"target": "ES2020", // JS language version of the output
"module": "commonjs", // module format (commonjs for Node, ESNext for bundlers)
"outDir": "./dist", // output directory
"rootDir": "./src", // root of the sources
"paths": { "@utils/*": ["./src/utils/*"] }, // module path aliases
"strict": true // enable the whole strict family at once
},
"include": ["src"] // only compile files under src
}⚙️ Parameters
| strict | Master switch for strict checking: enables strictNullChecks, noImplicitAny, strictFunctionTypes and more; just turn it on in new projects |
|---|---|
| target / module | target picks the output JS language version (built-in types follow it); module picks the output module format |
| outDir / rootDir / paths | Output dir / source root / path aliases. paths is a compile-time name mapping only — runtime resolution still needs bundler or Node subpath config |
Returns：None — tsconfig.json is a config file; it only affects compilation and never runs.
▶ Example
Edit the code below and click Try it to see the transpiled result:
Output：
length = 5
sum = 5
(Runtime output after transpilation; type checking is done by tsc — removing the ?? fallback yields error TS18047, dropping the parameter annotations on sum yields error TS7006)💡 Notes
ℹ️ Info strict is not a single check but a bundle: strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, useUnknownInCatchVariables and more.
💡 Tip Bootstrap new projects with tsc --init and prune the template; keep paths aliases in sync with your bundler aliases (Vite/webpack) or compilation passes while the runtime fails to resolve modules.
⚠️ Note Legacy codebases need not adopt strict in one go: enable strictNullChecks alone first, fix incrementally, then flip on the full strict once the tree is clean.
🏷️ Related Engineering & Practice
💡 Related cases
More cases coming soon.
📚 Related tutorials
❓ FAQ
Q What exactly does strict: true enable?
A It bundles several checks: strictNullChecks (explicit null/undefined handling), noImplicitAny (no implicit any), strictFunctionTypes (contravariant function params), strictPropertyInitialization (class fields must be initialized), useUnknownInCatchVariables (catch variables are unknown), etc. You can disable individual ones for gradual migration.
Q What is the difference between target and module?
A target controls downleveling of syntax to a JS version (ES2020 supports optional chaining); module controls the emitted module system (commonjs / ESNext / node16). target governs language features; module governs how import/export is emitted.
Q I set up paths aliases but the runtime cannot find the modules — why?
A paths is a compiler-only name mapping; the emitted code keeps the alias untouched. The runtime must know it too: configure Vite/webpack resolve.alias for bundler projects, or use the package.json imports field (or a runtime patch like tsconfig-paths) for plain Node.
