tsconfig.json generator: strict mode, target and module
Create a tsconfig.json for a Node or browser TypeScript project, with strict mode, target and output folder.
tsconfig.json tells the TypeScript compiler which files to read, how strict to be and where to put the JavaScript. Choose your options, save the file in your project folder and run tsc.
Create your config file
Type your own values. The file below updates as you type, and nothing you type leaves your browser.
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"sourceMap": true,
"esModuleInterop": true,
"rootDir": "src",
"outDir": "dist",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}How this setup works
Step-by-step setup
- Install TypeScript in your project: npm install --save-dev typescript.
- Save the file above as tsconfig.json in the project folder.
- Put your code in src, for example src/index.ts.
- Compile: npx tsc. The JavaScript appears in dist.
- Run it: node dist/index.js. For quick runs without compiling, try npx tsx src/index.ts.
What the important lines mean
- strict turns on all the strict checks together. It catches many bugs, and it is best to start a new project with it on.
- target is the JavaScript version written to the output.
- module and moduleResolution decide how imports are written and found. Match them to where the code runs.
- include lists the folders tsc reads.
Common errors and how to fix them
- TS5083: Cannot read file tsconfig.json
- The file is missing or in another folder. Run tsc from the folder that holds it, or pass it with tsc -p path.
- TS2307: Cannot find module
- The package has no types or the import path is wrong. Install the types with npm install --save-dev @types/package, and with NodeNext write imports with the .js extension.
- TS6059: File is not under rootDir
- A file outside the source folder was included. Move it inside, or change rootDir and include.
- TS5110: Option module must be set to NodeNext when moduleResolution is NodeNext
- The two options must match. Keep both on NodeNext, or both on a bundler setup.
- Cannot use JSX unless the jsx flag is provided
- Tick the JSX option, and name your files .tsx.
Frequently asked questions
- What does strict mode do?
- It turns on a group of checks: no implicit any, strict null checks, strict function types and more. It makes the compiler report mistakes that would otherwise show up as runtime errors.
- Which module setting should I pick?
- NodeNext for code that runs in Node.js. ESNext with a bundler for a front-end app built with Vite or webpack. CommonJS only for older projects.
- Do I need tsc if I use Vite?
- Vite strips the types but does not check them. Run tsc --noEmit as a check, and use this file for editor support.
Fix a problem with this setup
- npm EACCES permission deniedFix npm "EACCES: permission denied, mkdir /usr/local/lib/node_modules" without sudo: change the npm folder, use nvm or fix ownership.
More developer configs
- SSH config for multiple GitHub accountsUse two or three GitHub accounts on one computer with separate SSH keys and host names.
- SSH config fileGive servers short names and choose the right key for each.
- .gitconfig setupSet your name, email, default branch and shortcuts once.
- .env file exampleCreate a .env file for your app: port, database address and a secret key.
- VS Code settings.jsonSet font, tab size, format on save and theme in your VS Code settings.
- .bashrc and .zshrc aliasesAdd handy shortcuts and settings to your terminal.