DEV Community

Cover image for Setting up and configuring the TypeScript Compiler(simplified).
Peter Wainaina
Peter Wainaina

Posted on

Setting up and configuring the TypeScript Compiler(simplified).

Typescript is essentially JavaScript with type checking. Web browsers don't 'recognize' TypeScript and this makes it necessary that TypeScript code has to be compiled and translated into JavaScript, a process called Transpilation.

Setting up the typescript Compiler.
This is simply done by creating a configuration file for the TypeScript compiler.
On a terminal(in the same directory as the typescript project), type tsc --init and voila, a file with the name tsconfig.json appears in your project folder.
Configuring the typescript Compiler.
The typeScript compiler has quite a number of lines of code, if so to speak. This may be a bit scary for a novice, like it was for my case but fear not! You do not necessarily need to know what each and everyone of them does, well at least not for now. If you are curious to know anyway,each of them has an explanation on the right as to what their functions are, preety handy if you ask me.
There are a few changes that you need to make on the tsconfig.json file so that your typescript code will be compiled efficiently:

  1. in the /Module/ section, uncomment rootDir (ctrl + /) and include the path "./src". This means you have to create a folder named src as indicated in the path and then transfer your TypeScript file into this folder.

Image description

  1. In /Emit/ section, uncomment outDir (this specifies the directory that will contain the JavaScript file)and write the path as "/.dist" (distributable folder) and this will be where our JavaScript files are going to be stored after being compiled using the typescript Compiler.

Image description

  1. Still in the /Emit/ section, uncomment "removeComments" which is just below outDir and this will make the TypeSript compiler remove all the comments added in the TypeScript code, making the JavaScript code generated shorter.

Image description

  1. Still in the /Emit/ section, uncomment "noEmitOnError" and this makes the typescript compiler not generate any JavaScript code if there is any error in the TypeScript code. This is very helpful as your compiled code will almost always be 'clean code'.

Image description

These few tweaks will get you started in writing and compiling your TypeScript code. I hope it will be of help, happy coding!

Top comments (0)