React with Typescript.

umesh raut
2 min readApr 24, 2021

react is a javascript front-end framework/library used to build single-page applications. We categorize big problems into smaller parts and call them components, which makes react powerful and easy to understand.

Typescript is a type check for javascript which helps you to define the type of every variable, function, class, etc.. which you use in your code.

Example:
const add=(a,b)=>{
return a+b;
}

hear function add suppose to return the addition of two numbers but if we pass something like add(1,”2”), it will cause a problem we won't be receiving 3 but will receive 12 which we don't want, but in this case, if we use typescript the code will show error while writing code instead of compile-time

with Typescript
const add(a:number,b:number):number{
return a+b
}

the above function will always accept two numbers and it will always return a number, that a simple use case of typescript.

now come to the point react with typescript first question that comes to mind is:
Why the hell I need a typescript in react?
the answer is very simple in react we use multiple components and many of them must accept some props so when it comes to a large project we may end up with multiple reusable components and it becomes very difficult to remember what props they need and if we miss any props react throws error at compile-time, but in hear if we use typescript it gives warning or error while writing code and also gives some autocomplete for props so it becomes very easy to work with multiple components you don't have to remember or don't have to lookup on what props are accepted by those components you'll get suggestions for that.

that's one of the reasons for me to use typescript we also have another option for the same purpose which is protoType which offers the same functionality of defining types of props that component accepts, but with typescript, you get the benefit of defining types for what functions and const or states you use in your react application.

--

--