How to make most of compiler configuration inheritance in TypeScript?
TypeScript is quite amazing and so is it’s compiler. There are many customisable options available with this compiler. In this post, I’ll explain you how to make most of compiler configuration inheritance in TypeScript.
TypeScript Compiler & Tsconfig.json file
The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The TypeScript’s compiler application is named as
tsc.exe and there are basically two ways to run this compiler.
One way is to pass arguments while running this compiler using command prompt. The other way is to have a file named
tsconfig.json in your project and define the compiler related options that you expect compiler to use while compiling your project’s TypeScript code.
It is certainly possible to have only one
tsconfig.json in whole project but it can get hard to manage if your project is big or if a module needs to be compiled slight differently compared to another module(s). Let us look at following sample project structure:
core folder as sample but consider a big project with more modules that will have separate folder per module. It is also possible that there are separate teams or team members working simultaneously on those modules. These modules may have different requirements of compilation.
It will be really good for these modules to share common compiler options and extend or override as and when required which doesn’t interfere with other modules.
Just to achieve this, I’ve created a file at root level named as
tsconfig.base.json that has compiler configuration that will apply to all the modules. Other modules may have another
tsconfig.json that extends this base config file by using
Let us look at the configuration option defined in both files below. The base file has quite generic options and the other one extends the base as well as define a single file to output the compiled code of all the TypeScript files inside that folder.
This is really a good way to extend configuration by reusing the generic options and extend wherever require. I hope this post explains how to make most of compiler configuration inheritance in TypeScript.