Why Typescript? Understand the key benefits of the language.

 

Why Typescript? Understand the key benefits of the language.

Typescript Vs JavaScript

TypeScript is a strongly typed superset of JavaScript compiled to plain JavaScript. It is an open-source framework maintained by Microsoft in 2012.

It primarily provides optional static typing, classes, and interfaces, and one of the key benefits to provide the environment to avoid the common errors as you typed the code, as well as better tooling, is a plus.

 Any valid JavaScript program is also a valid TypeScript program but not the other way around (vice versa).

In this tutorial, you will understand the key benefits of the language. Let’s see typescript in action…

Some common mistakes:

Let’s see some limitations of the JavaScript program and how TypeScript builds on that:

JavaScript program which prints the language name.

In the above JavaScript program, we are just assuming the parameter “name” would be a string. There is nothing in the program to ensure that the parameter “name” is going to be a string or not.

In JavaScript we can pass a “number”, “boolean”, “array” or “Object” anything as parameter “name” to the function in this case. For example

But now let’s convert this “name” parameter to upper case by calling the method “toUpperCase()”.

calling the method “toUpperCase()” from string class in JavaScript.

Because we already assuming that the “name” variable is going to be a “string” type variable and the function is expecting a string variable, there is no problem to call this program and print the language name in upper case.

The language name is TYPESCRIPT

Use Case 1:

Now imagine If we try to call the function by passing a numeric value, or for example by passing a boolean value, What do you think will happened?

Function calling by passing a numeric and boolean value, runtime error.

TypeError: name.toUpperCase is not a function

This is still a valid JavaScript program but If we run this program we will get a runtime error in the result. A typical type of error of JavaScript that everyone faces many times.

JavaScript is a very powerful and flexible language but it also has a few downsides. It’s very easy to commit a mistake in JavaScript during creating the program. This type of error only occurs at run time.

Use Case 2:

Another example of this type of error in JavaScript is that let’s change the name of the variable “langName” to “name”. Still, this is a valid program in JavaScript, nothing wrong with compilation time.

Rename the variable “langName” to “name”, runtime error.

ReferenceError: langName is not defined

But If we run this program in the browser, this time we will get a reference type error “langName is not defined” as you can see in the above program. It’s just because we change the variable name at the top of the program.

How does typescript prevents all these errors and helps better development?

Like the name of the language, Typescript indicates that it has a powerful type system that allows us to detect all these issues in our program at the time of development. Let’s see how TypeScript detect these errors and allows us to fi

Use case 1 (TypeScript Solution):

So, Typescript allows us to add here a type annotation (: string). This type annotation simply tells the language compiler that this parameter “name” is supposed to be a “string” type.

Function call by passing numeric or boolean value, compile time error underline in red.

As you can see after adding the type annotation “string” of parameter “name” in the function, we get a compilation error underlined by red because the argument of type number, boolean, and an array is not assignable to a parameter of type string.

It shows, that we can fix these errors very early in the development cycle.

Use case 2 (TypeScript Solution):

Let’s rename this “langName” to something different like “languageName” variable at the top of the program.

As you can see now, the language compiler gives us the compilation error underlined by red wherever we use this variable in the program. Using TypeScript, you can easily rename your variable without any breaking codes.

Better tooling:

TypeScript features like rename variables is super useful and makes it a lot easier to refactor our code base.

Whenever we use this parameter inside the function, we are going to have some powerful auto-completion functionality that provides all the member variables of the “string” class and more. This advanced and precise auto-completion feature makes it much easier write our program.

All suggested member variables and functions of String class.

Conclusion:

Let’s summarize what we learned from this tutorial:

TypeScript is a superset of JavaScript. It extends the capabilities of javascript language by a powerful type system. which allows us to fix many types of errors at development time before even running it.

Typescript compiler always indicates to us exactly where we have adapt our code without breaking anything at runtime. It also enables tools to suggest auto-completion, refactoring of variable names and maintainability makes easy.

As we can see TypeScript has much more advantages over plain JAvaScript and makes it simpler to maintain larger code bases due to the better tooling and compiler error messages and refactor our program over time.

…

You can also read: creating-empty-object-in-javascript

That’s it, I hope you find it helpful.

Clap & Follow.