We had been using JavaScript for decades, why do we want to learn a new language? For me, TypeScript makes me feel faster in development because I do not need to care about the browser support and testing on each browser because you can set up the browser target that you wan with typescript. Although this can be achieved with Babel, but TypeScript brings in a lot of new modern features in JS.

Therefore, in this post, I am talking about what is typescript, why typescript and what else typescript offers.

Source

Starting with Typescript

Typescript is language develop by Microsoft. It is a superset of Javascript, meaning that it has more features than Javascript but it still works on all browser.

Typescript will be compiled to Javascript

What is Typescript?

• A typed superset of JS
• Compiles back to JS which is compatible with both Web or Node
• Made up from 3 parts:
  • Language - The language itself
  • Language Service - Helps in developer experience
  • Compiler - Compile to JS (Back to ES3!)
• Seems to be leading the way JS language features

Javascript Types

• null
• undefined
• boolean
• number
• string
• symbol (ES6)

Everything else is extends from Object

Read more on my previous post: JS let, const, var

const, let, var

Read more on my previous post: JS let, const, var

Why add Types?

Since JS is a dynamic language, why do we need types in js?

• JS sometimes operate without explicit instruction to convert primitive value
• prevent run time error (the error move to compile time)
• Suitable for other developer to understand
• Object Oriented concept built in
• Increase your code efficiency because the types system will optimize by the browser.

Example

let length = 2;
length = '3';

Typescript will yell at us: Type 'string' is not assignable to type 'number'.

Therefore, after a variable is assign a type, we should not change it's type.

Get started

Typescript is a Structural Type System, which means TS only cares about the shape of the object instead of checking the whether the variable is an instance of a class or type named.

Object Shape

Imagine a house, there is windows, doors and your house address. Since we know that all these properties had specific data types, we can implement this into TS.

So, to create a house object with typescript, we state how the house object shape.

let myHouse: {windows: number, doors: number, address: string};
myHouse = {
    windows: 10,
    doors: 3,
    address: "17, Jalan Tempat"
}

If the object has excess properties, it should be okay as long as it fits the shape that you declared previously.

let myHouse: {windows: number, doors: number, toilets: number, address: string};
myHouse = {
    windows: 10,
    doors: 3,
    address: "17, Jalan Tempat"
}

To get started

Go to typescript playground

This playground can let you get started with TypeScript quickly. In the left is the code in TypeScript, and on the right is the compiled JavaScript

Alternatively, use Code Runner Plugin in Visual Studio Code

This plugin required 2 global npm package which is ts-node and typescript.

to install:

• npm install -g ts-node or yarn global add ts-node
• npm install -g typescript or yarn global add typescript
  if you are not familiar with npm or yarn, check out my tutorial

Press the play button on VS Code to test out your code without any tsc workflow setup.

This post basically provides you enough to get started with TypeScript by testing all the APIs of TypeScript without setting up all those complicated workflow. Later on, I will create topics on how to setup your workflow with TypeScript.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---