DEV Community

Cover image for What is Typescript and why should you be using it?🤔
ByteSlash profile image Karthik Pariti
Karthik Pariti for ByteSlash

Posted on • Edited on • Originally published at kardev07.hashnode.dev

What is Typescript and why should you be using it?🤔

#typescript #javascript #programming

I am sure that in your web development career you must have used JavaScript at least once. And I am sure you must have found it very useful and very powerful. But what if I say there is another language that is just as powerful as JavaScript and has way lesser bugs when compared to when you use JavaScript in your app.

Now, what's the language that I'm talking about?

That language is TypeScript.

What is TypeScript?

TypeScript is a programming language developed and maintained by Microsoft licensed using the Apache License 2.0. TypeScript is a superset of JavaScript, meaning that all the concepts of JavaScript are present in TypeScript which is combined with TypeScript's own concepts that make the language increasingly powerful.

If you know JavaScript, it mustn't be a problem switching to TypeScript as it essentially has the same concepts as JavaScript except a few of TypeScript's own concepts.

So what are the advantages of using TypeScript?

Concepts similar to JavaScript

  • TypeScript has similar concepts as JavaScript which makes the switch seamless

TypeScript is type-safe

  • TypeScript is type-safe meaning that you have to define the type of the variable before initializing it.
  • Making your code type-safe decreases the number of bugs evolved in your app over time and makes it cleaner.
  • Types give superior integration to your editor which improves editor support meaning increased developer productivity and gives you a better codebase.

It keeps JavaScript in check

TypeScript keeps your JavaScript in check. Meaning that it validates your code before it's even run which gives you an edge over using simple JavaScript.

Runs on multiple places

TypeScript runs in multiple places. It converts your JavaScript which can be run on the web, on a phone, or on Node.js.

Type Inference

It uses something called type inference which is nothing but adding types to your code which gives safety enabled without you writing long and additional lines of code making your app faster and scalable.

It is developed and maintained by Microsoft

TypeScript is developed and maintained by Microsoft and widely used by many companies which means it's nowhere near to reaching its end. So you can expect regular updates and fixes to the language.

Those were some advantages, let's move on to some testimonials!

TypeScript is widely used and loved by developers around the world. Here are some testimonials given by popular companies which is another indication that switching to TypeScript is worth it.

Slack:

  • According to slack, the switch to TypeScript made their life a lot easier in terms of bug-fixing and productivity.

  • They also said Static Analysis which analyzes your code and tries to infer types and warns the developer in advance before the code even runs.

  • They were overwhelmed by the amount of bugs found when they were converting their code to TypeScript.

  • They were also surprised about how powerful editor integration is. Editor integration can be game-changing when your code editor has autocomplete where TypeScript suggests what your next piece of code can be and makes your editor do the same.

Airbnb: According to Airbnb, TypeScript prevented 38% of the bugs based on their analysis.
According to them, TypeScript lets developers be productive and safe at the same time.

So those were some of the popular testimonials! Moving onto some surveys!

  • In StackOverflow's developer survey in 2020, TypeScript was declared to be the 2nd most loved programming language

  • TypeScript was used by 78% of the 2020 State of JS survey and 93% went on to say that they would use it again. It was also awarded the Most Adopted Technology based on year-to-year growth

Moving onto how to install TypeScript in your machine

Run this command in your terminal to install Typescript

To install TypeScript in your project 

npm install typescript --save dev #for npm

yarn add typescript --dev #for yarn
Enter fullscreen mode Exit fullscreen mode

To install TypeScript globally

npm install -g typescript #for npm

What is the difference between installing typescript globally and in your project?

Installing TypeScript globally requires you to install it only once meaning that you don't have to install it every time when you start a new project.

Whereas installing it on your project adds TypeScript only in that project directory meaning that it is not installed globally. I recommend installing it globally if you want to use TypeScript for future projects as well.

Now let's see how TypeScript is different from JavaScript in implementation.

Let's start off by writing a function in JavaScript that takes in your name as a prop and prints it on the console.

  • JavaScript: 
function print_name(name) {
  console.log(`Hello ${name}!`);
}

print_name("charles")
Enter fullscreen mode Exit fullscreen mode
  • TypeScript: 
function print_name(name: string) {
    console.log(`Hello ${name}!`);
}

print_name("charles");
Enter fullscreen mode Exit fullscreen mode

The only difference that you might notice is where you define the props. In JavaScript, you just enter the name of the prop whereas in TypeScript you need to enter the type of the prop as well. Here is the difference that you might have noticed

  • JavaScript: 
print_name(name)
Enter fullscreen mode Exit fullscreen mode
  • TypeScript: 
print_name(name: string)
Enter fullscreen mode Exit fullscreen mode

So why should I go with TypeScript instead of going for JavaScript when the output is the same?

This upcoming example will say why

Example 2: In this example, we will print the age of the person and we would want the function to print it on the console.

function print_age(age) {
  console.log(`Your age is ${age}`);
}

print_age(20)
Enter fullscreen mode Exit fullscreen mode

Here I entered the age of 20 and it ran successfully. Let's try giving something other than numbers and see if it works.

function print_age(age) {
  console.log(`Your age is ${age}`);
}

print_age("Karthik")
Enter fullscreen mode Exit fullscreen mode

And the output which was given by the console was "Your age is Karthik". So this is quite troubling right. In a situation when you want only a number you need to write additional code that looks somewhat like this for the program to accept only a number.

  • JavaScript: 
function print_age(age) {
  if(typeof age === "number") {
    console.log(`Your age is ${age}`);
  } else {
    console.log("Please enter a valid type");
  }
}

print_age(20);
Enter fullscreen mode Exit fullscreen mode

Output: Your age is 20

This program only accepts a Number data type. But you can write this same program in TypeScript in way lesser lines of code.

  • TypeScript: 
function print_age(age: number) {

    console.log(`Your age is ${age}`);
}

print_age("Karthik");
Enter fullscreen mode Exit fullscreen mode

Here the age prop can take only a number hence when the string Karthik is given as input, the console throws this error.

Argument of type 'string' is not assignable to parameter of type 'number'.

Hence if we mend our ways and give only a number an input like this, the code should run.

function print_age(age: number) {

    console.log(`Your age is ${age}`);
}

print_age(20);
Enter fullscreen mode Exit fullscreen mode

Output: "Your age is 20"

Useful Links:

Let's connect:

Top comments (0)

Read next

bobbyhalljr profile image

Random Image Generation and Caching in JavaScript

Bobby Hall Jr -

nixcko profile image

Cómo empezar con TypeScript usando Vite: Configuración y compilación simplificadas 🎯

Israel Morales -

nicooprat profile image

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

Nico Prat -

blamsa0mine profile image

🚀 Fetching and Displaying Data in Nuxt 3 with useAsyncData

A0mineTV -