TypeScript Beginning
Tags: typescript, javascript, ts, beginners
Published: 2022-10-28 16:20:03

## Introduction

TypeScript is **JavaScript** with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Official website: [TypeScriptLang](https://www.typescriptlang.org/)
First Release: Oct 2012
Creator: Microsoft ( **Anders Hejlsberg** creator of C# )

---

## Prerequisits

In order to learn **TypeScript** efficitively you need to have **basic** knowledge of **JavaScript** and its **package managers**.

- JavaScriptm Basics
- Node js installed
- JavaScript Package Manager

---

## Installation and basics

**TypeScript** can be installed using **JavaScript** package managers, i.e, **npm or yarn** and **-g** flag to install it globally.

```bash
	npm install typescript -g
```

For compiling the TypeScript file to JavaScript:

```bash
	tsc <filemane>.ts
```

If you want your JavaScript filename different from your TypeScript file:

```bash
	tsc <filemane>.ts <outputFileName>.js
```

If you want your TypeScript file to auto recompile:

```bash
	tsc <filename>.ts -w
```


## Understanding tsconfig.json

For initialization of `tsconfig.json`
```bash
	tsc --init
```

Now, the tsconfig.json file appears in your root `/` directory.

Firstly we need to specify the `root` directory for our project which is commented by default.
Search for `rootDir` in `tsconfig.json`, uncomment it and specify the directory where your **TypeScript** files to be located. In my case, I will be creating all TypeScript files inside `src` directory.

```json
	"compilerOptions":{
	//other settings here
		"rootDir": "./src",
	}
```

Similarly, we also need compiled output of **TypeScript** file as **JavaScript** file, for that we need to specify output directory in `tsconfig.json`
Search for `outDir` in `tsconfig.json`, uncomment it and specify your output directory after compilation. In my case, I have made `build` directory and `js` directory.

```json
	"compilerOptions":{
	//other settings here
		"outDir": "./build/js",
	}
```

If you want your **TypeScript** files to be compiled inside specific directory i.e, `/src` you need to add some setting in your `tsconfig.json` file in the end, and final `tsconfig.json` looks like

```json
	{
	"compilerOptions":{
	//all other settings here
	},
	"include": [
	"src"
	]
	}
```


After all these configurations in our `tsconfig.json` we should make sure we include all **TypeScript** files inside `/src` directory and look for compiled files in `/build/js` according to our configuration in our `tsconfig.json`

For constantly monitoring for change in our `/src` directory

```bash
	tsc -w
```

Till the terminal is closed or killed, **TypeScript** will constantly monitor the changes in `/src` directory and produce output inside `/build/js`

My folder structure after all these settings and a file

>`Project`
> 	- `build`
> 		- `js`
> 			- `main.js`
> 		- `index.html`
> 	- `src`
> 		- `main.ts`
> 	- `tsconfig.json`

Another killer **TypeScript** feature is it can compile your `.ts` file into any version of **JavaScript** `.js` file

```json
	"compilerOptions":{
	//other settings here
		"target": "es2016",
	}
```
 
 By default, `target` is set to `es2016` but you can compile to any version of **JavaScript**, i.e, `'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022',...`

If you remove `.ts` file from `/src` then the compiled file in `/build/js` should be removed manually.

To prevent auto compiling of the TypeScript file with error, for which we are using **TypeScript**, we need to enable `noEmitOnError` feature in `tsconfig.json` by uncommenting that specific line

```json
	"compilerOptions":{
	//other settings here
		"noEmitOnError": true,
	}
```

Now only valid **TypeScript** files will be compiled to **JavaScript** file.