Choose a starting preset, adjust the compiler options and get a clean tsconfig.json with comments. Every option you enable is explained in plain words, and conflicting settings such as a module and moduleResolution mismatch are flagged before tsc complains.
Last updated:
tsconfig.json
What each option does
Advertisement
Advertisement
How to use the tsconfig.json Generator
Pick a preset that matches your project: Node.js ESM or CommonJS, a React + Vite app, a publishable library or the strictest setup.
Adjust language and modules: the JavaScript target, built-in libs, module format and resolution strategy, and JSX mode.
Choose type checks and emit options such as strict, noUncheckedIndexedAccess, outDir, declaration files and source maps.
Add path aliases like @/* ./src/* and set include/exclude folders.
Read the notes and explanations, then copy or download tsconfig.json into your project root and run npx tsc --noEmit.
Matching module and moduleResolution
Most confusing tsconfig errors come from a module and moduleResolution pair that does not fit how the code actually runs. These combinations are the ones TypeScript recommends:
Project
module
moduleResolution
Typical extras
Node.js runs the compiled JS (ESM or CJS)
NodeNext
NodeNext (or omit)
outDir, types: ["node"], .js extensions in imports
App built by Vite, webpack, esbuild, Parcel
ESNext or Preserve
Bundler
noEmit, isolatedModules, jsx
Older CommonJS-only Node.js project
CommonJS
Node10
esModuleInterop
Library published to npm
NodeNext
NodeNext
declaration, declarationMap, sourceMap
Code run by tsx, ts-node, Bun or Deno
Preserve or ESNext
Bundler
noEmit, allowImportingTsExtensions
Choosing a target
target
Notable syntax kept as-is
Good for
ES2017
async / await
Older browsers and Node 8+
ES2020
optional chaining ?., nullish ??, BigInt
Evergreen browsers, Node 14+
ES2022
class fields, #private, top-level await, .at()
Node 16.11+ / 18+, current browsers
ES2023+
array findLast, toSorted and similar APIs (via lib)
Node 20+ and recent browsers
ESNext
Everything the TypeScript version supports
Code that another tool transpiles later
Remember that target changes syntax only. Runtime APIs such as Array.prototype.at are not polyfilled; lib merely declares that they exist.
Tips for a healthy config
Start strict. Enabling strict on day one costs little; adding it to a large existing code base can surface hundreds of errors.
Use extends for shared settings. Monorepos often keep a tsconfig.base.json and let each package use "extends": "../../tsconfig.base.json".
Check what is included.npx tsc --listFilesOnly prints every file in the program, and npx tsc --showConfig prints the final merged options.
Keep build and type-check apart. In bundled apps, let the bundler emit JavaScript and run tsc --noEmit in CI to catch type errors.
Frequently asked questions
What is tsconfig.json?
tsconfig.json is the configuration file of a TypeScript project. Its compilerOptions tell the TypeScript compiler (tsc) and your editor which JavaScript version to emit, how modules are resolved and which type checks to run, while include and exclude decide which files belong to the project.
Which moduleResolution should I use?
Use NodeNext (with module NodeNext) for code that Node.js runs directly, because it follows Node's real rules including package.json exports and required .js extensions. Use Bundler (with module ESNext or Preserve) for apps built by Vite, webpack, esbuild or similar tools. Node10 is the legacy CommonJS algorithm and ignores exports maps.
What does strict: true enable?
strict turns on a family of checks: strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables and alwaysStrict. New strict options added in later TypeScript versions are included automatically. Extra checks such as noUncheckedIndexedAccess are not part of strict and must be enabled separately.
Why do my path aliases work in the editor but fail at runtime?
paths only tells TypeScript how to find types; tsc does not rewrite import paths in the emitted JavaScript. Configure the same alias in your bundler (for example Vite resolve.alias), use package.json imports with # aliases, or a runtime helper such as tsconfig-paths.
Do I need baseUrl for paths?
No. Since TypeScript 4.1, paths can be used without baseUrl and are resolved relative to the tsconfig.json file. baseUrl also makes every bare import resolvable from that folder, which can hide mistakes, so new projects usually leave it out.
Why does TypeScript ask for .js extensions in my imports?
With module and moduleResolution set to Node16 or NodeNext, ES module files follow Node.js rules, which require full relative paths. You write import './util.js' even though the source file is util.ts, because that is the file that will exist after compilation.
Can a tsconfig.json contain comments?
Yes. TypeScript reads tsconfig.json as JSON with comments, so // and /* */ comments and trailing commas are accepted. Some other tools that read the file as strict JSON may not accept comments; turn the Comments option off if you need plain JSON.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.