A Typescript TsConfig file is like the brain of the project.
Firstly, the presence of the file indicates that the directory containing it is the root of a Typescript project. Secondly, the options in the tsconfig.json file control the compilation of the Typescript application.
We will look at some of the major options in this post. If you are from Javascript background and are exploring Typescript, you can read this post about what makes Typescript different.
1 – How to create Typescript TsConfig File (tsconfig.json)
While we can create the file manually and start filling it with the required options, it might not be the most efficient approach.
We can create a default tsconfig.json file within our project using the below commands:
$ cd typescript-demo
$ npm install typescript --save-dev
$ npx tsc --init
Created a new tsconfig.json with:
TS
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
For your information tsc is the Typescript compiler. We first install it for our project and then use npx to initialize the project.
The –init command will basically generate a tsconfig.json file with some default configuration options.
2 – Typescript TsConfig Compiler Options
Some of the key options we can configure in the tsconfig.json file are as follows:
| Compiler Option | Usage |
|---|---|
| module | The output module type. It can be CommonJS, ES6, ES2015. Default value is CommonJS if target |
| target | Specify ECMAScript target version. The default value is ES3 which supports very old browsers |
| alwaysStrict | Enables strict mode and emit use strict for each source file. Default value is false unless specified. |
| outDir | The path where the transpiled files should be stored |
| watch | Whenever a source file is modified, it re-triggers the compile process |
| outFile | Bundles all output files into one file at the given location |
| allowJS | This flag is used to allow javascript files |
| forceConsistentCasingInFileNames | This forces consistent casing in imports. |
3 – Files Option for Typescript TsConfig
We can also include particular files using files option. See below example:
{
"compilerOptions": {},
"files": [
"utilities.ts",
"binder.ts",
"program.ts"
]
}This is an allow list of files to be included in the program. An error is thrown if any of the files is not found. This approach is suitable for a small number of files.
4 – Include and Exclude Option
In case we want to include or exclude a large number of files, we need to use include and exclude options.
See below example:
{
"compilerOptions": {},
"include": [
"src/**/*",
"typings/*.d.ts"
],
"exclude": [
"node_modules"
"application"
"dist"
]
}Include and exclude allow us to deal with larger groups of files by using glob. As the name suggests, this option will add or remove files from the compilation process.
Conclusion
This post gives us a basic look into the role of Typescript TsConfig file.
This file helps us customize the compilation process with various options. We looked at some of the key options available to use.
Want to explore more about Typescript? Check out this detailed post explaining the type system of Typescript.
If you have any comments or queries about it, please feel free to mention in the comments section below.
0 Comments