All you need to know about TypeScript

What is TypeScript?

Typescript is a programming language that is developed and maintained by Microsoft and it is a superset of JavaScript.

What TypeScript do?

It adds a robust type system to JavaScript. If you come from a typed language background you must be familiar with types. And as it turns out in a language like JavaScript there no types for default. And what that means is that it is really easy to make errors in JavaScript basically with syntax or your code logic example: passing the wrong parameters to functions and these errors will only be caught at runtime or when your code is been executed by users in production and that can be bad.

Why TypeScript?

let's see an example of why typescript is more important. Here I have got a function to simply get a lower case string of passed string as a parameter.

const getLowerCaseString = (str) => {
  return str.toLowerCase();
}

But when we run this code without passing a sting it gives us an error in the runtime.

getLowerCaseString();

This kind of bug can get an entire page down in the runtime of any website.

Now let's see how TypeScript helps us in avoiding such bugs.

Here is the TypeScript code for the same function

function getLowerCaseString(str: string) {
  return str.toLowerCase();
}

Here we added the type string to the parameter of getLowerCaseString. Now if we try to call this function without passing any arguments it will give us a warning during development only.

Now let's try to pass a number and not string and see what happens.

In this case, also TypeScript gave us a warning. And these kinds of warnings can save us from lots of bugs in production.

Now let's try another example with a real-world scenario.

function getResponseMessage(response){
  if(response.data.success){
    return `Yay! The action was successful ` + response.message;
  }else{
    return `oops! something went wrong`;
  }
}

const apiResponse = {
  data: {
    success: true,
    message: "Action successful"
  }
};

console.log(getResponseMessage(apiResponese));

Here we have a function that takes an API response as a parameter and returns the message according to if the action was successful or not.

And let me tell you there is a bug in this code. And the bug is that we are trying to access response.message here and not response.data.message.

Let's see what happens when we execute this code.

Now as you can see here we are not even getting a runtime error and getting undefined at the place of the message. This is because in JavaScript we can access a property that does not exist of an object.

This does not give us a runtime error but is a bad bug.

Now let's see how we can solve this problem using TypeScript.

As you can see here TypeScript gives us a warning Property 'message' does not exist on type 'ApiResponse'. These kinds of warnings can save us from really bad bugs in production.

Conclusion

Overall, TypeScript is a great tool to have in your toolset even if you don’t use it to its full capacity. It’s easy to start small and grow slowly, learning and adding new features as you go. TypeScript is pragmatic and welcoming to beginners, so there is no need to be afraid.