React TypeScript Tutorial - 19 - Generic Props

welcome back everyone in this video we're going to learn about generics which is a typescript feature that is really useful when building react components now similar to the other videos in the series i have already set up some code to get us started in the components folder i've created a folder called generics within the folder we have a file called list.tsx the component is a simple component that accepts an array of items and handles a click event on each of those items let me walk you through the code at the top we have the props type so list props which contains items which is an array of strings and on click handler which receives the clicked item value as an argument on the list component itself we destructure items and on click from props for the jsx there is an h2 tag that says list of items and below the heading we map over the items array rendering the item in a div tag on click of the div tag we also call the on click prop passing in the item string might not be a practical list component but for now it serves the purpose in amp.tsx i have imported the list component and invoked it items array is an array of three strings and on click prop is a simple function which logs the clicked item to the console we have no typescript errors and everything is fine however the following day we realize we need to render a list of numbers and handle the click on each number so let me invoke the component again but this time where items is an array of numbers on click handler though remains the same when we do this typescript is going to complain type number is not assignable to type string this is because we have mentioned items is an array of strings now one possible solution is to allow either a string or number as the type so items is an array of strings or an array of numbers on click value can either be string or number typescript is once again happy but this is again specific to items being an array of strings or numbers only what if tomorrow it is an array of objects in this third example you can see items is an array of objects where each object contains a first name and a last name typescript will throw an error so what we need is a way to tell typescript that the type of items and the on click handler item can vary and generics are the way to do that in fact we've looked at generics already in this series when we specified a type to use state or even in one of the previous videos where we specified to react dot component type we made use of generics let's see how to add generic types for our list component step 1 we add a generic type to the list props type what is a generic type well you can think of them as parameterized types on line 1 right after list props we specify within angle brackets t now t is sort of a convention and stands for type but you are welcome to use any label you want to use i will stick to t once we mention that list props accepts a variable called t we assign the same to items so it is an array of type t and to the on click prop as well so value is of type t when we do that we get an error on line 5 for list props this is because we need to specify the generic type as mentioned on line 1. so list props angular brackets t but then what exactly is t typescript does not know that to fix this we need to specify what t can be before the parentheses so angle brackets again and we specify t but this t needs to extend a base type we are going to specify an empty object as that covers everything so t extends an empty object or in other words the least restriction when passing in props and when we do that you can see the error in app.tsx is gone we can now pass in an array of any type and list component will not throw an error of course we are stretching ourselves a bit because item as object would not be the best to specify as a value to render in a div tag for now i want you to understand how generics work and hopefully this contrived example helped you with that if you want to add restrictions to what the generic type can be you can focus on this constraint we have specified if we want only an array of numbers or strings we specify t extends string or number typescript will flag an error when you try to pass in an object useful constraint is mentioning that each object must contain an id property so let me comment out the first two lists and back in list.tsx as constraint i'm going to specify t extends an object which contains a property called id of type number this restriction will ensure we can safely pass item dot id to the key prop on the list item so key is equal to item dot id of course the item object in addition to id can contain any other property so in app.esx we see an error since id is missing all we have to do is add id set to 1 id set to 2 and id set to 3 and now typescript is happy as you can see generics is really powerful and is something you're going to come across when working with react and typescript it helps you avoid code duplication when you need multiple types to be handled but at the same time provide strict type checking alright thank you all for watching if you're finding the videos helpful please do leave a like and subscribe to the channel i'll see you in the next one

Channel: Codevolution

Views: 434

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, Generic Props, Generic Props with React TypeScript, React TypeScript Tutorial on Generic Props

Id: xFNk2nfDh4M

Length: 8min 43sec (523 seconds)

Published: Tue Sep 21 2021