What is TypeScript, Why and how to use it?

What is TypeScript, Why and how to use it?

TypeScript, a Syntactic sugar on top of JavaScript

You might have heard many senior JavaScript developers talking about typescript, and praising about the benefits of using it.

What is so special in TypeScript that it is being used by over 13.3M+ developer worldwide, as per GitHub statistics?

We will go through all the details of TypeScript in this blog series. I will write a small blog regularly in this series, and each blog will consist a small dose of TypeScript, which you can take on easily without getting overwhelmed of learning.

The Definition:

As per official website,

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Do you remember the days when you were learning programming languages, and you got to know about C Programming, C++ and Java!

Well, if you have ever done programming in any one of these three programming language, you are already aware of data types.

Whenever you declare some variable, you used to specify the data type of that variable in C or C++ or Java.

These are strictly typed languages, you can not just define a variable like you do in JavaScript or Python, because Python & JavaScript are considered dynamically typed languages which means, interpreter will figure out the type of variable on the fly and might change in runtime.

There are advantage of using dynamically typed languages like Python & JavaScript, it gives you flexibility, and speed while writing code, you can focus on the solution rather than fixing a Type Error.

But this is not it, once your code start getting complex, you will face debugging related issues. Debugging becomes trickier in dynamically typed languages, sometimes the error is random.

This is when TypeScript came into picture, TypeScript is nothing but a superset of JavaScript, which has everything JavaScript consists of, but add the power of defining types in your JavaScript code.

Why TypeScript?

Since the dawn of the Web, JavaScript is dominating the Web, you can not assume a dynamic website or a Web Application without JavaScript. So you can not change the whole programming language to introduce a typed programming language for web, hence, TypeScript was borne inside Microsoft.

Initially, they were using it internally as a tool on top of JavaScript to add static type and type annotation for large scale applications. TypeScript was first announced by Microsoft in October 2012, with Anders Hejlsberg, the creator of C# and Turbo Pascal, leading the project.

Typescript will not make your program faster, Typescript is meant for developers, it helps developer write clean and maintainable code.

TypeScript helps developer to avoid unintentional blind code, which is full of bugs and will start breaking once you run it in production.

Typescript is nothing but a syntactic sugar on top of JavaScript.

How to use TypeScript?

Enough talk, we will see some code examples of TypeScript here. But before that I want to write some points which I feel important to know for any beginner.

  1. TypeScript is not compatible with browsers. You will write your code in .ts files and Typescript compiler will compile it into .js file which can be easily run in any browser.

  2. To compile Typescript code, you have to download a compiler from here.

  3. Any .js file can be run by Typescript, as Typescript is a superset of JavaScript, which means it is meant to be compatible with TypeScript.

  4. In a Typescript project, you can import a JavaScript file into a Typescript file or vice versa. Both the cases are possible.

Let’s see come JavaScript & Typescript example and compare both codes:

var name = "Danger"
console.log("Hello, " + name)

name = 234

So in the above JavaScript code, you can reassign a value after assigning once, but in TypeScript it’s a bit different case:

var name: string = "Danger"
console.log("Hello, " + name)
name = 234   // This line will throw error

As you can see in the above TypeScript code, it will throw error on line no. 3, because first we have initialized the name variable with string using Typescript type annotation, but later we are assigning the number value to name, resulting your code into an error.

This was a basic type example of Typescript, in the next blogs we will get to know some more insights of TypeScript, like everyday types, interfaces, enums, mixins, generics, module augmentation and most importantly the usage of TypeScript into a React project.

I hope you have learned something from this blog, write your thoughts in the comments as it will help me write better blogs in future.

Happy Learning!


https://www.typescriptlang.org/why-create-typescript https://www.typescriptlang.org/docs/


Did you find this article valuable?

Support Dev.Junction by becoming a sponsor. Any amount is appreciated!