Recently, I have been doing a lot of TypeScript based JavaScript development in React and Node JS as well. For more than 10 years, I have worked with PHP and it’s eco system along with JavaScript. So, I worked with dynamically typed languages a lot. However, I used to read about what statically typed languages are and about their merits. So I slowly started to do a little bit of static type like code in PHP.

Recently I was working on React with my team. And, that's when we started exploring TypeScript for doing React and other JavaScript based development as well. After working with it for some time, everyone immediately understood the merits of using this. We all started to see a lot of advantages in doing development using TypeScript. In this article, I am going to share my experience working with TypeScript, how it helped me in creating better component architecture in React and how it helps me in my development workflow.

Why Typescript for JavaScript development?

So, in this article I am not going to tell you about what TypeScript is. I am sure there are tons of articles and videos which exist on the internet teaching you TypeScript is. What I am going to talk about is – why I think TypeScript is really the way to go when it comes to JavaScript development.

Advantages of TypeScript

Working with TypeScript, I get an immediate advantage over JavaScript by understanding what kind of data a function needs as an argument and what kind of data I can expect from that function in return. And, frankly speaking that's all that we can when we are doing development isn't it? We are always working with some kind of data. And the more aware we are about the data, the better we can work with it.

So, in here if you can see, the function is expecting a number as id and it will return a Promise. Which immediately tells me that when I am calling this function it will have to be an async function or I will have to use the “then” function to resolve the response. And, also because of line number 12, I know that the promise will return me a Todo which I have defined as an Interface.

Debugging and Linting during development

As a developer, one thing which I love about development is the joy to see things building as I write code. Now, there will be cases when the code will have some issues. And, many times we do have issues – right?

Now, writing a piece of code and then save the file, refresh the page just to know that something is wrong is not so good. And then you open your console to check where you went wrong, try to debug - you get the point, right? It takes time. However, with TypeScript a lot of JavaScript related issues can be caught directly while development. Yes, using TypeScript I get immediate feedback and it saves a huge amount of time during the development flow. It’s so nicely done that many of us don’t even realise it.

Better component architecture

I also find that using TypeScript, I can structure my components a lot better. It’s very easy to define an interface for the Props and so any other developer will immediately know what data to send to the component and in what format. Also, if my component supports only specific types of value for a specific property, then I don’t need to write code for that. By declaring that in the interface, I can be rest assured that no other developer can send such a prop to the component.

These points may look small however, but they are strong enough to make a difference. I have seen a huge difference in how I write code now compared to when I was not using TypeScript. I can use someone else’s component with a lot more confidence which is a key factor while working with a team. If you are not already working in TypeScript then I will strongly suggest that you give it some time and I am sure you will love working with it.

Let me know what are your views about TypeScript? Whether you like it or not. If not what are the reasons and I would be very happy to jump on a conversation with you on Twitter maybe. My twitter handle is @amitavroy7.