Soltan Soltanli's Blog

Setting Up TypeScript

Setting Up TypeScript

Achieve TS => Start to Develop Advanced

Soltan Soltanli's photo
Soltan Soltanli
·

3 min read

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

What is TypeScript?
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.

1. Getting Started
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 :)

2. Installing TypeScript
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

3. Setting Up Project
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",
    ...
    }
}

4. Let's Code and Run!
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 :)

Set NPM Script (Optional)
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

Conclusion
To summarize, we have learned that how to set up TS project.
So there is not reason to use pure JS anymore :)
Learn more about TypeScript: typescriptlang.org
GitHub link of Demo Project: github.com/s-s01tan/setting-up-typescript

Everything you can do with js, you can do with ts...

Node.jsTypeScriptJavaScriptnpm