Difference between tsconfig.json and tsconfig.build.json

Question

Many guides (e.g. 1, 2) on setting up NPM monorepos for a TypeScript project instruct having two separate files at the root level, tsconfig.json and tsconfig.build.json.

What are the differences between these files? Can they be combined into one file tsconfig.json? I've also seen tsconfig.app.json and tsconfig.base.json in other posts, are .app/.build/.base built-in signifiers, or can you put arbitrary words (e.g. tsconfig.foo.json)?

Answer 1

By default, tsc looks up tsconfig.json in the current folder. If not found, then the parent folder, the parent of parent folder, and so on. As well as resolution mechanism of package.json if you are familiar with Node.js.

When you need different configurations, multiple files can be defined. That's why your project has tsconfig.json and tsconfig.build.json. Usually, tsconfig.json is used by default and tsconfig.build.json is used with tsc -b, which means only compiling those out-of-date files to save time. In order to make those files easy to be maintained, you can use extends in them. Refer to TS offical website.

You can also put arbitrary words or any file names like my-best-config.json, as long as sending it to tsc explicitly. Another good example is webpack, which also has very similar configuration way.

Answer 2

The official TypeScript documentation shows how to use the configuration file.

In general, when TypeScript transpiles to JavaScript, it uses a configuration file that sometimes you want to transpile some part of your project instead of transpiling all at once.

For example for production environment transpile the whole src folder and not the test folder, but in development environment you want to transpile src and the test folder.

You can review what the official documentation explains about this in the following link:

TypeScript Oficial documentation