Typescript in 5 mins

Have you ever heard about Typescript. Well, these days I am hearing a lot about it. All the interviews which I attend asks me, whether am I familiar with Typescript or not ? Though it was not mandatory in most cases, but i was fed up listening this term called ‘Typescript’.

I am very comfortable building web apps with Vanila Javascript using React, Vue etc.., I love building web apps with Plain Javascript as this does not made me think much. But this ‘Typescript’ made me to think, as why every one is thinking about building web apps in ‘Typescript’. What is special about it ?.

Well, every Developer knows, how Javascript made lives easy when it comes to look and feel of the websites which we use on internet, how they made life easy and lite weight by building mobile apps in Javascript flavours like React Native.

The advent of Node.js changed the thinking of developers, it gave flexibility for writing the backend services in Javascript.

But Why we need Typescript in place of Javascript ? Well, Typescript is Superset of Javascript (which is also called as ECMAScript.). What does this mean ?. Typescript has been developed on top of Javascript. What ever you write in Javascript and keep in Typescript file, will work exactly same, as Typescript never consider any working Javascript’s code to be error. Then here comes the difference, Typescript is a static type checker.

What does a Static Type Checker do ?

Typescript checks the program before execution. It detects the errors before it executes. consider the below example :

Javascript :

Here in alert the value of data.name is displayed as “undefined”.

Typescript :

Here in the above TS code, it throws error stating that Property name does not exist in the object data.

What’s makes the difference ? Javascript never validates, whether is there any object property called name, it simply returns undefined if key name is not found. But TS throws error, even before compiling.

Consider the following piece of code in Javascript :

Here the value type of the color is modified from String to Number. Many programming languages throws error, but Javascript allows changing the type of a variable at any point of time in its scope. And Typescript solves this problem. Let’s write the above in Typescript format.

The above explains how TS is checking for type of the variable. color variable’s type is declared as string. and given a value orange, later, the color variable is assigned a value with type number. TS here expects the value of color should always be string and hence throws error Type ‘number’ is not assignable to type ‘string .

There are many good concepts to learn if we go through the Typescript Site. A few important topics to remember and points to be noted …

  1. The three most common primitives are : number, string, boolean.
  2. Type annotations on variables
  3. Parameter Annotations
  4. Return type Annotations
  5. Object types and Optional properties
  6. Union Types , for defining different Types to a single variable at initialisation.
  7. ‘type’ aliases
  8. Interfaces : note : Interfaces and Type Aliases are almost equal, the only difference is Interface is extendable, where Type Alias structure cannot be extended. In short, a type cannot be changed after creation, while an Interface can.
  9. classes and so on …

Hope you enjoyed this small introduction of ‘Typescript’. Do follow for more updates.