Difference between tsconfig.json and tsconfig.build.json – Typescript

by
Ali Hasan
npm nx-monorepo react-typescript

Quick Fix: By default, tsc looks for tsconfig.json in the current folder. If not found, it looks in the parent folder, and so on. 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 only compiles out-of-date files to save time. To maintain these files easily, use extends in them. Refer to the TS official website for more information.

The Problem:

A TypeScript project uses two configuration files, tsconfig.json and tsconfig.build.json, but the distinction between them is unclear. Is it possible to merge these files into a single tsconfig.json? What is the significance of the .app, .build, and .base suffixes used in some configurations?

The Solutions:

Solution 1: Configuration Differences

By default, tsc searches for tsconfig.json in the current directory and proceeds upwards if not found. This is similar to the resolution mechanism of package.json in Node.js.

To accommodate different configurations, multiple tsconfig files can be defined. Typically, tsconfig.json is used as the default, while tsconfig.build.json is invoked with tsc -b. This setup allows for selective compilation of outdated files, optimizing for quicker build times.

To simplify maintenance, these files can leverage the extends mechanism, as documented on the official TypeScript website.

Extension and Customization

Arbitrary file names or words can be used in tsconfig files, such as my-best-config.json. However, these files must be explicitly provided to tsc. This approach is similar to the configuration mechanism in webpack.

Q&A

Difference between tsconfig.json and tsconfig.build.json

Usually, tsconfig.json is used by default and tsconfig.build.json is used only when out-of-date files need to be compiled to save time.

Can we combine tsconfig.json and tsconfig.build.json to one file only tsconfig.json or can we use any arbitrary file name *.json?

Yes, you can combine them or use different files, You can name them with any file name (*.json), but it must be specified when you send it to tsc explicitly.

Video Explanation:

The following video, titled "TypeScript Basics 22 - Using tsconfig json file - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

Access the full course here: https://javabrains.io/courses/typescript_basics Learn how to use the tsconfig.json file to set teh command line ...