TypeScript -JavaScript on steroids

We all know that JavaScript is arguably the most popular and widely used tool for building software these days, it seems as if javaScript has taken over the world of software development from building a website to web servers with NodeJs, with Electron on your machines and finally thanks to Facebook, with React Native, it’s native to your phone. There is no doubt it’s a Swiss Army Knife of building software. Everything that can be written in JavaScript will eventually be written in JavaScript.

So JavaScript is everywhere, However, the dominance of JavaScript happened so quickly now we have few problems. It’s nothing wrong to have one language everywhere, but it’s not the language we like to have but it’s the language we have. JavaScript is still evolving, we have ES2015, ES2016, ES2017 which are still coming with some good add ons, but some gaps are still there. We have enterprise applications running on javascript but don’t have a good way of writing this enterprise-level software i.e. building components like classes, interfaces that are not present in JavaScript, we don’t have static types like most another popular language like C, CPP, python which makes software more stable and free of run-time errors which might cause problems. Now, this is where TypeScript comes into the picture.

Now TypeScript is an open-source syntactic superset of javascript that essentially compiles to JavaScript but TypeScript offers much more than just syntactic sugar, It enables great tooling and developer experience through the power of static typing. Now some of the improved enhancements which TypeScript provides include better refactoring, static type checking to remove unwanted runtime errors, statement completion, and many more.

There are many benefits of using TypeScript over JavaScript. **TypeScript** was created to statically identify constructs that are likely to be errors. Now, what does this mean? let’s understand this by comparing a piece of code between JavaScript and TypeScript.

//JavaScript

function getName(fullName){
      if(fullName){
          return "John Doe"
      }
   return "John"
}

let name= getName('false') // John Doe

Now in javascript nothing will stop us from passing a string to a function that is expecting a boolean. Now JavaScript will run this which might lead to some errors at runtime. And when you are dealing with a huge amount of code errors like this can easily happen which will lead to some very weird bugs. Now this can entirely be avoided by using TypeScript’s type Annotations

//TypeScript

function getName(fullName:boolean):string{
      if(fullName){
          return "John Doe"
      }
   return "John"
}

let name= getName('false') // throws error 'string' can be assigned to a parameter of type 'boolean'.

This prevents us from making mistakes that would have been avoided if we had static type checking in JavaScript. Now the great thing about TypeScript is the editor support. Let me show you by a little example.

Do you see a little red underline? Now, this is TypeScript telling us that we have done something wrong and we need to fix it. Great! so now instead of remembering UppeCase() only accepts a string, we can trust TypeScript to remember it. Imagine having thousands or even tens of thousand of methods and line of code, we cna still rely on TypeScript to have our back.

Getting started with TypeScript.

it’s really easy to get started with the TypeScript, before moving forward all you need is NodeJs and NPM installed and you are good to go. Now open the terminal and type the following commands.

npm install -g typescript

Setup a basic NodeJs Project. Follow the following steps in your terminal to create a basic NodeJs project.

mkdir awesome-typescript
cd awesome-typescript
mkdir src
npm init -y
npm i typescript --save
touch tsconfig.json

Now the next step would be to initialise a basic config file.

Now after this all we need to do is create a .ts file in our project.

After doing all this we end up with this. Good, Now you can follow along with more examples. Now we will write all the code in .ts file and .js file will be the compiled version of the typescript code which in our case is es2016 because we specified it in our tsconfig file.

Now there are also many other benefits to using TypeScript like the types in TypesScript.

We know that in JavaScript we only have the following types

• Number

• null

• boolean

• String

• undefined

Rest everything in JavaScript is an Object

• Functions are first-class Object in JavaScript world

• Arrays are also objects

• ProtoTypes are Object

Weird Right?

Now when we talk about TypeScript we have clearly defined types. Apart from what is defined in JavaScript, we have more types like

• Any

Now we define something as any in our application when we don’t know what that type exactly going to be. It gives us flexibility but we should always avoid using this as it can start causing problems sometimes if we don’t know what we are doing.

Notice that here we reassigned a from a string to a number but it didn’t give us an error. it gives us the flexibility but also increase the change of producing unnecessary bugs.

• Void

void is a little like the opposite of any the absence of having any type at all. You may commonly see this as the return type of functions that do not return value

• tuples

Tuples are your organized arrays. Tuple types allow you to express an array with a fixed number of elements whose types are known.

Now here we see a red underline which means our editor is telling us we messed up somewhere. Here we tried assigning a string to a number inside an array. Pretty cool right!

• null

Now, this article is getting a little longer but we have a lot of types and other cool features that can’t be covered in one article like enums, interfaces, Decorators, Method Overriding which can be very helpful if you want to build a stable and reliable software.

You can find more types on TypeScript getting started website.

When does it make sense to use TypeScript

• Prefer Strict Type Checking: Adding strict type checking reduces a lot of overhead. It is possible to do runtime type validations in javaScript but that will just increase the overhead which can easily be removed by using compile-time validations which are done by typeScript.

• Large Software or Multiple Developers: Adding TypeScript makes much more sense when many developers are working on a single code base, which will always be the case if you are working on a large project. TypeScripts Interfaces, Method Overrides, access types (which methods are private, protected or public) can be useful.

Conclusion

Now whether or not you decide to add TypeScript to your existing or upcoming project you can surely agree that TypeScript adds some good functionality to JavaScript and make it more stable and reliable.

FYI: you can easily migrate your existing project to TypeScript without putting much effort and you can write pure JavaScript inside TypeScript file.

P.S: This article was originally written on https://blog.thakursachin467.tech/2020/02/typescript-javascript-on-steroids/