A tsconfig.json file keeps TypeScript compiler settings with a project. When you run tsc, the compiler reads the configuration, finds the source files, and generates JavaScript. Keeping source and output in separate folders makes it clear which files to edit: change the .ts files, not the generated .js files, which the next compilation can overwrite. section 5.4 section 2.2.4
Listing 2.6 The contents of the tsconfig.json file in the todo folder
{
"compilerOptions": {
"target": "ES2022",
"outDir": "./dist",
"rootDir": "./src",
"module": "CommonJS"
}
}
A small project configuration sets an ES2022 JavaScript target, reads TypeScript from src, writes JavaScript to dist, and uses CommonJS modules. section 2.2.2
The compilerOptions object groups settings that control compilation. target selects a JavaScript version; rootDir and outDir locate the source and output folders; module selects a module format. With the configuration above, run tsc in the project folder, then run the result with node dist/index.js. TypeScript syntax may disappear from the generated JavaScript even when the program’s behavior stays the same. section 2.2.2 section 2.2.4 section 5.4
Other settings address specific project needs:
- Use top-level files to name compilation inputs, or include and exclude to select them by pattern. Run tsc --listFiles to check what the compiler selected, including type declarations. section 5.4
- Set declaration to true when generated type declaration files are needed alongside JavaScript files. section 10.1
- Set module to Node16 when the module format should follow Node.js behavior and the project’s package.json configuration. section 14.1 section 15.1
In an Angular project, tsconfig.json remains visible even when webpack handles the output as a bundle. Its experimentalDecorators setting enables decorators required by Angular. Change this file carefully: a compiler-setting change can break the wider toolchain, and most Angular project changes belong in angular.json. section 18.2.1
