bitoverflow logobitoverflow logo
Navigate back to the homepage

TypeScript -JavaScript on steroids

Sachin Thakur
October 23rd, 2019 · 4 min read

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.

image placeholder

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.

1//JavaScript
2
3function getName(fullName) {
4 if (fullName) {
5 return "John Doe";
6 }
7 return "John";
8}
9
10let 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

1//TypeScript
2
3function getName(fullName: boolean): string {
4 if (fullName) {
5 return "John Doe";
6 }
7 return "John";
8}
9
10let 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.

image placeholder

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.

image placeholder

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.

1npm install -g typescript

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

1mkdir awesome-typescript
2cd awesome-typescript
3mkdir src
4npm init -y
5npm i typescript --save
6touch tsconfig.json

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

image placeholder

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

image placeholder

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.

Any Type

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

image placeholder

  • tuples

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

tuples

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/

Join my email list and get notified about new content

Be the first to receive my latest content with the ability to opt-out at anytime. I promise to not spam your inbox or share your email with any third parties.

More articles from Sachin Thakur

How and why I built A nodeJs-MongoDb Starter kit

The main reason for building this Starter Code was to help others and myself by not going through that process of installing and following the same steps again and again to create even a simple API.

October 16th, 2018 · 2 min read

How i started learning web development and React

My approach towards learning ReatJs was like most other self-taught developers. Go through Youtube tutorials and a little bit of documentation.

September 2nd, 2018 · 3 min read
© 2018–2020 Sachin Thakur
Link to $https://twitter.com/thakursachin467Link to $https://github.com/thakursachin467Link to $https://www.linkedin.com/in/thakursachin467/