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:

TypeScript Project Structure

TypeScript Project Structure

I’ve app and 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 extend option.

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.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger