The TypeScript compiler (tsc) and its configuration file tsconfig.json control how your TypeScript code is compiled to JavaScript. This post walks through setting up the TypeScript compiler, key tsconfig.json options like target, strict, module, and outDir, and best practices for configuring TypeScript projects.
Configuring the TypeScript Compiler
First, open the terminal in VSCode and create a folder called hello-world or something. And then type cd hello-word or your folder name.
Type the below command in the terminal:
tsc --init
Then we can get tsconfig.json in the project folder. We do no need to know all the values in this tsconfig.json. But we have to know some of the configuration values.
in tsconfig.json :
/* Modules */
"rootDir": "./",
This rootDir is specify the root folder. So, we create src folder and then create index.ts file under src folder. Then we change
From
"rootDir" : "./"
To
"rootDir" : "./src"
Another configuration key is outDir under Emit section. We can see in tsconfig.json as below:
"outDir" : "./",
When we compile typescript files, javascript files will be stored in dist or distributable folder. So, we can update outDir like below:
"outDir": "./dist",
Another thing is we have to uncomment some comments.
"removeComments" : true,
"noEmitOnError" : true,
After done above steps, go back to the terminal and run the below command:
tsc
Then we can see the javascript file in dist folder.
Frequently Asked Questions
What is tsconfig.json?
tsconfig.json is the TypeScript project configuration file that specifies the root files and compiler options required to compile a TypeScript project, including the output target JavaScript version and strictness settings.
What does the strict option do in tsconfig.json?
Enabling strict mode in tsconfig.json turns on a set of strict type-checking options including strictNullChecks, noImplicitAny, and others, helping you write more robust, bug-free TypeScript code.