TypeScript for React/Next.js Developers | TypeScript Tutorial for Beginners

Hello friends welcome to the complete typescript tutorial in this tutorial we are gonna explore the powerful features and benefits of typescript and after completing this video you will be able to create your new projects without any problem this tutorial consists of two parts in the first part I will explain everything you need to know about typescript Basics types interfaces generics Advanced objects and in the second part I will show you how to use typescript in react we'll Deep dive into various typescript Concepts and techniques and you'll see how easy to use typescripts with react and its Frameworks and in the next videos we will create Advanced react and next.js projects together so please like the video and let me know what kind of projects you want to see in the future if you are ready let's get started okay I created a typescript file and let's see how it works I will create my first variable here and the main job typescript does is Define a street type for each variable and force you to use the same type throughout the coding and it does this even if you don't Define any explicit type for example here our variable is a string it means I cannot turn this into a number let's try as you can see this is our first warning and it says number is not assignable to type string we cannot write here a number we cannot write any Boolean object array doesn't matter it has to be a string let's do the same thing for a number I will say H the type of this variable is a number it cannot be any other type and also you can give your own types I said typescript understands the type of variable but if you don't have any initial value you can explicitly provide a type let's say HV type I'm gonna use here a column and write my type and it's going to be a number let's try I'm gonna give a string as you can see there is a warning but if I give any number here there will be no problem and also if you want to you can give your initial value like that and let's see what other types we can use I will say string its type will be string in this case I can use only a string here and we can create a Boolean and the value of this variable can be only true or false and also you can use multiple types I'll say test string or number and I'm going to Define my type and it's going to be string or number it's that easy in this case I can use only string or a number let's try to change its type and as you can see there is a warning and we call this structure as Union types okay we know strings numbers and booleans what about arrays let's write here array and I'm gonna create names array let's say John chain and top basically this array includes only strings if I try to push anything else inside these names array it's going to give me an error let's try names push and a number and there is a warning and it says number is not assignable because it should be a string that's right I'm going to add another name and right now there is no problem let's do the same thing for numbers I will say numbers push let's say true is going to be an error but if I try to write here any number everything is going to work as expected but how we are going to Define our array types I'll say test string array and the type of this variable will be an array and the items inside this array will be only strings let's create I will say one two three and there is a warning but if I say strings there is no problem let's do the same thing for number I'm gonna write each type array and it's going to include only numbers let's give some items and for this item there is no warning because it's a number let's fix it and that's all let's use Union types I'm going to say test string or number array again it's going to be an array but the type of the items will be either a string or number in this case I can give any number here or a string let's comment this out by the way and what about objects I'm going to create here an object let's say user is going to have a username let's say John h 22. and I'm going to add here a Boolean let's say is admin and it's going to be false you don't have to Define any type here because typescript understands that the user is an object and it has a username which is a string H is a number and is admin is a Boolean let's try to change this username I will say Jane and there is no problem because it's a string but if I write something else let's try to change this age 18 and it's not gonna work because we defined this as a number like that and the same thing for this property I'll say user is admin I cannot write here any string or number it has to be a Boolean let's say true what if I want to add here something else let's try to add a phone number user.phone any string here and as you can see there is a warning that because we don't have the form property so I'm gonna comment this out and let's create another object but this time I want to give some types I will say user object and I'm gonna write my types so be careful here you have to write a column it's not equal and I will say username it's going to be a string H is a number and each admin will be Boolean let's use this object I will say username John I will give H and there's a warning here and it says is admin is missing we have to use all purpose here again we cannot add anything else but also we have to use all proper adhesive we cannot change them so I will say is admin and it's going to be true if I try to add a phone it's not gonna work but let's say in our application we have users and some of these users have a phone number and the others don't have in this case I should use a condition here let's copy this object I'm using the same name let's change here and I'm gonna write here phone is going to be a string but I will say it's not required let's try username h is admin and as you can see there is no warning but even if I add here a phone number it's gonna work that because we can call it conditionally and one more thing I want to mention about those types and it's going to be any type if you don't provide any value or any type its type will be any as you can see it says test any implicitly as an any type it's going to be a string [Applause] volume array object anything but you should be careful because this is why we are using typescript we should use a type you should use this any type only when you are not sure about the type I can do the same thing for an array I'll say test any array it's gonna be an array daily in this case I can give any value inside this array number string volume or array or whatever and if you don't write anything here by default its type is 80. what about functions I will come here and say functions and I'm going to create my first function let's say say hi and it's gonna just console log here hi and welcome and in this case this variable is always a function if I try to write here a string it's not gonna work and if I hover over my function here you are going to see that its type is a function and it returns a void it means it's not returning any specific type like number or string we are just using console log here we are not returning anything but we can return let's try let's say function return string is going to be a function but it's going to return a string if I say console lock it's not gonna work but if I return a string let's say la model as you can see the error has gone so how we are going to take an argument let's create another function I'll see multiple I'm going to take an argument here let's say num and again we didn't provide any type here its type is any I'm gonna say it should be only number and I'm gonna take this number and multiply by two I'll say return num multiply by 2. let's check here as you can see it takes a number as a parameter and returns a number we didn't specify here what we are returning but as I said typescript smart enough to understand what it returns so this and this is exactly the same let's change this name by the way and if I say don't return anything I'm just gonna write void and let's change its name and there is an error that because we are returning I will say do something but don't return okay let's try to add another parameter I'll say some is going to take two parameters the first one will be num1 let's say it's a number and the second one it's a number and I'm gonna return number one plus number two so when you call this function you have to give two parameters here what if I want to add another parameter but it's not required the only thing I should do is using a question mark I will say another question mark and its type will be number and as you can see there is no warning because we don't have to call this okay let's create another function let function we are going to pass here a user and it's going to have a username it's a string H it's a number and let's say phone it's not required it's going to be a string and you can add many other items here and I'm just going to write user dot using it there is nothing wrong with this function but here is too long and when you create a project probably you will have more than three properties and it looks pretty ugly here so what we are gonna do is using type aliases basically instead of giving any type here like that we can create our custom type and use it in this parameter what I mean by that I will come here and say type and I will say user type and it's going to have a username string H is a number and four and we can use this type everywhere let's create this function again I'll say better function and it's going to have a user but its type will be user type console log user and if I enter dot as you can see we have all our properties we can use anything we want and this is why typescript is great you might think that you are wasting time writing those types but actually you are using a lot of shortcuts and moreover your types are safe right now I'm gonna create a functional signature basically we are going to create a prototype of our function and using that prototype we can create different functions what I mean by that so I will say type my function and it's going to be a function and it's going to return let's say void and I'm going to add here some parameters let's say first one is a number and the second one is a string so using this I can create different functions let's say right and its type will be my function it means it's going to take as you can see a number and a string and the inside of my function will be void let's say number and string and I'm just gonna write here num times string and it's great that because I can create different functions and what else I can show you how to give an option I will say type user type but I've already used this type so I will say user type 2 again username age and phone and I'm gonna add here tip it's going to be a string but we are going to have only two options it's gonna be dark or light we cannot give anything else let's try I'll see user with Team its type will be user type 2. it's going to be an object let's give our username h and I will say team by the way it's a column not equal and if I write here code you are going to see our options here I cannot give anything else it has to be dark or light okay I hope you understood how to use types but we have one more thing to use and its interfaces it's just like type but it's the advanced version let's define our first interface and you are going to understand better I'll say interface I will say I user you can give any name here but I prefer using it like that I and my type name and it's going to be an object but be careful here remember how we are defining types we are writing here equal but this time we are creating our object directly I'm warning you because probably you are gonna forget this all the time but at the beginning it's normal when you start using typescript in your projects you are gonna get used to it so I will say username string let's say email and H a number it's like types but let's say we have users in our application and some of these users are our clients and some of them are employees so I can create different interfaces using this user interface let's create employee interface I'll say I employee and it's going to extend our user interface I will say extends I user and I can add here any additional type and employee ID will be number basically it has everything the user interface has but additionally we are going to be using this employee ID let's try I'll say employee and its type will be employee interface we are gonna need a username email h and also as you can see there is still warning because we are missing this employee ID we have to use it let's say one but also I can create a normal user let's say client its type will be a user this time we don't need this employee ID it's that easy guys using interfaces and types depends on your project don't be confused if you need to extend any type just use interface if you don't need just use type and let's talk about generics I'm going to create here an interface or type it's going to be post and it's going to have an ID number title is going to be a string description again string and also I'm gonna add here extra and I'm gonna use here post users or post categories let's say we have an API and we are fetching posts and we can fetch this post with its users or categories let's create different interfaces and you are going to understand better I will say interface and a user I've already used this name let's say author and he's gonna have a user ID it's going to be a number and username string and I'm going to create one more interface or type I category again category ID is a number and category title right now imagine that our post has multiple users and multiple categories and I want to fetch this post using its users or its categories there is nothing wrong with this definition there is no warning but what if in the future we need something else like tags type of this post or maybe I don't even know what I'm gonna need in the future each time I can't come here and create an interface and edit here I just want to make here generic how I'm gonna do that let's come here I will say interface I post better it's going to be exactly the same but when it comes to Extra I'm gonna say take the type as a parameter I'll say t you can write here anything you want but the most common usage is T and use this T here and it's going to be an array basically I'm gonna use here whatever I pass it can be string it can be number or it can be any other interface let's try that's it test me and its type will be I post better and I'm gonna pass here straight and I will say ID title description and for extra it has to be an array and inside this array Will Be Strings let's say string string two I forgot here comma and as you can see it works as we expected and what else you can do you can actually add here a limitation let's create another interface I will say I post even better and here I will say t and it's gonna extend object type and in this case you cannot give any string number or volume again I'm gonna write my types and let's create another post I will paste and as you can see we cannot pass here any string it should be an object so I will say Heidi is going to be a number and username for example in this case I should give here at least one object with this type so I'm gonna say ID and username and there is no problem and also instead of writing this like that you can add your category or author interface that's a interface and as you can see there is no problem because we already have ID and username but if I try to add here something else it's not gonna work and this is how we are using generics let's do the same thing for categories and I'm just gonna change here right now we don't have any limitation we can add here any object we want and you are gonna see in the react lesson how useful they are when we create our states and using react hooks okay guys that's all for the basics we have learned many things and we are ready to use typescript V3 act if you understood this part of the video is going to be really easy we are going to have some different react types and we are going to have different components but don't worry you are going to understand everything okay let's see how to use props with typescript I have created two components pause list and postcard in our page as you can see our component is here and in this list component we are going to fetch our posts and using this card component we are going to show each post so we are going to take a single post as a prop so I will say props and we are going to use this here firstly let's say a title it's going to be props.title and a description and this is our first warning it says there is no type let's write it here it's going to be an object and it's going to have a title string and a description right now we don't have any problem let's call this component in the list component I will say postcard I will import and as you can see there is a typescript warning here and it says you are missing description and title that's cute okay let's open up and our first post is here it was easy that because we know what we are going to pass here but what if we are fetching data from an API if you are using react you can use react query and if you are using next.js I'm gonna paste here my fetching function basically this function makes a request to this endpoint let's see actually what we have inside as you can see there are many posts here and they all have ID title and Body by the way it's not description let's change it like that okay so it's going to make this request and if everything is okay it's going to return the posts array so let's call this function here I'll say const data I will say await and get data right now I can comment this out and create a map here I'll say data.map and for each post inside this data we are going to call our component postcard and if you are using a map don't forget you should give here a unique key ID and right now I can give my title and description of course you can give them one by one but I want to pass my probes directly like that and as you can see there is an error here that because we didn't give any type so I'm gonna come here and give my type again title and description sorry buddy but I forgot here ID is going to be a number there is a problem here because we are using exactly the same type so what can I do I can create my custom type and I can import this type in each component to do that I'm going to open my sidebar and in the source folder I'm going to create new folder and it's going to be types and inside let's say types typescript file and here I'm going to create my type let's say post props and it's going to be title body and also ID let's export this type right now I can use it in my list component let's do it here I'll import and here right now it looks clear and our types are safe and what else you can do here if you want to you can give type for this data remember it's an array and it includes our posts it's exactly the same thing I will save and as you can see they are here okay by the way if you want to structure your props like title and body you can still use it I personally prefer using them like that it really doesn't matter and when it comes to types folder you can use a single file or if you want to you can create different files for different types for example post props DOT type dot TS but it can stay like that I just want to show you and right now let's see how to use components as a prop sometimes we need to wrap our components with a parent component in this case our prop type will be different to do that we are going to be using three components we are going to have this parent child and another child so what I want to do is taking a prop here basically it's going to be our components and I'm going to use them here let's say actually this is the parents and I'm going to use my child components like that and right now these children has any type but we are going to be using react components so I'm gonna come here and say children will be react and react not let's try I'm going to open up my page and in this page I'm going to call the parent and insight they'll say child let's see as you can see this is the parent and our child's component and also I can call my second child and perfect this is what we are using to wrap our components if you are using mixtures in the layout file you are going to see exactly the same thing we have a root layout and we are wrapping our entire application with this layout and we are using these children and it's a react node okay so let's see how to handle events with typescript as you can see we have an input here we will be able to search using this button basically we are going to need on change and on click event and here we have two posts using these buttons we are going to delete our posts to do that we should pass our post IDs so right now you will see how to use events and how to send parameters I'm going to open up my page as you can see we have three forms here posts and delete buttons and this search input let's start it on click event I'll say on click and I will say handle click let's create this function const handle click like that and right now what I want to do is preventing default behavior of forms because when I click on this button as you can see it's refreshing the page I don't want to do that remember what we are doing we are taking the event and writing here event prevent default but first we should add here the event type which type we are going to write here it's really easy to find I'm just gonna come here hover over my own click event and you are gonna see that it's a most event handler and it means our event is mouse event so I will say react dot mouse to end and inside we shall pass the HTML element again as you can see it's a HTML button element I'm just gonna paste it here we are doing this that because it can be an element we can write on click event for this input for this form or other HTML elements we have to pass here which one we are using so if I say event dot you are going to see all these methods that we can use I will say prevent default and let's write here something searched of course I'm not gonna write any search functionality we are just going to console log this I will click and as you can see it's not refreshing the page and our text is here what about this text input we are going to be using on change methods let's say handle change and I'm going to create this function let's actually Define here again event and this time let's check as you can see it's a change event handler in this case our event will be react.change event and the HTML element will be HTML input element it's that easy guys by the way I forgot here equal sign and let's use this event I will say console log event Target and value let's check I'll say hello oops and as you can see it works and finding events type is that easy guys if you are not familiar with typescript seeing this kind of types can be scary but as you can see only thing I should do is come here and hover over any event or any HTML as you can see HTML button element vs code and typescript does everything for us by the way this is because of the extension I'm using it shows the result of your functions without visiting browser console by the way I'm gonna create a video about my favorite vs code extensions next week so you can see what extensions you should use as a web developer if you don't want to miss that video you can open up Channel notifications and after this information let's come here and handle this deleting functionality I will say on click I'm gonna be using a function because we are going to pass our post ID handle delete and I'm gonna pass here the post ID which is one so I can do the same thing for the second one and let's create our function again it's a click event and we are clicking on a button I will use exactly the same type and also we are going to get our ID is going to be number and again you can prevent default we don't want to refresh the page and I will say console log post ID has been deleted by the way we didn't pass our event here as you can see there is an error let's take our event and pass it here if you are not using any parameter you don't have to pass this event as you can see it's just a function name but we are able to use our event but if you are using any argument you should pass it like that okay let's try I'll click here as you can see post one and post 2. this is how we are using react events and you don't have to memorize anything just hover over your elements and events and you are gonna see that after creating a couple projects you won't even need to check any type you will just write them by heart okay I'm gonna close here right now you are gonna see how to use use statehawk with typescript as you can see in this page we are going to have this input and I want to store the username using a use datehook and also I'm going to create a user use State and when I click on this button we are going to set a new user you are going to understand better right now as you can see this is our page let's create our view States first one will be username set username use state at the beginning is going to be an empty string and one more and it's going to be user and set user and at the beginning it's gonna be now let's create here on change event and when we change this input we are going to update this username remember what we are doing handle change we are going to take the event and remember which one we are using it's going to be change event and HTML input and whenever it changes we are going to update this username I will say event Target and value and when I click on this button and I'll click we are going to update our user using this username I will say const handle click you and react most event and I'm going to pass here my HTML element which is the button element and again I will say prevent defaults we don't want to refresh anything and I'll say set user let's say name will be the username let's create one more thing here and it's going to be session ID and I'm gonna use here math and random of course it's going to create a random number between 0 and 1 but doesn't matter it's just an example and as you can see there is a warning here and it says you are giving name and session ID but at the beginning you said it can be null to prevent this error we are gonna use generics and let's write here our type actually I can create here I'll say user type is going to be session ID number and name of course you can use this types folder but I'm going to write them like that so you can see better it's just for the tutorial purpose and I'm gonna come here and say it can be user type or no in this case we don't have any problem and I can write here any condition I will say if there is a user right here user dot name logged in if it's not show this for and as you can see there is no warning here that because we are using a condition if there is a user it means it's not now anymore its type is user type and inside this type we have a name this is why there is no warning but if I use my username directly here now you say user.name as you can see there is a warning that because at the beginning our user is now in such case you have to use here a question mark basically it checks the user first if it exists it writes its name that's right here be aware so you can see this in the GitHub repo story and that's all I'm gonna close here right now let's see how to use use reducer and use context hooks I'm gonna create a context API and we are going to have a team State and in that state we are going to have the team color and theme font size using different actions we will be able to change the theme and the font size since it's a typescript tutorial I'm not going to Deep dive into use reducer or use context if you don't know how to use them or what they are you can watch my use reducer video and to learn context API you can watch my previous video if you already know them let's continue I'm going to come here and in the source folder I will create the context folder and we are going to have team context and right now I'm going to create my reducer to do that we are going to need an initial State I will say const initial state I will say team at the beginning is going to be dark font size let's say 16. let's create our reducer I'll save const reducer remember what we are passing here we are going to have a state and action and using action types we are going to change our state to do that we are using switch case block but as you can see we don't have our types let's create them again I'm going to create them here I'll say type State type is going to be team string font size is going to be a number and what about actions I'll say action type action basically is an object that takes an action type and payload and in our application for example we have two action types first one is change team and the second one is change font size we shouldn't pass anything else so I'm gonna write here type should be change team or change font size nothing else and also we are going to have a payload when we change font size we will be able to send any number at the beginning it was 16 pixels but you can add here any inputs and you can send any size basically it's going to be a number and let's write them here I will say State type and action type okay let's take our action types remember it can be only change team or change font size and the first case will be change t as you can see it's here in this case the font size will be the same but I'm just gonna change here if it's dark it's going to be light if it's light it's going to be dark let's do that I'm gonna return a new state I'm Gonna Leave the font size same so I will say state just change the team properly and I can use here a condition I will say if it's dark light if it slides back let's duplicate this and another action type is going to be change font size and this time the theme will be the same we are just going to change to font size and we are going to take this value from payload I will say action dot pay Dot and by default we are going to return our state we are not going to do anything and this is how we are creating reducers but how we are going to consume this how we are going to dispatch our actions to do that we should create a context API let's create here I'll say export const team context create context and again as you can see it works like use State we should add here our generics but before let's remember what we are gonna pass we are gonna pass an object and it's going to include a state I can send initial value and the other parameter will be dispatch and it's just gonna be a function it can return anything why we need them because using this state we will be able to reach this theme and font size in this case we can change our background color our font size and using this dispatch we are going to send our action types and payloads and we will be able to click on those buttons and change our team and font size so let's add here our generics I will say State its type will be State type and this patch will be react.dispatch and we should pass here our action types as you can see it takes actions we have already created I will say action type why we did this that because this patch is a function but it cannot be any function it should be a dispatch function and takes only those action types nothing else and in this case our types are safe and the possibility of making any mistake is right now really low it looks confusing but trust me it's a Time Saver you are not gonna see any errors okay so let's take this state and dispatch function from our reducer firstly I'm going to create my team provider that we can wrap our applications export const team provider is going to take a children remember what it's type I will say children react react not and we are going to return a wrapper teamcontext dot provider and right now we can wrap these children and as you can see there is a warning and it says when you create your context API you said you're gonna pass this state and dispatch but you are not passing anything let's pass them of course before we should take them using our reducer I'll save const ate dispatch use reducer and I'm gonna pass here my reducer what was the name okay just a reducer and also we are going to have the initial state and that's all let's pass them I will say value state and dispatch as you can see we don't have any error right now we can wrap our application with this provider and after that we will be able to use the state and dispatch function let's wrap our app I'm going to open up my main layout if you are using pure react you can directly use your app.js and here I'm gonna wrap my application using team provider okay let's open up our page and use our context API here I'll say const ate and dispatch use context hook and I'm going to pass here my context team context let's see what we have I will say console log state I'm going to open my console and as you can see our object is here and it includes our team and font size perfect so using this button I'm gonna dispatch change Team Action let's do that I'm going to come here and say oh click it's going to be a function and I will say this patch as you can see we need to pass here our action type and action type includes a type and in this type we have change font size and team I'm going to choose team and right now we have a problem that because we don't have any payload but we don't need any payload that because we are using a condition here and we are not changing anything using payloads but for this action for example we are gonna use so if I come here and paste here and change my action change font size I can add here any payloads that's a 20 and as you can see there is no error so how we are going to fix this problem you might think that come here and right here question mark so it's not going to be required you are going to see that there is no problem but if you scroll down you will see that we have another problem it says in the reducer you are using action payload but at the beginning you said it can be empty and there's a conflict here typescript just wants to be sure that you are not gonna pass an action without payload because you are using it here so what we are going to do is splitting our action types so I'm gonna comment this out and I'm gonna create two different action types the first one will be let's say color action type in this case our type will be only change team and we are not going to need any payload and the second action type will be size action type and it's going to be only change font size and right now we can send a number and right now we can use color action type or size action type I can come here and say color action type or size action type but it's not a good idea because when you add another action type you have to come here and use another or and another action if you want to be more professional you shouldn't write the same thing again and again and it can cause a problem what I'm gonna do is keep the same name and I will come here and create type action type and it's going to be either color action type or size action type so we didn't change anything here we just split our action and we are calling this discriminated Union and right now let's check our page as you can see there is no problem and if I check my reducer as you can see it works as expected let's try I'm gonna click here and as you can see our team is light dark light and font size right now it's 280. this is probably the most complex part of typescript with react but if you understood here it means you won't have any problem with typescript anymore I mean of course there are many other features of typescript but you won't have any problem to understand them okay I'm gonna close here and here you are gonna learn how to use use draft hook as you can see we have two inputs I'm going to show you two different usage of userf hook in the first one when we refresh our page our application is going to focus on this input directly even if I don't click here it's just gonna focus on this input and for the second one I'm gonna create the user version of on change methods when I write here any name and click on the send button we are going to take this value using use left let's open up our page as you can see our inputs and button so I'm going to create my refs I will say const input draft use refwork and as you can see it takes a generic type and remember we are using input so the type will be HTML input element like that and at the beginning it's going to be not and I'm going to create one more use ref and it's for the second input let's say username input trap and let's use them here ref will be input wrap and ref will be username input ref and let's try to focus here focus on this input to do that we are going to be using use effect hook and it's going to run at the beginning dependency array will be empty and I will say input wrap current value and Focus as you can see it automatically adds this question mark because at the beginning it's going to be null and we are able to use this method that because we are adding here which HTML element we are using and let's see how it works as you can see it has focused I will refresh the page and it's here perfect what about here I'm gonna take this username to do that let's create here on click event handle click handle click I'm not going to use prevent default because it's not a form and I will just say console log username is the username input ref current value and it adds this question mark again I will say John and it's here why we are using user here because when you use use State and update the username whenever you change this input it means each time you are re-rendering your component but in this case there is no rendering in my applications mostly I prefer using user app like that and what else I'm gonna show you let's close here let's actually use generics again and try to remember how to use it I have two components here item lists and item right now I'm gonna create my props I'll say type item props I will say ID number title string and remember in the typescript tutorial in the generics part I added here extra it was an array but the type of this array was generic and remember how to use it I will say t and I'm just gonna write it here let's take our props it's going to be item props and I can add here any type I want let's say object for example in this case if I go to the parent component and call my item here I shall pass the ID title and extra and this is going to be an array and I can add here only objects if I say John for example as you can see there's an error because it's not an object so I will say ID one username John as you can see I'm adding a user into this extra array okay I just wanted to remind you how to use generics and right now I want to show you how you can combine types and how you can use typescript exclude let's close them and open up our shape list and shape component so what I want to do is create here a shape type I will say it can be only Cube Square rectangle or triangle and I want to create different type and it's going to be two Dimension shapes let's say two dimension shape type and I will say it can be any type but not Cube because it's not two dimensional to do that we are going to be using typescript exclude and I'm gonna pass here the shape type and I'm going to exclude the cube let's define here any shape its type will be shape type and I can give here as you can see any type and I want to create another shape let's say two Dimension shape and its type will be two Dimension shape and right now as you can see cube is not here it can be only two dimension right now let's create two other types I will say team type is going to be only dark or light and color type it can be wrapped blue or yellow right now I want to combine these two types to do that I'm gonna create a new type actually I'm gonna take this as a prop let's say item props and I will say color theme type and color type let's take this prop item props and I'm going to open up the parrot component and call this shape here and I'm going to give color and as you can see it's the combined version of our types we can choose anything but also let's say we can use dark or light version of blue and red but we don't have dark yellow only thing I should do is come here and use exclude and right here what you want to exclude and I will say dark yellow oops there's a typo and right now as you can see we have dark and light blue and red but we don't have dark yellow okay that's all guys I hope you enjoyed if you learned something new today please like the video and as I said we are going to create many react and next.js projects together using typescript and once you create projects you are going to get more and more familiar and I believe that you are not gonna have any problem okay that's all let me know in the comments what kind of projects you want to see in the next tutorials don't forget to follow namadev's social media accounts you can support lamade by joining the channel or using the link in the description below I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 27,433

Keywords: typescript, typescript tutorial, typescript course, typescript project, learn typescript, typescript 2023, new typescript course, complete typescript course, typescript react, typescript react tutorial, typescript react props, typescript usestate, typescript react onclick, typescript react events, typescript usereducer, typescript context api, lama dev

Id: WlxcujsvcIY

Length: 66min 41sec (4001 seconds)

Published: Wed Jun 14 2023