Intro to Typescript- Props & Hooks
Hey everyone! In this blog, I wanted to discuss a very popular framework that is high in demand and being used by companies all over the world. It’s called Typescript and so why do developers love to use this? Typescript is great because it has strong typing, object-oriented features, gives back compile-time errors, and it’s great for tooling.
With that, in this blog specifically, I will be discussing three main concepts frequently used in React and how to use those in Typescript. To begin with, how do we use props in Typescript? To declare props you begin with writing interface Props and then with that you can write down the object and then declare what is the type. For example, let’s say we have text, the type would be a string.
The code above shows a couple of different concepts I want to explain. Since we passed in all these types as props, they are now required to be passed down as props. If we wanted to not have all these props mandatory to be passed in we can place the question mark next to the type. That is what there is a question mark next to ok, i, and fn or function. This makes it so that the prop is optional.
So when we actually pass it down, we use React.FC where FC stands for the Functional Component. Then in the text field because we made person mandatory we see here we actually need to pass in the person, otherwise, we would get an error.
To summarize props, we create a React.FC (functional component), pass in the props in the angle bracket, and then we are able to use them. If we wanted to make the props optional we can place a question mark next to the type. What is nice about typescript is that it gives you autocomplete when coding out so we know exactly what can be passed and what cannot.
Next, we move onto hooks, which in this case we will take about use State. We can apply this by using useState and inputting the type in the angle bracket so typescript can know which type to use.
Seeing this in action we can put useState which takes in the type number. It’s important to note that to use ‘and’ in Typescript is a singular pipe. Also, that undefined and null are two different meanings. So, in particular, in the example above, we need to pass in undefined. We can also pass in objects and interfaces within our hooks. In order to use ‘interface’, we would have to pass it in above, and the object can go within the angular brackets.
Another hook we can use is called inputRef. A ref can store anything, any type. Typescript allows you to hover over inputRef and tells you exactly what you need to pass into it.
So after hovering over, Typescript told us to pass either a string, a function, or an HTMLInputElement. Don’t forget to pass null into the parentheses otherwise, we will get an error.
Another type of hook is ‘useReducer’. In order to use this, use the useReducer, the initial state is going to be the empty brackets. No types are passed in that. However, we do pass it in in our TodoReducer. We pass in the state and the possible action. First, you want to pass in the different actions you can pass into the reducer. This is show below.
We use the singular pipe for and in between these actions. Then we use the interface Todo to pass in the string and boolean. Below we set the type state to an array of ‘Todos’. Then in our Todo Reducer, we need to create the two types, what the state is and what the actions we accept are. Then afterward, we can dispatch an event and use the Typescript autocomplete to confirm what you can and cannot pass in.
The inspiration from this blog came from this extremely informative Youtube video by Ben Awad which I will link here. I would definitely recommend checking it out, it's only about twenty minutes and further explains all of these examples. https://www.youtube.com/watch?v=Z5iWr6Srsj8
Hopefully, this helped clarify how to use Props and Hooks in Typescript. Thanks for reading! :)
