# Setting Up TypeScript

Hi, in this blog we are going to create project on TypeScript.
<br>
Firstly, let's check that what is it and why we should use it?

**What is TypeScript?**
<br>
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. Code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
<hr>
**1. Getting Started**
<br>
To begin, let's create a new folder:
```
$ mkdir test
``` 
Then move to the folder:
```
$ cd test
```
Open this folder in your code editor (I will use VS Code):
```
$ code .
```
Great, we have created the folder and opened in code editor. Now it is code time :)
<hr>
**2. Installing TypeScript**
<br>
TypeScript has to be *globally* installed in our device. So let's install it globally by NPM:
```
$ npm install -g typescript
```
To be sure after installation, you can check the version of TypeScript like:
```
$ tsc --version
```
or
```
$ tsc -v
```
If it has been installed successfully, you will see *the version of TypeScript* as output: (Now it is 4.8.2 for me, but it will be changed probably when you read and implement this)
```
$ Version 4.8.2
```
<hr>
**3. Setting Up Project**
<br>
We have to initialize *npm* and *tsc* in order. I will use *-y* argument to initalize npm in a short way (or you can fill in all inputs manually):
```
$ npm init -y
```
and then
```
$ tsc --init
```
Now check your folder in code editor. You will see that there are 2 files generated (*package.json* and *tsconfig.json*). The configuration of TypeScript locates in *tsconfig.json* file. There are the descriptions of all fields which explain the purpose of them. Now we will add field like *"outDir"* with value of *"dist"*. By doing this, we will specify the folder where we want built JavaScript files to locate.
```
// tsconfig.json
{
"compilerOptions": {
    ...
    "outDir": "dist",
    ...
    }
}
```
<hr>
**4. Let's Code and Run!**
<br>
Create a TypeScript file (*.ts*)
```
$ touch sum.ts
```
Now we will create a function called *sum*, which accepts two parameters and returns the total of them:
```
// sum.ts
const a: number = 1;
const b: number = 7;

function sum(first: number, second: number): number {
  return first + second;
}

const result = sum(1, 7);
console.log("Sum: ", result);
```
Now it is time to compile this file to *.js* and run
```
$ tsc
```
There will now appear *dist* folder which contains *sum.js* (compiled version of *sum.ts*)
```
// dist/sum.js
"use strict";
const a = 1;
const b = 7;
function sum(first, second) {
    return first + second;
}
const result = sum(1, 7);
console.log("Sum: ", result);
```
To run this file
```
$ node ./dist/sum.js
Sum:  8
```
*Abra Cadabra, Done* :) 
<hr>
**Set NPM Script (Optional)**
<br>
It can be annoying to compile *.ts* files, then run the compiled *.js* files. Because of that, I advise you to create new NPM script and execute both of theese operations by one command.
```
// package.json
{
  ...
  "scripts": {
    "start": "rm -rf dist && tsc && node dist/sum.js"
  },
  ...
}
```
Now it is more comfortable to run :)

```
$ npm run start
> test@1.0.0 start
> rm -rf dist && tsc && node dist/sum.js

Sum:  8
```
<hr>
**Conclusion**
<br>
To summarize, we have learned that how to set up TS project.
<br>
So there is not reason to use pure JS anymore :)
<br>
Learn more about TypeScript: https://www.typescriptlang.org
<br>
GitHub link of Demo Project: https://github.com/s-s01tan/setting-up-typescript
<br>
<br>
*Everything you can do with **js**, you can do with **ts**...*