What is the purpose of using tsconfig.json file ?

tsconfig.json file allows you to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root.

Here is an example tsconfig.json file.

{
"compileOnSave": true,
"compilerOptions": {
        "target": "es5",
		"module": "system",
		"moduleResolution": "node",
		"noImplicitAny": true,
		"sourceMap": true,
        "removeComments": false
},
	"files": [
		"program.ts",
		"sys.ts"
	],
	"include": [
		"src/**/*"
	],
	"exclude": [
		"node_modules",
		"src/**/*.spec.ts"
	]
}

Lets understand what each option specifies:

• compileOnSave: If sets true, it instructs the IDE to automatically compile the given TypeScript files and generate the output.
• compilerOptions: It allows specifying additional options to the TypeScript compiler:
  • target: the language used for the compiled output, e.g. es5, es6.
  • module: the module manager used in the compiled output. system is for SystemJS, commonjs for CommonJS.
  • moduleResolution: the strategy used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))
  • noImplicitAny: if sets false, Raise error on expressions and declarations with an implied any type.
  • sourceMap: if sets true, it will generate source map files to debug directly your application TypeScript files in the browser,
  • removeComments: if set, Remove all comments except copy-right header comments beginning with /*!
• files: Gives a list of TypeScript files that will be included by the compiler. The URL of the files can be both relative or absolute.
• include: Allows you to include a list of TypeScript files using the glob wildcards pattern.
• exclude: Allows you to exclude a list of TypeScript files using the glob wildcards pattern.

Install TypeScript compiler in VS Code

If you need to run the typescript from VS Code terminal you need to install the typescript compiler either globally or in your workspace.

This typescript compiler will transpile the TypeScript code to JavaScript.

Following are the steps we need to install and compile TypeScript in VS Code.

• Install node.js Package Manager (npm).
• Install TypeScript globally (-g) by this command:

  npm install -g typescript
  

• If want to install TypeScript locally in a single project, you can use this command:

  npm install --save-dev typescript
  

• Test your install by checking the version.

  tsc --version
  

TypeScript HelloWorld:

Let's start with a simple Hello World example. Create a new folder HelloWorld and open in VS Code.

mkdir HelloWorld
cd HelloWorld
code .

Create a new file called helloworld.ts.

Add the following TypeScript code in helloworld.ts file.

let message: string = 'Hello World';
console.log(message);

To compile the TypeScript code, you can open the Integrated Terminal (Ctrl+`)

Run this command to compile helloworld.ts

tsc helloworld.ts

It will create a new helloworld.js JavaScript file in the same folder.

To run the javascript file, you can use this command:

node helloworld.js

It will run the javascript code and display the script output in console.