React TypeScript Tutorial - 3 - Typing Props

welcome back everyone now we all know that props are essential to building any practical react application in this video let's take a look at a few basic prop types you're likely to use when creating a component with typescript before we dive into the code let me explain the approach we are going to take in case you missed it in the previous video for every video i'm going to set up a few components beforehand it'll be pure react code which you should already be knowing we will then proceed to add typescript to those components in doing so we can save time on writing react code and instead focus on typescript which is what we are all here for let's begin in the components folder i have created a component called greet for the jsx we are rendering welcome vishwas you have 10 unread messages this component is included in app component and if you head to the browser the ui is pretty much what we expect it to be this grid component though isn't of much help as the data is hard coded so let's begin by rendering a name prop instead of the string visuals so in app component let's add a name prop is equal to the string vishwas and within greet.tsx props within parentheses and instead of vishwas props dot name but when we do this we get our very first typescript error parameter props implicitly has any type this is an error that you'll encounter often typescript is telling us hey you have not told me what is the structure of this props your past you're saying it could be any structure which i'm not happy about i'm pretty strict when it comes to this and you need to let me know what is the type for the props you're passed in so we need a way to inform the type of props to typescript and we do that using the type keyword at the top we use the keyword type and we give it a name let's call it greet props now a component props is an object so this is equal to an object the component accepts one prop called name which is a string so within the greet props object the key will be name and the data type is string we have now defined the structure or type of the props that the component will receive to inform typescript about this after props within parentheses we specify colon and then the type name which is greed props and just like that red squiggly is gone in as well as app.tsx typescript is happy with us seems like extra code but this does give us two benefits straight away the first one when i type props dot you can see the autocomplete suggesting we might need name so i don't have to spend time thinking if i passed in name or f name or l name and so on the second thing is that when invoking the component in app.esx if i try to pass in any other data type apart from string for example name is equal to 10 typescript straight away points the doubt type number is not assignable to type string and this is a big win as we are able to identify issues when we are typing the code rather than figuring out in the browser and this is pretty much how you type props for a react component a question you might have is whether to use types or interfaces when i started i had come across an article that suggested use types when building applications and interfaces when building libraries it is something i followed and is why i will use types in the series having said that taking into consideration the latest typescript releases there is hardly any difference in using one over the other i would still recommend you use types as that will make it easier for you to follow along all right in the next video let's take a look at a few more basic prop types to make ourselves familiar with the whole process of typing component props thank you for watching and i'll see you in the next one

Channel: Codevolution

Views: 3,675

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, Typing Props, Typing Props in React, React TypeScript props

Id: KpA6oEaCHtk

Length: 5min 48sec (348 seconds)

Published: Mon Sep 06 2021