🚀 The basics of using Typescript with React🔥
Tags: react, typescript, webdev
Published: 2020-10-17 07:23:01

While using React on its own is great, after a while you start to realise that there must be a better way to make components more reusable! Enter Typescript. If you've never heard of it, it's basically Javascript but with types! I highly recommend reading more about it as it's used by a lot of the larger companies like Airbnb and Facebook.
 
## 🧠 The basics

So you know a Typescript but want to know how to use it with React. The following section will go through the basics of using TS with both class and function components.

For the following examples, we're going to be creating a `box` component. The box can have a `width` and a `height`. as well as an `onClick` method. We're using a super simple example here so we can focus on more the Typescript 💪.

### 🧑‍🎓 Class Components

Firstly we use Typescript to define the types of `props` and `state` that our components can use. We define these like so:

![carbon (8)](https://dev-to-uploads.s3.amazonaws.com/i/479d3kama944m5nepsd8.png)
 ![carbon (5)](https://dev-to-uploads.s3.amazonaws.com/i/rnvyk1syxgbuav7vva9m.png)

These tell React that our Box component will only accept a `width` and `height` that are `numbers` and an `onClick` function that does not return anything. Our state will also only contain a `name` that will be a `string`. 

Now this may not seem like a big deal, but it means that there is no guessing what sort of props we can pass to our components when we come to use them in the future!

Once we've defined what our `props` and `state` are going to look like, we can add them to the component. To do this we can use the `<>` notation alongside the `Component` class from `React`.

![carbon (6)](https://dev-to-uploads.s3.amazonaws.com/i/vg2utj3llkoo9jfmq0bw.png)

Now when we try to use the component and pass in a `string` as the `width` instead of a number, we will get a nice type error telling us that our component is expecting `width` to be a `number`, not a `string`. 

Now that we've mastered using Typescript with Class components, lets move on to my personal favourite, Function components.

### 🏎️ Function components

Lets say we create a function component that represents out `box` :

![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/z2yr036mfaqze67z1c9y.png)

Now already we can see much code we save on when using a Function component instead of a class component! But thats a topic for another post 😉

Using the same type's that we defined before, we can integrate them like so:

![carbon (7)](https://dev-to-uploads.s3.amazonaws.com/i/y8fxe94igma8wsnurr68.png)
 
Now remember that Function components don't have state like class components but we can use the `useState` hook to change that. The cool thing about the `useState` hook is that it will use the type of whatever we pass into the method. So in this case `name` will be a `string`!

## In summary

Today we've learned how to use Typescript alongside React to make your components more reusable with both Class and Function components 🚀.

Thanks for reading and I hope you got something out of it. Since this is my first  post ever, I'd love some feedback so feel free to throw some at me in the comments section below 👍!