DEV Community

Cover image for Getting started with TypeScript: Setup and Intro
Rajan Prasad
Rajan Prasad

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

ts-node index.ts
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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", "myemail@gmail.com", 23);

Enter fullscreen mode Exit fullscreen mode

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

Thanks for Reading !!

Top comments (0)