React TypeScript Tutorial - 8 - Prop Types and Tips

hey everyone in this video i want to quickly go over three tips related to props and types in react the first one is that you can destructure props when defining the component all along we have specified props within parentheses and used props to access the different properties on an object instead you can opt to destructure for example in input.tsx i can replace props with curly braces and the structure value and handle change we can also remove props dot when accessing the properties to be honest this is what i prefer when working with component props and it is something you will often see in different code bases the structuring props the second point i want to discuss is about exporting types at the moment in all our files we define types right at the top this works for simple components however when you're working on large components with multiple types you often want to move the types into a separate file and import them where necessary for example if we take a look at person.tsx we have the person props defined at the top let's move it into a separate file i'm going to create a new file called person.types.ts we can now paste the person props type here into the new file to use this in person.tsx all we have to do is export it so export type person props back in person.tsx import person props from dot slash person dot types dot and everything continues to work just fine like i mentioned this probably makes sense when you have a lot more types to work with for now keep in mind that you can export and import types just like components the last point i want to discuss is about reusing types it is possible to extract a type and use it in multiple places in person.types.ts i can extract this name object into a separate type type name it's an object with first and last as properties now within person props name is of type name but now that we have a name type we can also use it in other places let's export it from this file and import it in person list dot tsx so import name from person.types and now names is an array of the name type and this is much better you'll see this method of creating a basic type and using it in multiple places quite often when you're working with react and typescript to be honest it is very important to know you can do this so as to ensure reusability and avoid duplication all right with that we can now wind up our section on passing props to a component with react and typescript thank you all for watching please do make sure to subscribe to the channel and i'll see you in the next video

Channel: Codevolution

Views: 2,188

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, Prop Types and Tips

Id: 4Ml7Lp_QcSo

Length: 4min 20sec (260 seconds)

Published: Thu Sep 09 2021