Getting started with TypeScript: Setup and Intro

TypeScript is the super set of JavaScript that is TypeScript offers all of the JavaScript features plus additional features like Type Checking and more. In this article, we'll explore Why and How To's of TypeScript and set up the environment to get started.

Introduction

TypeScript is superset of JavaScript developed by MicroSoft. However our browser does not understand TypeScript but it compiles the TypeScript code to JavaScript which is then run by our browser. It is designed for development of large applications since it is easily integrated into JS projects. Many Popular Front-end JS Libraries like React and Vue provides support for TypeScript and if you've heard of Angular, it uses TypeScript as native and all the documentations and most of the resources on StackOverflow is provided in TS. So TypeScript is definitely worth Learning.

Offerings

TypeScript provides us with Static Type Checking. For example, JavaScript provides language primitives like string, number, and object, but it doesn’t check that you’ve consistently assigned these. TypeScript does. It also provides us with Class based Objects so that developers coming from any other high level programming language like Java or Python background can blend right-in. It also helps us to write more Modular code.

Getting Started

Now, to get started, we first have to install TypeScript which is available as a npm package. So considering you've npm installed you can simply install it by typing

npm i -g typescript

Now, as i talked earlier the .ts file is compiled into .js file then only it can be executed. so if we create a file named index.ts and write some code in it, then it will take 2 steps to execute it.

tsc index.ts
node index.js

Now, to cut this process in one step we're gonna have to install one more package called TS-Node.

npm i -g ts-node

To compile typescript and run the resulting js code, we can simply do:

ts-node index.ts

Now, lets write some typescript code in our index.ts file.

let a: string;
a = "Hello world";
console.log(a);

Now, try to assign variable 'a' to a number or a boolean, you'll get error in the terminal. Also if you're using VS-Code as a Text editor, you'll see red-line under the variable and if you hover over it, you'll get error message saying 'type number is not assignable to type string'. This is what type checking. The advantages of TypeChecking is that it makes our code more readable and descriptive. Also Helps us find and prevent bus and stop future issues from happening.

Now, lets define a static type checking function.

function addNum(num1: number, num2: number): number {
  return num1 + num2;
}

This is how, we define a function in TypeScript. Lets explore some more features like Classes.

class User {
  name: string;
  email: string;
  age: number;

  constructor(name: string, email: string, age: number) {
    this.name = name;
    this.email = email;
    this.age = age;

    console.log(name, email, age);
  }
}

let Rajan = new User("rajan", "[e-mail]", 23);

That is it for the basics. Now for the next step, you can visit the official documentation of Typescript

Thanks for Reading !!