Practical TypeScript – Course for Beginners

John smilga teaches this course about the Practical applications of typescript typescript is a strongly typed programming language that builds on JavaScript this is an excellent course for people who want to learn typescript hey what's up it's John from coding anic and welcome to practical typescript course we all focus on practical applications of typescript so you can start using it effectively in your Projects right away during the course we'll cover everything from setting up your development environment to deploying your typescript applications the course consists of three major parts first part typescript fundamentals where we'll explore basic

types interfaces classes generics and rest of the good stuff second part react and typescript where we'll integrate typescript into react projects create typed components and manage state with typescript and the Third part is where we'll put our typescript knowledge to good use and build a modern store application with typescript shat UI and react router if you wish to explore all of the features of the store project it's located at this URL typescript comy sloth ny. apppp again the URL is typescript comy sloth ny. apppp quick sign not during this video will only cover Parts one

and two so if you enjoy the content and wish to work On the big project as well consider enrolling in the full Course located at coding addict IO again the full course is available at coding addict IO okay and first let's recap that JavaScript is considered Loosely or dynamically typed because variable types are determined at runtime and can change as the program executes this means you don't have to declare the type of the variable when you create and variable can hold values of different types at different times so The following code is a valid JavaScript

code however where are we going to encounter an error if we try to run this code correct at runtime and this is manageable if you have few lines of code but the bigger the project the more challenging it will be to spot such technically innocent bugs and this is where typescript enters the picture because it is a programming language that builds on JavaScript by adding static typing this means you can Specify things like types of variables function parameters return values and some other things to help catch errors early and improve the code quality it is

a super set of JavaScript so yes all the JavaScript code is also a valid typescript code now one way to think about it is as follows by using typescript in our project we'll still write the JavaScript we already know but with some elements or sprinkles of Typescript and these elements will act as safeguards or constraints to help us catch potential errors more quickly and without the need for 10,000 console logs when we introduce typescript to our project we will write our app in the TS or in the case of react in the DSX file there

will be a compile or transpile step where all of the typescript code is transpiled to good old JavaScript code and at the end since it is a vanilla JavaScript code we can run it anywhere Quite often you'll hear people say something along the lines of well once I built my first project with typescript it was very hard to go back and build with just vanilla JS and even though I was also very skeptical of such statements I can verify that it was the same in my case yes typescript still has learning curve and yes it

involves more work but at the same time you'll notice how how you're able to fix bunch of the errors quickly at build time without Running around like a headless chicken before we set up a brand new typescript project I want to mention a few useful things if you're confused about some topic or simply want to research a concept in more detail a good place to start is typescript docs which are located at typescript l.org again the URL is typescript l.org also in there under the playground tab you will find a Nifty code sandbox or typescript

playground which I might utilize from Time to time during the course to underscore some particular point it works as follows on the left side we write a valid typescript code and we get back the resulting JavaScript code now you won't be able to build the entire project in there but it is a very cool option if you you quickly want to test something as far as the code editor I'm going to use VSS code and since it's practically an industry standard these days my assumption is that you'll use The same one since I record courses

I use the very basic default theme and when it comes to my extensions I will mention some useful ones once there is a need during the course in order to work with typescript you will need no installed on your machine again something I assume you already have done but if it's not the case please visit nodejs.org again the URL is nodejs.org pick your operating system and follow the install steps also during the course I'm going to reference the main course repo where you'll find source code challenges notes useful references and tons of other useful stuff

so I highly suggest getting a hold of the repo before you continue with the videos just look for my GitHub profile and under the repos search for typescript course repository there are few ways how we can add typescript to our project since it's available as an npm package we can install it globally or on the per Project basis set up the configuration and run the compile step manually the this is definitely an option but we're going to take a different approach which is going to be pre-built template because at this point at least in my

opinion it's a more realistic scenario chances are whether you want to build a nextjs or remix or a good old react app there will be already a template that contains the technology you want to use as well as types Configuration so more often than not your job will be to write a valid code instead of losing your sleep over correct configuration setup for this course I picked V since it's one of the most popular build tools out there but please keep in mind as far as the typescript logic is concerned it's the same if for

example you're going to use nextjs with a typescript template now we want to run one command in order to set up our template and I'll show you two Places where you can get the command First Option you can navigate to V docs which are located at bejs dodev then click on getting started and pretty much you're looking for this command and then we just need to pick the template and since my npm version is bigger than seven I'm going to run my command with the Double Dash now as you can see we have tons of

templates available and the idea is following we go with npm create V latest Then project name then Double Dash go with the template one and pick the template as you can see we can go with reacts as a say not something we're going to use in the part two and three we can also for example set up The View with typescript and we're actually going to start the course with vanilla typescript template so this is just going to be an application built with vanilla JavaScript we're not going to use react and uh to tell you

honestly we Don't really care about the template we just want to use it in order to learn typescript so pretty much most of the first part of the course will spend in one file and you'll see what I'm talking about in a second now remember in the previous video I mentioned the main course repo navigate over here and then look for typescript tutorial and under this directory look for read me and here you'll right away get the command and as A this is something that I'm going to copy in literally a few minutes and I

suggest actually doing the same because in here again you'll find find all of the notes and challenges and all that cool stuff so if you want to save yourself time on typing just navigate over here and grab the command again npm create V at latest then at least in my case the project name is going to be typescript then double dashes then template and we're going to go with Vanilla DS so let me grab the command let me navigate I guess to desktop and and I'm going to zoom in then let me set up my

command and once I have successfully installed the project on my machine I want to open up my text error drag and drop the folder and next we'll take a look at the files and folders available in this template as far as the files and folders we've got over here a public one so this is where We can place the public assets then we have a S one essentially this is where we'll do all of our work a get ignore where we specify which files are going to be ignored by The Source control then index HTML

which is actually going to be our homepage also a package Json something we're going to cover in more detail in a few minutes and also a TS config which we'll cover in Greater detail later on in the course and before we take a look at the specific Files and cover the build step here are a few things I want to do first since it's a node application we do want to install the dependencies so effectively just open up the integrated terminal and run npm install now also again I highly suggest getting the readme since in

my opinion you will find find it super useful as you're following along so just navigate back to the project and somewhere create a read me markdown one and just paste the contents Over here save it and once we install dependencies now we also get the node modules so this is where all of our dependencies are located then we want to go with npm run Tav which is going to spin up our project in local development and we're looking for Local Host 5173 and this is what we should see on the screen so essentially there's some

images over here a text as well as the counter now if I'm being perfectly honest like I mentioned previously we Really don't care about the actual vanilla JS application I believe towards the end of the first part of the course yes we will build a tiny app but most of our time we'll spend over here in a source one in one specific file called tutorial DS where effectively we will just learn all the typescript fundamentals now if we take a look at the package Json we see that we have the dev one this is the

command we just invoked and also there's a build one now Before we run build I do want to create a file and showcase how our setup is going to look like now one interesting thing that I do want to point out notice how before the build command they actually invoke tsnc so notice how typescript is a Dev dependency so before the project is built first it's compiled so that's the step I mentioned previously where we're going to write all of our code in the files with Ds extension and once we Perform the build step it's

going to spit out the vanilla JavaScript code so if we take a look at the index HTML like I said this will be our homepage so for example if you want to change the title it's definitely an option then they have over here this div with an ID of app and effectively in a second you'll see how in the main DS they in Jack the images the divs and all that into this app one so now let's navigate to the main DS in here they import Styles again something we're not really concerned with also two

images the typescript one and V1 and also a counter and then they select div with an ID of app and like I said they dynamically inject the elements into the d as you can see there are some already sprinkles of typescript and essentially this is something that we're going to cover during the first part of the course but most of the logic should look very familiar correct Because this is straight up JavaScript again with just sprinkles of typescript now if we take a look at the counter it's going to be same idea this is straight

up JavaScript with the only difference that now we're looking for element and actually we specifically say that the type is going to be HTML button element now how is our setup going to look like since I said that I mean we really don't care about this code and to tell you honestly we're not actually Going to look too much in a browser either most of the time will spend in the error well in here in the source I want to create a new file in my case I'm going to call this tutorial TS the name

is totally up to you just make sure that you add the TS extension so we're going to go over here with tutorial then TS we create a new file and for now I just want to log just so I can see that everything works and I'm going to go with typescript and then tutorial let me Save it and then in order for this code to run we just want to navigate to Main TS and we just want to import a file that's it we're not going to do anything else we'll simply go with import and

now we're just looking for our TS file so tutorial and TS and the moment we do that once we navigate to the browser if everything is correct we should see that console log and if that's the case we are in good shape and before we move on to Typescript fundamentals let me show you the result of the build step again let's just recall that before V our build tool builds the production ready application it's actually going to compile our code which essentially just means that all of the typescript elements we're going to have in our

code are going to be transpiled to good old vanilla JavaScript and essentially during this video I just want to showcase that so don't worry about the code I'm going to Write in fact you don't have to follow along I just want to showcase the end result so let's say if we're going to add something typescript for example interface of course something we're going to cover during the first part of the course and I'm going to go with name String and ID number and as a sign note essentially it's just a shape of an object and

then I'm going to create the object and I'm going to go with some value so add the type over here and now I just need to provide name which has to be a string now so I'm just going to go with random and comma and then we're going to go with ID and then one two 3 and then let's also log so let's go with some object so once we navigate right now to a terminal we have few options if you want you can always stop the dev server and essentially you do that with contrl

C or you can just open up a new terminal window and that is going to be my Approach so essentially now I want to Go with npm and not Dev but we're actually looking for build so we run this command if we don't have any typescript errors we're going to be successful and now notice we have this this folder so this is our production ready application we still have index HTML okay everything is beautiful and then in the assets we'll have the index JS so this is essentially our application in vanilla JS and if we

take a look at our code so Notice I have this console log typescript tutorial so I clearly know that it's coming from our file notice there is no interface anymore again there is some kind of minified object over here and effectively we also conso log it that's it so there is no interface there is no type string or type number or in fact any of the other stuff that we have here as far as the typescript elements so again essentially we'll write all of our logic in files With Ds or DSX extension if we're working

with react and then once we build our project we're going to get back our good old vanilla JavaScript code which essentially we can run anywhere so hopefully it's clear what's happening during the build process so now let me clean up our project first I want to remove the disc folder then also I'm going to remove my second terminal window and at the very end I just want To remove this code from tutorial yes so this is going to be our starting point essentially we have console log in tutorial DS and if we take a look

at the browser we should see over here typescript tutorial and if you have the same result now we can move on to the next task okay and let's start our typescript journey by discussing type annotations which allow us to specify the variable type so let's say in my project I have a variable by the Name of awesome name and if you have watched any of my courses and tutorials you know that the most awesome name ever is shake and B since I'm working in a typescript project I can actually explicitly set up the type and

the syntax is following we go with colon and then since I want this to be a string I type string now there are quite a few types and I'm not going to list all of them I really find it pointless essentially the most straightforward Ones are string number and Boolean and again the syntax is going to be the same so we just go over here with the colon and then the type and of course as we're working through the course we'll get to know the other types as well and the moment I set this type

for my variable I get two things out of the box essentially it can never be something something else so I can go to the next line and set it equal to a function and also I'll WR way get the methods that Are associated with this type so in this case it's going to be a string so just to demonstrate that if I go to the next line and if I set it equal to a value of something this is still valid why well because type is string so everything's correct correct also I can go to

next line and set it equal to awesome Dot and notice right away I get only the methods that are associated with the typ string which again is super awesome because Essentially I avoid some unnecessary bugs so in this case I'm just going to go to application and now if I log this value if I go with awesome name and take a look at my console if everything is correct should be equal to a something so we set it equal to different string value and then we ran the two uppercase method now one thing we canot

do is something like this where I go with awesome name and set it equal to 20 which is a different type so notice Immediately typescript starts yelling at me type number is not assignable to a type string and I want to repeat the same thing for the number as well as the bullion so just so it's clear we're going to start with some kind of variable in my case I'm going to go with amount I'll set it equal to a number and again I can do anything that's allowed with the numbers for example and set

equal amount 12 minus 1 something like that But cannot set amount equal to pens that's not going to work right away typescript is going to be super helpful it's going to say Hey listen you said this is going to be the number so yeah you can run the number methods you can do calculations but you cannot just reassign it to something else lastly let's take a look at the Boolean pretty much same deal we're going to go with is awesome we're going to add a colon set up a Boolean type for Star it's going to

be true then we're going to set is awesome equal to false and then let's try to set it equal to shake and bake again the most awesome name ever so we're going to go with is awesome and let's go with shake and bake again cannot do it because the type is bulling and essentially in the process we're just avoiding this entire debacle where initially it can be one value then three lines later it's Something else and then we're turning into a third thing and then start running some methods on it essentially this is static so

now we say Hey listen this is going to be string and string only same goes for number Boolean and in the process we just avoid bunch of unnecessary bugs that come from typos that come from just using wrong methods and that sort of thing and before we work on our first challenge let me quickly mention something Typescript is actually really smart and can infer the type of the variable based on the values when it's defined now the fancy name is type inference but essentially for us it just means that we can remove all of these

type annotations and we'll still get all of the goodies that I covered in a previous video so now if I hover over the awesome name notice how based on the value when the variable was defined typescript can nicely infer the type so in this case It's string then it's the amount and then when it comes to is awesome typescript knows that it's a Boolean now don't dismiss the type annotations we're still going to use them but most likely not for such straightforward variables type inference also has some gotas especially when we start working with more

complex values so yes typescript is always going to try to help you when it comes to functions when it comes to variables it will try to kind of get the Type based on the value and obviously it's super awesome because it saves us time notice I don't have to go to Every variable and just make sure that the type is set but there are some questiones we need to aware of and don't dismiss type annotations because we're still going to use them throughout the course just not four variables like this okay and now it's time

for our Challenge and since it's our first one I will cover the steps as well but with the Future challenges just so we can save little bit of time I will most likely right away start working on the solution also since it's our first one it's going to be extremely straightforward I just wanted to get the ball rolling just so we get used to this idea that we learn some stuff and then we work on some kind of challenge so I want you to create a variable of type string and try to invoke a string

method on it then same is going to be with a Number create a variable and try to perform a math operation also I want you to create the Boolean one and perform The Logical operation and then try to just assign some values to those variables that are different types so just try to come up with something that shouldn't supposed to work and see whether typescript complains about it now you can use the type adaptation or you can also use the type inference That's totally up to you again super straightforward challenge where just want to navigate

to tutorial I want to come up with some kind of variable for my string in my case I will use the type annotation don't ask me why just think that it's going to be better in this case so I'm going to go with hello and then let's go with typescript okay beautiful then let's run the two oper case so greeting is equal to greeting dot then two uppercase let's Invoke this this should work we should have no issues and as long as I don't have the red squiggly lines I'm good to go so typescript is

not yelling at me then also let me set up the age so in this case it's going to be a number I'm going to set it equal to 25 then let me add a five to it okay also works everything is beautiful and then we want to go with is adult so that's my Boolean let's add a type annotation here AG is let's say bigger or equal to 18 now this Should be true and you know this is the case where I will log it so let's see is adult is true yep that's the one

so now let me just set it equal to the opposite I'm going to go with his adult is equal to opposite is adult again let's log it and now it's going to be false and and then somewhere here let me just try to set the greeing equal to 10 that shouldn't work also we can go with age and set it equal to 30 so string again we're going to get the error and lastly We have the is adult and I'm just going to set it equal to yes and as you can see all of them

result in errors so again we have one type and typescript is not happy when we just randomly decide that our variable is going to be of different type all right and before we continue with tutorial let me show you something interesting about the setup you see even though we have these typescript errors over here we're going to be able to run our project locally so What am I talking about well if I go here and set up the console and log and in my case I'm just going to look for all three values So reading

age and is adult if we navigate to a console you can see first of all that all of the variables have the values that they're not supposed to so typescript is complaining but it's still works and also notice how our project didn't crash we're just getting these typescript errors correct so here's the deal when We're working with typescript actually project is going to work even with the errors locally but whenever we want to host a project what do we need to do well we need to build it that's usually the setup and in order to

build it we'll have to pass the typescript checks so if we try to build with typescript errors we're going to fail and as a result we won't be able to host the project let me show you the package Json notice over here So we have Dev command which essentially just spins up the dev server and we also have the build command and remember before we even run feed build we actually compile this with typescript and again if we have some errors we won't get the I believe it was this folder where we have the static

assets which in turn are going to be used to host our project so let me showcase that just so we are on the same page first I want to stop the dev server let me run Npm run build so at the moment I have the errors typescript errors and immediately I just get back these error messages in my console so in order to fix it what do we need to do well in this case it's sort of simple where can just comment them out delete them whatever doesn't really matter again let me clear everything here

let me run the last one npm run build and now since I don't have any typescript errors notice I have the this Folder and this is where I have my production ready application so again locally even with typescript errors you'll be able to run the project however you have some issues once it's time to to deploy it once it's time to build the production ready application and up next let me introduce you to a union type which allows a variable to hold a value of multiple distinct types for now we're just going to take a

look at some basic examples but since Union Types are super powerful it's not the only time you'll see them in the course so once we start working with functions or and all that yep we're going to use the union type as well so let's imagine I have a variable by the name of tax and typically it's a number correct so I can set it equal to 10 typescript can nicely infer the type and I'm good to go but let's imagine that whether I'm getting it from the API or whether user provides that value it Can

also be a string I can go here set up my colon then go with number so it will definitely be a number and I can use this pipe operator and then I can just add another type which in my case is going to be string now please keep in mind you can add 10 another types but I mean in our case we're just going to stick with two but yeah you can go here and add for example Boolean it's definitely an OP option so now I can go to a next line and I can set

it equal to A 100 and typescript is not going to complain because yeah one of the types is actually number now I can also go here and set it equal to a string and in my case I'm going to go with uh let's go with $10 over here so both of them are valid because now I have Union type where it can be either a number or a string now once we start working with more complex examples yes we'll have to do some checks and all that so all of that is coming up but This

is a super powerful concept where essentially we can say to typescript hey this is going to be either this or it's going to be the another type now also something that I was blown away is the fact that we can set up the literal value type so that's the fancy name essentially it just means that I can provide the literal values let's imagine we have a request status so that's my variable now what are the typical values for the Request status well quite often it's pending success and error so for starters I can just go

here with pending so that will be my initial value then go with the colon and now I can just provide the potential string values which are going to be pending then again I use the pipe operator I provide success then another pipe and I'm going to go with error and what's super super cool is the fact that whenever I work with this request status Notice I right away get these suggestions so it can either be error pending or success and again it helps me to avoid errors because it's way harder to mistype something and also

I kind of just go here and say random I mean first of all it doesn't match my suggestions and second right away typescript is going to complain so I don't have to find doubt about this bug in the runtime I actually can see it right away as I'm building The project so let me go here with success error is going to work so there's nothing wrong with that but if I'll try to set it equal to random as you just saw I mean typescript is not going to be happy about it topic we're going to

come back to when we set up more complex examples and again Union types allow us to set up multiple types for the same variable and while we're still in a roll let's also cover type any which allows us to opt out of the Type checking so I'm going to create a variable and I'm going to name it not sure so not sure now I will set it equal to four and since we already covered that typescript can infert a Type we'll see over here this number but I can also go with colon and set up

any over here now any means exactly what the name implies this going to be anything I can set it up equal to function string Boolean whatever so in next line can say you know what not sure is actually going To be a string maybe a string instead then on next line I can set it equal to false and as you can see that script is not complaining now as you're looking at it probably the first thought is well wait a minute that's how variables behave in JavaScript and you're absolutely absolutely correct now as with everything

in programming there's bunch of fights over it whether you should use any at all as far as my Two sents be very careful when you introduce any to your application because it can spread like wildfire so you started off with setting up one variable type any and then next thing you know you have any all over your application because for example when you return any from the function then the result is any and on and on and on and on so definitely have a good reason why you want to use any and as I note

any is something you'll see quite Often when typescript is trying to come up with a type but we haven't provided any clues for example if I'm just going to go with some random and I'm not going to set up the value as you hover over it notice now this is going to be type any so this is something we quite often get by default when typescript is trying to get the type but I mean I haven't provided any clues what this value is going to be and this is essentially something that we'll constantly try to

Fix where for example for functions implicitly it starts with any but we don't want it to be any we want it to be some kind of type so just be careful when you use it it's definitely an option it's useful if let's say you want to test something it's also useful if you have a pretty big codebase and you just slowly want to introduce typescript so you still want to run the project but you slowly want to add it to your project yeah it's definitely the case Just again be very mindful when you set something

any because next thing you know it half of the application is going to be any and then at that point I mean it kind of loses the sense to use the typescript in the first place again those are just my two scents if you go to Google you'll find definitely way stronger opinions but let's just leave it at that and let's move on to the next topic and next let's see a practical application of type annotation where Essentially I have a list of books so I just have some strings over here and I also have

a variable which at the moment is undefined and there's no type since again I want to showcase what type is going to be set by default and I want to set up a loop where I iterate over and then if it matches one of these titles over here then I'll set the variable Found book equal to that title so first let's set up the loop I'm going to go with four off Loop so lead book off Books then we're going to set up the condition so if book and I think I'm going to go with

the first string over here so I'm going to go with 1984 if that's the case then phone book is going to be equal to a book and we're also going to break out so let's add the break keyword let's save it if everything is correct this should be equal to a title so we can actually go with log and then found book let's take a look at the console Yep we are good to go now everything is awesome but let's take a look at the type we have over here by default it's actually set to

any which leads to problems because anywhere whether that is in the loop or over here I can do something like this I can set it actually equal to 10 so typescript is not stopping me and this is the behavior which I don't want because I actually want it to be a string otherwise yeah in here it's going To be a string if I'm successful inside of this Loop but then eventually it might turn into a function again good old JavaScript variable Behavior but I don't want this I want this to be a typescript project where

I explicitly know what is the type so what's the solution well we can navigate back over here and and we can set it equal to a string but now we have another problem so let me remove these console logs how do we know that for sure it's going to Be a string because keep in mind this runs when at runtime so if let's say I set it equal to 1983 well this Found book is not going to be equal to a book what is it going to be equal to well remember by default variable are

what undefined so if you'll try to set up some kind of logic over here assuming that it's a string typescript is going to yell at you it's going to say Hey listen you are using it before there's even any kind of value Because again typescript is not going to check whether at the runtime this will be equal to a book so yeah we can set up the logic over here where I can say if for sure the Found book is equal to a book typescript knows that actually these are strings so we can run the

method on it for example again let's go with length so this is going to work but we cannot do it outside of the loop because in here there's no guarantee that actually This will be a string so we need to set up the union type where I'm going to go with okay it potentially could be a string but by default actually it is undefined so it's another type that we can use so now by default it's going to be undefined if we're successful it's going to be equal to a string and what's super super super

awesome is the fact that typescript is going to be extremely helpful where if you try to again go with the good old length notice how it Will immediately add this optional chaining why well because it can be undefined and we can see that if we take a look at the error message if you just added dot notice Found book possibly can be undefined and therefore typescript is going to add that optional chaining so now we only run this length if it's actually equal to a string if we have some kind of value so if we

won't be able to find a book which is the current case then this actually won't trigger The runtime error now if we're successful then we'll be able to nicely see the length of the book you know what I will change this one around I'm just going to go here to Found book and set it equal to uppercase let me do it this way so we're going for uppercase let's invoke that and then this one I'll just log it again it really depends whether we're able to find the book or no so now let me move

this pH book set it up here in my my Console and let's see what is going to be the result so I'm going to navigate over here if everything is correct I'm going to get my four if I'm not successful then essentially it's just going to be undefined but I won't have that runtime error where I'm trying to access the property on undefined hopefully that is clear okay and before we move on to the next topic let's work on a small Union type challenge where first we want to create the order status And in there

we'll set up the literal types and also we want to set up the discount which can be a number or string type and you know what just because I like to break the rules I'm going to start with the second one doesn't really matter I'm going to go with number or string by default I'll set it equal to 20 or any other number value and I also want to test it whether I can set it equal to 20% now this works but if I'll try to Set up discount equal to True essentially a Boolean typescript

will yell at me which is exactly what we expected and also let's set up that order status so order status variable by default is going to be equal to processing but we want to set up those literal types so this variable can be only one of these values so we're going to start with processing then we'll set up our pipe and we're going to go with shipped and also we want to add Delivered over here so now we can go to the next line set it equal to one of these ones and everything is going

to work but if I'll try to set it equal to canceled again typescript will yell at me so let me just set this one up quickly where if we go with order status I just decide that I'm going to pass this value over here not going to be successful since I can see this red squiggly line let me comment this one out we're done with the challenge and up Next we're going to discuss arrays in tapescript and as far as the arrays in typescript the general idea is following let's say I have prices array and

it's all numbers so we're going to go over here with 100 75 and then 42 if I want to set up the type which is something I want to do again same deal we go with colon then we go with type in this case number and then we set up the square brackets so now I'm essentially telling typescript That this array will only have numbers so if I had a number 34 everything is fine if file tried to stick hello I'm going to get the error because this one is type string and I explicitly told

typescript that this is actually going to be an array of numbers and the same is going to work if I will try to invoke push so if I'll try to add the item number is fine string will cause the error so let me comment this one out the same works with string array Let's say we have fruit and this is going to be equal to apple and orange we want to set up the type over here in this case it's going to be a string and the same rules apply if we try to add the

item that doesn't match type we get the red squiggly line now be careful with the empty square brackets so if we go here and just come up with random values and set it equal to empty square bracket so if we won't provide the type Over here typ script just assumes that this will always always be an empty array so if I set it equal to my array and start adding items typescript will immediately complain and notice as we hover it says well type string is not assignable to an Mt right so be careful with this

one I know it's temp thing also be careful when you don't explicitly set up the type so if I were to create an empty values array typescript will get the type but Check it out now the type is any so just like before we'll run into those issues because now we can change these values any way we want so we can take the string then it turns into a number and same deal so be careful yes typescript will infer the type but most likely you don't want to set it equal to any so this is

the case where we want to create the MD but we explicitly want to say yeah this is going to be type number or string or Boolean or whatever now Also while we're still on a subject of typescript inferring the type let's take a look at this example let's say I have the names array and I have over here Peter and Susan so if we hover over the names everything is correct typescript sees that we have over here a list of strings and it correctly says the type for this array is string but here's the gotcha

since typescript is inferring those values based on what we have over here in the array it doesn't stop me From doing this and now if we hover over it we can see that actually we have this Union type like I said we'll be coming back to this topic and now we have string or number so essentially now I can add numbers as well therefore be careful when you're relying 100% on typescript to set the type it's not going to stop you from adding different values to the particular array and in that case well the type

also is going to change now we can explicitly set up the Array to be one or the other type so I can go with array for example and I can say that you know what this array is going to have either string or a Boolean again we still set up the square brackets over here and we set it equal to an array where we set up those two values so we can go with Apple then true which is a Boolean and the same deal orange and let's set the false one over here and with this

in place we can start working on our next challenge Okay and once we're familiar with arrays now let's work on a tiny challenge where we want to set up the temperatures array which will be type number and colors which is going to be type string and then we also want to set up the mixed array so let's start with temperatures essentially our array of numbers now this one probably is going to be the hardest as far as the spelling yep notice over here me fix that one okay good that took A while then I want

to set up my type number and we're going to set up 20 then 25 and then 30 and let's try to push I don't know a string of hot so let's actually then go with push and let's try to pass in the string and we won't be successful so we can nicely comment this one out after that we have colors one so this will be actually type of string and in here we're going to go with red green and blue let's save it And let's try to add a Boolean why not so colors here dot

then push and we're looking for a bull and mow which is not allowed and then let's set up the mixed one so we're going to go with variable in this case I'm going to call this mixed array and this one will be either a number or a string so number pipe and we set up a string so let's set it equal to our array and in here you know what just to make it interesting why don't we try to add true so bullan and notice Right away I'll have my error so let's go with one

then two and then we want to add three and with this in place we can move on to the next topic and up next let's discuss object in typescript in order to do that I'm going to create a car and here I'm going to set up the brand that one will be equal to a let's say Toyota and also I'll set up the year so first let me set up the string over here and then let's go with year and we'll set that one equal to a number and If we want to set up the

type annotation it might look a little funky but we want to do it this way we again we go with colon then we go with curly braces and then one by one we set up those properties over here so I have a brand and what is the type well it's going to be string but also I have a year and what is that one well that's a number so again either if I try to add some property manually here where I'm setting Up the object or for example if I do it dynamically by going card

Dot and then the property value unless this property is in the type annotation it's not going to work I think I'm just going to use the color example so let's say I'll set up the color and it's going to be equal to Blue notice right away I have the complaint because the property is not in my type annotation and the same goes if I go with car and brand yeah I can set it equal to Ford since that's the Correct type but again if I go with car and color it's not going to fly so

typescript will immediately complain now if you're looking at it and you're thinking to yourself well boy this is super clunky over here I have this object and then actually this is going to be my type annotation don't worry this is just essentially the most basic setup but I wanted to cover it since I wanted you to understand how everything works under the hood but eventually we Will cover something called type aliases where we will nicely be able to set up this shape somewhere separately and effectively just reuse the variable so again you won't have this

clunky code most likely you won't use it but I definitely wanted you to kind of see this type of syntax so now once I have my first car well I can create another one in this case it's going to be a car one since I'm already using the car variable and then I'm going to go with a Different brand and also I'll change the year and I don't think it's necessary for me to repeat all of the steps hopefully it's clear whatever we set up in this type annotation needs to match what we have in

the object otherwise typescript is not going to allow us to compile essentially our code and now let's tie two things together I want to tie the arrays with the object and in the process we'll also cover how we have read only option with the typescript as Well as the optional properties so first I want to create three objects I want to create book pen and notebook and I want to add them to the items array which by default is going to be let's say empty but we'll set up the types in a second so first

let's just go with items not going to place anything inside of it and then let's create those three variables so in here we're looking for a book it's going to have two things we're going to go with title we'll set it equal to book And we'll also have cost okay set it equal to 20 and then I'll change this one around to pen okay and the cost I mean again totally relevant I'm going to set it equal to 10 I guess and then I want to go with notebook but for Notebook actually want to remove

the cost and like I said now I want to store all of these three values over here in the items but here's the kicker though I do want to make sure That all of them have the same shape now as we're looking at it we can clearly see that it's not the case with the notebook but let's imagine that we don't know that and at this point we have two options we can either repeat the same steps like we did for the car so effectively I can just set up this type annotation for all three

of them one by one or since I have an array and I can also set up the type for array I can do it in one place where I have the items So far we know that we can set up the array to be equal to a string or a number or a bullion correct and we also cover the type Union but we can also do something like this where I can say yeah this is going to be an array of objects and then each object needs to have this particular shape now what is going

to be the shape I'll say title is equal to a string or I'm sorry I don't know why I'm placing this in the quotation marks and then also I want to set up a cost so We're going to go with cost and we'll set it equal to a number and now one by one as I'm adding these items to my array once I get to a notebook check it out now typescript is like Hey listen this notebook that you're adding well notice it only has the string it doesn't have the cost so whatever type you

set up over here well it doesn't match so again super useful where instead of setting them one by one if we have an array we can set it in one place because We also can set up types for array now what is the solution well technically we can go back and add cost over here but we also have this option of adding optional properties now please keep in mind you can use the same optional property over here as well when you're setting up the type annotation for an object I'm just doing it here in Array

since this is where we're currently working hopefully that is clear and now I don't have the error because when I Set up the cost to be optional well it could be there or it potentially could be missing which is the case for a node and what's also really interesting is that with typescript we can set up the properties to be read only again same deal of course we can set it up over here but in my case I'm going to do that for the title where right before I set up my property I'm going to

go with read only so now if I go with items and I access let's say the first one here and If I try to overwrite the value so dot title is equal to a new book for example it's not going to fly so now typescript is immediately complaining that Hey listen title is readon so you cannot change this value over here so let me comment this one out this concludes the object fundamentals in typescript and now we can start working on the next challenge so now let's work on the objects challenge where we want to

set up the bike we want to set up the laptop Then we'll create some products and we're going to store it in the array so let's start with our bike that will be my object let me come up with some kind of values over here then we also want to add the year and now let's set up our type annotation so we're going to go with colon then brand will be equal to string and also we'll have the here and we'll set it equal to a number that should do it now we just want to

change it to a Laptop so let me copy this one change the name then brand stays year stays we're just going to add a different string value this case it's going to be Dell and also change the year and now let's see some errors so if I'm going to go with bike and year and set it equal to Old it's not going to fly why well because year is set to be equal to type number and same is going to work if I'm going to create a second laptop so I'm going to go with laptop

2 And it's only going to have a brand so we're not going to have the year so if I'm going to set it like this notice we get our red squiggly which means that there's some kind of error and now let's set up those products so we're going to go with product one that one is equal to title let's go with shirt and let's set up the price that one will be equal to 820 then let's copy and paste we're going to go with two this one will be Equal to a pants one why not

pants are awesome now we don't want the price so we will need to set this one up as optional and let's create the product all right let's right away set up our type by the way this was supposed to be square brackets we want to go here with title that one is equal to a string and then also we want to go with price this one will be optional and we'll set it equal to a number so now in the array we can nicely store product one and product Number two now it looks like typescript

is complaining why well because I forgot the square brackets and at the very end let me just showcase something interesting where if I go with products and then push provide the object set up a title here in my case I'm going to go with shes even though price is optional we still need to provide the correct type so let's say if I don't provide anything notice how typescript is not complaining Effectively this is optional the price one now if I do provide the price it has to be a number so if I go here with

price and set it equal to a string T will immediately complain yes it's optional but if I do decide to pass the value the type needs to match whatever I have here in the type annotation beautiful we have finally arrived at the functions in typescript and I'm super excited to cover this topic for a few reasons first our Examples are going to get more complex because we'll start tying together all of the concepts we covered previously and also once we start working with functions we absolutely have to start using typescript and you'll see what I

mean in a second so let's say I have a function of say hi why not let's set it up say hi for now we're not going to pass any parameters and as far as the function logic we'll just leave it empty now say high is looking for what well Probably some kind of name correct and in a function body we can nicely log it so the moment I type over here any parameter in my case name notice right away I'm getting these red squidly lines and this is what I'm talking about at this point we

absolutely have to start using typescript otherwise typescript won't compile our code so if we hover over we notice parameter name implicitly has any type and essentially typescript complains about it so that's not allowed Yes by default implicitly it's a set up as any but we need to fix it in order for typescript to compile our code and at this point essentially we have three options first we could set typ any ourselves elves that's definitely one option also and you know what let me just comment this one out also we can navigate to DS config and

we can actually change the configuration something I'm going to Showcase in a second or the best scenario is for us to Actually set this one up with a proper type annotation so in this case I'm looking for a string most likely so I'm I'm going to say type okay so let's try it out here with any what's the issue here well just like we covered before any is anything so everything that we can do in JavaScript pretty much will be able to do with the name here and actually I believe in two videos I'll showcase

the any GOA that we need to be aware of so this is not going to be Approach yes technically you can do it but I mean at at this point we kind of lose the benefits of typescript now second option we can navigate over here to the package Json or I'm sorry why am I going to package Json we're going to DS config and notice over here this strict rule technically we can change it around I can set it equal to false and at that point typescript won't complain about the fact that parameter by default

is left as any so you can definitely try It out you can set it equal TOA and you'll see that actually code Works everything's fine but in my case I'm going to skip that I'm just letting you know that technically this is an option so we have finally arrived at the option we're going to use and that is setting name explicitly to the type we're going to use and just like before we simply want to go with colon and we want to come up with the type my case that is going to be string and

again I know You're probably sick of this method but I'm just going to use two uppercase essentially I want to set up over here a log then I'm going to go with template string and we're going to go with hello there over here and now I'm going to access the name so the moment here we set up a proper type let's say string number or whatever two things are going to happen first when we call this function every time we'll pass in a wrong type typescript is going to yell At us and second within this

function body we can only perform functionality that is allowed on this specific type so in here yes let's go to uppercase let's invoke it and let's try invoking say hi and let's say I'm going to pass in John and also in the next line I'm going to pass in three so if everything is correct we should get an error over here we can nicely see that we can only grab the string Methods inside of the function body and if we inspect the Console we should see John over there and lastly if we try to pass

more parameters than what we have specified we'll also get an error and typescript won't compile our code and with this in place now we can move on to the next topic okay and up next let's talk about function returns so first I'm going to create a function and I'm going to call this calculate discount discount over here it's going To be looking for price and I know that that type is going to be number for now inside of the function body I simply want to go with the return and we're going to go with price

again since this is a number once I press do notice I'm only getting the methods that are associated with the type number and if you're sick of me hearing this I'm sorry but I'm going to keep on repeating that because again I find this truly helpful and let's say I'm going to multiply this By 0.9 so I'm going to go over here 0.9 okay good and then I'm going to set up a variable so I'm going to go with cons final price and I'm going to set it equal to calculate discount I'm going to pass

in 200 and I don't think I need to log the value I I don't think it's necessary so if I hover over the final price I can see that it's a number now why is that a case because again typescript is inferring the type Typescript says okay so this is a number here we're returning a number multiplied by something so whenever we hover over this calculate discount we can nicely see another set of colon and a number over there and I know that it might look a little funky over here but yes essentially the syntax

is following in order for us to set up the type for the function return we need to go after parenthesis we need to set up the colon and then we explicitly need to go with The type now again you can make a case well why do we need to set up type if typescript is already inferring the type well for essentially two reasons first of all if I set up over here a number type explicitly as I'm working in this function if for some reason I forget to set up the return or if I set

up a return which doesn't match what typescript is expecting well I'm going to get an error so it's going to be super helpful let's Imagine This I have Some kind of has discount variable over here and I'm going to just set up has discount so essentially some kind of condition and in here instead of returning a number I'm going to go with discount and applied notice right away typescript is complaining type string is not assignable to type number as we're working in the function typescript is kind of watching over us and if I return something

that I'm not expecting well essentially typescript just starts Yelling at me because again yeah it's trying to infer the type but once I remove my logic well essentially now it could be a string or it could be also a number correct so now if we hover over this notice we either have a number or it's going to be discount applied and the same goes over here either it returns a number or discount applied so even though it's technically optional it's a good practice to set up the return types explicitly since it helps Us tremendously as

we're setting up the functionality so now let me common this one out and I'm just going to go with price like so and with this in place now we can move on to the next topic and next I just want to show you why we want to be careful with type any but this is one of those videos where you don't have to type along if you're not interested essentially you can just sit back and relax so let's imagine I have a function and the name is add three so it's Looking for one parameter which

is a number and don't ask me why but I'm just going to set it equal to any so I'm not sure what would be the use case but let's just go with it then inside of the function body I'm going to create another number in this case type will be a number so I'm going to be explicit and then as far as the return let's just go with a return number plus another number why not and then let's set up two variables one is going to be result and Then we'll also set up some value

so let's try it out I'm going to go over here with result that one is equal to add three so as far as the value you know what let me just pass in three so 3 + 3 and then also we want to set up some value so that one will be equal to a result so now M Dar question and now I'm not asking what is going to be the result I'm more interested well what is going to be the type so if we have our over some value notice something Interesting how essentially it's

any and what that means well go with some value and my method and technically it's going to be valid as I'm typing the code but hopefully it's clear that it will lead to some errors since there is no method My Method and as you can see everything starts with this innocent any and notice how it trickles down so we pass number that is type any and even though this is a number and technically This is a math operation typescript should infer that we're returning a number however if we hover over notice over here we're expecting

any we are returning any so result is any then Su value is any and as I mentioned before be careful when you introduce any because it can slowly trickle down or spread like wildfire whichever term you want to use and next thing you know it you're going to be unintentionally or intentionally running some methods or Setting up some kind of functionality which doesn't make sense and at that point you'll again need to start chasing those bugs at runtime not as you're writing the application so now if I navigate to the browser notice over here some

value that my method is not a function an error which which we can expect since there is no such method on some value and with this in place now we can work on our next challenge beautiful and once we're familiar with the Fundamentals let's work on our next challenge and you know what I actually changed my mind I will list out the steps for a few reasons first the challenges are getting more complex and also I want everyone to be on the same page let's say someone one is not reading the readme or utilizing the

readme I still want them to kind of have an idea what I'm trying to build so effectively I want to create the array names and then I want to write a Function that checks the name whether it's in the array so this function should take name as parameter and it should return a Boolean whether the name is in the array or not and then we want to set up one or few checks and essentially just test out some names so let me go to my file first I want to come up with a value and

I'm going to say that it's going to be an array of strings and let's just provide some random values so I'm going to go here With John then I also want to go with Jane let's set up Chim and also will place a gill over there I don't know why I said all of them starting with J must have been a bad day in the office or something like that then let's come up with our function so in my case I'm going to go with is name in list and this function is going to be

looking for a parameter the type is going to be string and I'll right away set up that I want to return from this function a Boolean so what the name is in the array or not therefore I'm going to set up my type over here and then right away let's set up the return I'm going to go with names so that's the array and I'm just going to use the includes method and in here I'll pass in the name so I pass the string over here and then I pass the same one into includes and

essentially this is just going to return true or false then let me set up a variable name To check now technically I mean we don't have to do it we can just pass it in but you know what just to make things more interesting I'm going to go with name to check um in this case you know what I will rely on the fact that typescript will infer this type let me type over here Jane and let me set up if and else so I'm going to go with his name in a list and I'm

going to pass in name to check that's the case I'll have one log if not I'll have something else So now let's set up those logs so in here we're looking for a name to check whatever it might be so now let me access this as a variable so name to check and then let's say in the list and now pretty much let me just take the same console log and and add not in list okay good and now let me save the file let me navigate to the browser and if everything is correct Jane

is in the list so if I'm going to set it up over Here a value of Peter now it's going to say Peter is not on the list and with this in place we're done with the challenge and we're ready to move on to our next topic and next let's discuss optional and default parameters in functions essentially how we set them up from the typescript perspective I'm going to start by creating a function calculate Price it's going to look for two variables price which is going to be number and for now I'll set discount as

a normal parameter so I'm not going to set it as default or optional so let me go with discount let me set it up as number then inside of the function body I'm going to go with return and we're going to look for Price minus the discount okay good makes sense I mean if we want we can set up over here a number as a return as well that's Definitely an option and then let's go with price after discount and now will be equal to calculate price and I'm going to pass in some even numbers

just so we don't need to log it so essentially I pass in 100 as a price and20 as a discount and then the result should be 80 all right but what if I want to make this one optional what if sometimes I'm going to provide the value and sometimes well it's not going to be available well the Syex is following we want to go to the parameter and we need to add the question mark but notice right away typescript is complaining and the reason for that is because possibly discount can be undefined and in our

case we already have a math operation where we take the price and then we subtract a discount but if this is undefined I mean it doesn't make sense so the key thing to remember about optional parameters is That a function with optional parameters must work when they're not supplied and as far as the effects well we just need to provide the fallback value so if this is undefined the discount one well then we'll have some kind of number value and the way we do that we just set up the or operator and in this case

I'm going to go with zero that's how we can work with optional parameters in typescript and while we're still on a topic let's also discuss the default parameter now for This one I think I'm going to create another function why not let's just keep on practicing this one is not going to be calculate the price though we're going to go with calculate score we're going to pass in the initial score which will be a number and also we're going to go with penalty points and same deal for now we're just going to set it that

it's actually a number I mean it will be a number but we'll just set it as a default eventually now as far as the Return again same deal we're going to set it equal to a number and when it comes to logic we want to go with return initial score minus the penalty points and once I have the function in place now let me set up two variables so we're looking for score after penalty and I'll provide over here calculate score and again I'm going to go with with some even values so I'm going to

go with 12 and now I want to set up another variable only in This case I'm going to go with without penalty and I'll just provide the first one so that will be my initial score and notice right away typescript is going to complain so here's the deal if we set up a parameter and we don't provide it or we provide one too many well then typescript will complain so this is something to keep in mind and how we can fix it well we can either go back to this optional parameter which we discussed in

the previous video or we Provide some default for this one so we make penalty points as a default parameter and the way we do that just like with JavaScript we just add the equal sign over here and come up with the value so in my case it's going to be zero so now if it's provided awesome we're going to use the penalty points value if not well then we'll just revert back to the zero because that one is the default one and here's the key difference if we use Optional parameter we do need to set

up this logic if we have a default one it's not the case then we'll just use whatever value is provided okay and up next let's discuss how we can work with rest parameters in typescript and also let me showcase one more time how smart the typescript is let's say we have a function and the name is going to be sum now for now I'm not going to pass any parameters I'm not going to set up any return type simply Want to have my function and I'm just going to invoke it and show you what arguments

I'm going to provide so this one will be equal to result and in here I just invoke the sum and effectively in here I want to provide two arguments so I want to provide a string and a list of numbers so string is going to say well the total is and then whatever numbers I provide they're going to be added together and that will be my sum so in here let me go with the string and let's Say total is then we're going to go with the colon and then we have list of parameters so

this is where we'll need to implement the rest parameter otherwise I mean one case I might add five numbers in the next instance it might be only three and hopefully you see where I'm going with this so it's not always going to be one or two numbers it's going to be a list of numbers so in this case I'm going to Go with one 2 3 four and five now typescript is complaining since we haven't set up those parameters over here so let's start with a message in this case it's going to be a string

and now let's see how it can work with such list and essentially the syntax is similar to JavaScript the only difference is that we need to provide well what type of array it's going to be so in JavaScript we use this syntax three dots then we come up with a name In this case I'm going to go with numbers over here and this is the rest parameter and essentially JavaScript treats this as an array so in here we want to go with number because I need to let typescript know what kind of type it is

and then the array now please keep in mind if you have strings here as well essentially you just go with number then use the type Union and essentially set up a string there as well and now pretty much all of the arguments that are pass The string are going to be collected in this numbers array now I also right away want to set up what are we returning from this function and essentially it's going to be a string now before we set up the logic which we're going to do with reduce I also want to

showcase how smart typescript is so I'm just going to create the doubled variable and I'm going to set it equal to numbers so that's my array then let's invoke map then we're Going to go with num and let's just return num * 2 and again let me just log I guess here just so we can see that the functionality works but one I want to showcase though is this notice as we hover over typescript immediately knows that it's a number so let's say you have some kind of call back function that you pass into the

map into the reduce and all that that's is going to see what kind of type array it is if you have supplied those Values and it will immediately know that as we're iterating over this is a number now you can explicitly provide the value I mean no one is stopping you to go here and say number but in general typescript is super helpful and we also have right away this useful error where the type should be string as far as my return but at the moment well I'm not returning anything so let me set up

that functionality as well and this is the case where I will use the reduce and Then I'm just going to return the message the total is and then I'll sum up the values so I'm going to go with let total is equal two numbers then let's provide reduce over here I mean we can call this accumulator and total or current however you want to do it in my case I think I'm going to go with previous over here and the current one and then as far as the logic side of the function let's just return

previous plus and then the Current one and the same deal typ knows that it's a number since I have array of numbers now since I'm using reduce I also want to provide the default value which is going to be null and then from this function I want to return a string so I'm going to set up the template literal we'll provide the message and we'll also provide the total over here so now let me just see what the result is I guess so let me just log the result and also we should see that doubled

one In console so notice this functionality works over here and the total is 15 and in the process we cover two important things how we can work with rest parameter which essentially collects the list of values if we don't want to access them one by one and also how smart typescript is in the Callback function we don't need to explicitly say well what type it's going to be typescript already knows and up next let's discuss what type we should return If we're not returning anything from the function and a good old example is just having

a console log so let me go with function log message as far as the parameter we're looking for a message and that one will be equal to a string and then in here let's use our good old console log and let's just log the message now I do want to invoke it and I want to provide some kind of value so in this case I'm going to go with hello and typescript and since we have Nice suggestions if we just hover over the log message we can see that typescript inferred the return type as void

and void is a special type that represents the absence of a value and when we use it has a function return type void indicates that the function does not return a value now milon dollar question do you always have to set it up I mean it really depends on your approach but it is super helpful especially if you consider this once we Add this void over here even if I set up some kind of return and I'm going to go with hello world notice how typescript right away says well you cannot assign string to a

void so if we decide that this function is not going to return anything and we set up the keyword even if later on we mess up something and start returning some values from the function typescript is going to stop us from doing that and up next let's discuss Union types as function Parameters and what the typ guards are now I did set up this topic as a challenge just so you can see firsthand the type of issues we will face so here's the task I want you to create a function called process input that accepts

a parameter of Union type so it can either be a string or a number and when it comes to functionality if the input type is number we simply want to multiply it and log it in the console and if it's going To be a string just use one of the methods so in my case since my favorite method is the uppercase one most likely I'll use that one but it really comes down to the preference so I'm going to navigate to my tutorial and I want to come up with a function so I'm going to

go with process and then input and I believe in one of the previous videos when we covered the rest parameter I mentioned that you can still use the union type I mean it's not a big deal Here I can go with input and then just say string or the number however once we set up the functionality this is where we'll add additional logic since now we have two potential values correct so first let's go with process input and pass in then this should work and also let's pass in the hello now what about the logic

if we simply log we should be good to go so if I type input notice there are no issues but now what if I want to multiply this What if I want to say times two notice immediately typescript is not happy why well we have a type string and we're multiplying this by two now typescript doesn't know that in here we passing in 10 and in here we have the hello so we need to set up something called type guard where before we do any functionality we actually make sure that the type is correct essentially

if I want to run a string method I want to make sure that it's a string if I want To multiply I want to make sure that it's a number and again the fancy name for that is typ guard now we you'll look at multiple type guards the most straightforward one is just type off keyword and then we look for specific value so inside of the function I do want to set up a check so there's going to be a condition and I'm going to go with type off then I'm looking for my parameter and

I'm going to say if it's equal to a number and notice how Immediately typescript was helpful and provided bunch of options if you didn't let me go back notice these are the values that we can use and in this case we're looking for the number if that's the case what do I want to do well I'm going to log times two over here now if it's not the case typescript is also smart it knows that listen if it's a number we're going to do this functionality what is the alternative well the alternative it's a string

Correct so in here we simply can go with else then again we're going to go with log input and you know what just so people are not upset with me I'm just going to go with two lowercase again the official name for this one is type guard and we use it to check the parameter at the runtime and while we're still on a roll let's also see how we can work with objects as parameters in our function so I'm Going to set up a new function let me call this employ and in here I'll pass

in the object with the ID property and as a side note the second example which we're going to cover is going to use a little different syntax so in here essentially I'm right away D structuring the ID I'm saying yeah there's going to be an object with the ID property and I right away want to access it now as far as the Typescript same deal just like with regular objects we want to set up this type annotation and we want to be specific well what are we're going to be getting here so is this a

number string or whatever and in this case I'm going to set it equal to a number as a side note yes in like I believe three videos we will cover typee aliases so it's not going to be as clunky because at the moment I fully understand if you're looking at it and you're like whoa so I Understand this part but does that mean that every time I'll have object with like 10 properties we have to set it up over here no there is a better solution and it's coming up and also just like with parameters

can also set up the return type as an object out of does that look like well same deal I just say colon then I provide the curries and what are we returning from this function I'm going to go with ID which again is going to be a number and also there's Going to be is active in this object and that one will be a Boolean and again we set up the Cur so we have two sets of curries over here and we also have two sets over here because we have one for return and one

for functionality and as far as the logic I just want to return an object from this function and I need to make sure I follow this pattern correct I need to make sure that I return a number and a Boolean so in this case I'll just right away grab whatever I have over here and also as far as the is active I'm just going to do some basic logic I'm going to say ID and then I'm going to use the modulus operator essentially if ID modulus 2 is equal to zero then it's going to be

true which means essentially that it's an even number if not then it's going to be false so now let's try it out we're going to go with const first set it equal to create employee And then let's pass in our object so in this case it's going to be one then copy and paste this will be equal to a second over here and then we want to log both of these results so let's look for first and second let me navigate to a console and for some reason says false because yep I didn't change this

one this should be equal to two so now the first one is active is false and then the second one is active is true again we really don't care about The functionality I mean we can definitely hardcode over here doesn't really matter so hopefully it's clear if we have an object we nicely set up right away The annotation at least with the current knowledge we have now also we have alternative approach where we can give some kind of name to this object and then we can just use it inside of the function body again please

keep in mind the general idea as far as typescript doesn't change but I do want To make sure that we understand that we have multiple approaches so let me call this alternative over here then we will go with function create student in this case and I know that I'm going to get the object and I'm just going to give it a name of student so this still will be object but I'll just access it with student. student do and same deal I want to go with my annotation I'll say that ID will be number and

name will be equal to a string over here and and then as far as D function body I'm actually going to go with void so we're not going to return anything from this function and we're just going to log stuff so let me scroll down a little bit let's set up the template literal welcome to the course I guess and let's access the student where we go with student and notice we right away get the suggestion which properties Are on this object since this is what we specified in our type annotation and in this case

I want to go with name and then to uppercase also please keep in mind that yes we can the structure right here in a function body as well that's totally an option so now let me call it with the new student so in this case just to again showcase that we have multiple approaches we want to go with student we want to set it equal to an Object I'm going to go with five over here and name is going to be Anna and I'm just going to rely on typescript to infer the type and then

we'll go with create student pass in the new student and if everything is correct we should have the value in the console and with this in place we can move on to the next topic okay and before we move on and start working on our next challenge let's also cover the access property check gotcha and for this one actually We don't need to create too much code from the scratch I'm just going to remove my first function from the previous video I'll leave create student as it is and I simply want to invoke it right

below and in this case I will pass everything in line so unlike previously where we set the object now I'll provide all of these properties one by one let's start over here with ID I'll set it equal to one as note it's totally Irrelevant to what we pass in here that's not the gotcha the gotcha is following if we add here extra property what do you think is going to happen well we have a type annotation for ID in string correct so I mean logic tells us that if we add here email and we set

it equal to Bobo at gmail.com typescript is going to complain and you're totally correct essentially it says Hey listen you didn't specify that there's going to be an email while you're adding this to The object so this is something we expect however notice this interesting Behavior where I can go here with an email and essentially pass in some kind of value and you know what it's going to work typescript is not going to complain so yeah this is this interesting Behavior where when we pass in object properties in line typescript expects to match this exactly

so if we'll add some extra Properties TPT will immediately complain because in typescript mind we have a full control of what we're adding in line however if we're just referencing the object and there's an extra property the only thing typescript cares about are the properties that are in the type notation so if there's 120 extra properties typescript is like okay do you have an ID and name if yes we're good to go if not then of course there's still going to be an issue hopefully It's clear just remember this gotcha and you'll be good to

go all right I think we're ready for our next challenge and at least in my opinion this one is going to be super interesting because we'll combine multiple things from the previous videos so we want to create a process data function which is going to accept two parameters first one is going to be input parameter which can be a string or a number and second one will be a config object and instead of that Config object we'll have the reverse property which is a Boolean so if we pass in a number we just want to

multiply the number with its own value essentially input multiplied by the input however if the input is the string our second option and if the reverse is true we want to reverse the string and set it uppercase now if we provide a string but the reverse is set to false well in that case we'll simply set up the string to be uppercase and just Return it so let me navigate to my tutorial I think I'll just remove all of this logic and you know what for stars I want to set up a function in here

I'm going to call the this process data I'm not going to set up any parameters yet same goes for functionality and I simply want to log it in three places essentially invoke it and then log it so in the first case I'm going to pass in 10 and Then I'll set up two more hellos so these are going to be instances where we pass in the string and now as far as the process data like I said we have input over here but we want to use the type Union so either it's going to be

a string or it will be a number so that will be our first parameter now the second one is the config one if we pass this config in there there's going to be a reverse property and as a sign note I actually forgot to do that so first one Is hello and then we want to go with our config object and I will set the reverse equals to true so let's navigate to our parameters and let's set up the second one so I'm going to call this config it's an object and in there I'll have

the reverse property so I'll set it equal to a Boolean now here's the kicker what if I pass in the number do I really care about that reverse one and the answer is no I only care about It if it's a string correct only then we'll check but if it's a number I mean doesn't really matter and therefore I can nicely set this as default reverse false so I'm not going to have to do that additional check basically Once I pass in the number I don't have to pass this additional config object so in here

let's go with default one and set it equal to verse and false now let's also set up what we're returning from this function so either it's going to be a String or a number and now when it comes to logic well we have two options correct so we can have a string or a number so we do need to set up a typ guard if we want to multiply it I want to make sure that it's actually a number so let's go with if then type off if the input is equal to a number well

that's when we want to multiply and return so let's go with return that input times input and it looks like I have a tiny typ over here this should be return and Also we want to set up the else and in here we're going to go with the return then we'll check the config reverse so by default it's going to be false so if it's true then we want to set it to uppercase split reverse and join if not well then we'll simply return it with the uppercase so let's set up over here a dinary

operator we're going to go with input then to uppercase let's invoke that then we're going to split it then we'll call a reverse on It over here and then lastly let's use join method let's do this and if it's false which is the default one we're going to go with input then two uppercase and we're going to invoke it so now let me navigate to the browser and let's see so I have 100 then I have straight up hello just to uppercase and then I have the reverse value again in my opinion the biggest gotcha

is over here you see if you're not going to provide this default value over here Then pretty much every time you'll invoke this processed data it's also expecting this object over here and if that's the functionality you want to go for it's definitely an option but in my opinion it's super useful to add this default one because in that case well if it's a number or if I don't want to actually reverse it well I simply don't provide that argument at least that was my line magic and with this in place we're done With the

challenge and we can move on to the next topic all right and we have finally arrived at the type alas at least in my opinion one of the most exciting topics because once I learned the topic I was super super excited since it just eliminated bunch of clunky code and for this one actually want to start with the code already present because I want to cover some stuff on I highly encourage you to do pretty much the same there's really No need to type this from the scratch so grab it from the readme and then

let's go line by line so we have two objects and we nicely set up over here the type annotations where ID is a number name is a string and is active is a buan so if I'm setting up some wrong values typescript is going to be super helpful and then we have a function which again is looking for a user and that user must have this particular shape ID is a number name is a string and is active is A buing okay beautiful and not only that but from this function for some weird reason we

return the same thing we return the same shape we return ID name and is active and so is the functionality we just set it to uppercase and then return the user and I can tell you right away that there's nothing wrong with this code as far as functionality all of this works what is the biggest issue I mean we have code over here same code over here same code Over here and then we have the return and this is just one file what do we have like 20 lines of code and pretty much we just

constantly keep repeating this so without further Ado I want to introduce you to a type areas in typescript which again in my opinion is extremely helpful feature now before we continue let me just make sure that we are all on the same page you see a type Alias is just a new name or a shorthand for existing Type and in this case we're talking about this type over here this type annotation so nothing is actually going to change as far as this syntax is concerned however with type Alias it's going to be easier to reuse

this one so again please keep in mind we're not creating a new type it's just an Alas and all of the same rules apply to the alas one that's why I wanted initially to cover how we set up such inline type annotation because Nothing is going to change as far as our functionality including the optional property and read only modifier the only difference well now the code is going to be in one place so if we ever want to change something we will only need to do that in one specific place and also our code

is going to be less clunky because we'll just use that name and once I'm done with my long and B Bing monologue why don't we set it up and essentially the syntax is following we want to go With type that's the keyword now the convention is to go with the uppercase but you don't have to I mean you can call this also like this but in my case I will go with user and like I said before the syntax is the same so I simply want to take my first instance and set it equal to

my user so now all throughout my file document project whatever I can use this user and this will mean the same exact thing so in here I can go With yeah John is going to be object and a type is actually going to be user same is going to be over here Susan is going to be a user now when we're creating a user what is the type well it's a user type and you can probably already guess same is going to be over here so we can go with user and now me question which

one is easier to manage and read and if you said the second one you're absolutely correct so I can mess with you and say that you know what no Actually this one was easier to work with but in reality we can clearly see that this is definitely easier to work with and I'm skipping a little bit ahead but we can actually also export this one as well as well so it's definitely an option so let's say we set it up in one file and then if we ever want to use this type alas somewhere else

we can nicely export it import it in the file and we're pretty much good to go okay um before we move on and start working on Our next challenge I also want to quickly showcase that we're not limited to using type Alias for object so it's definitely an option it's definitely something thing we're going to do but you can also do it for our previous examples as well for example I can go here with type I'm going to call this string or number and I'll set it equal to string then use the union type and

set it equal to a number so now anywhere in my project where I want to use the Union string or number I can use my type Alias instead of this hardcoded value so let's say that there's a value this one will have a type string or number and then we can go with value hello and also we can set the value equal to 1 two 3 now is this something you're going to see often uh most likely not but still I definitely want to make sure that you know that it is a possibility now something

that you will see quite often At least in my code is this I'm going to set up an alas but in this case I'm doing that for the literal type so I'm going to go with light or dark so this will be my tee and those are the values so it can be only light or dark and now if I have a theme variable I can go type theme then let me just change the values here notice how I right away have only these two options something I have discussed already quite a few times And

in this case I'm going to go with light and what's also super super awesome that I can use the same theme one in the function so if I go here with set theme it's going to be looking for a parameter by the name of T and the type over here is actually going to be a theme and now I want to set my theme variable equal to whatever parameter gets passed in so now when we invoke the theme same deal over Here notice how we can only use these two values again super super helpful especially

as your project grows bigger so we can nicely set up this Alias and then use it when we set up the property or when we pass some parameter in the function and up next let's work on another challenge and and during the challenge we'll cover a few interesting things we'll cover how we can set up type Alias with the array how we can set up type alas with type Union and how to Set up a typ guard if we're working with the object so here's the challenge we want to set up two types one is

going to be the employee type and second one will be a manager type now for employee will'll set up two instances and then I guess manager will set up only one now the key difference is that for a manager there's going to be employees property and it's actually going to be an array of employee types so this is where we'll combine the Alias with the array and Then we want to set up a function which actually is going to accept both types whether that is the employee or the manager and if the instance is the

manager then we just want to showcase how many employees they have and if it's not the case then we'll just log in which department the employee is working so let's try to set this one up I'm going to go with my alas first and I'm looking for Employee so this one will set it equal to an object there's going to be an ID property which is a number then we'll go with name we'll set that one equal to a string and then also there's going to be a department and for some reason I have a

hinch that this is not correct typing so let me fix that so we're looking over here for Department which is a string now there's also going to be an alias for Manager for this one same deal ID number name String so let me just copy them in order to make it faster and now I want to set up the employees which is going to be an array but an array of what it's not going to be an array of strings or numbers and if you remember in one of the previous examples we actually covered that

we can set up type to be an object only in this case we already have the type Alias for that so I can simply say yeah it's going To be an array but it's going to be an array of employees okay good now let's set up those instances and then we'll work on a function so for starters there's going to be first employee we'll right away set up the type just so we don't mess up anything ed1 then name let's set it up and also let's come up with the department and in my case I'm

going to go with sales let me copy and paste now I want to change the Variable name so in here we'll set up as Steve same deal over here and then as far as the department let's go with HR then let's set up our manager as well so this will be Bob the type will be manager ID one name Bob or Bobo even better and then we'll go with employees and this is our array correct so now I want to grab Alice and deep so let's set these two up and now let's invoke the function

the print staff details but of course before I can invoke It it would be useful if we would have this function in the first place correct so let me come up with the function I'm going to call this print staff and then details but here's the kicker how are we going to pass this in because at the moment we have two types so are we going to pass in just employee and then set up another function for the manager or we can somehow some way combine the two and the answer is well we can use

the type Union So essentially I can go with type and then staff and set it equal to employee or it's going to be a manager and now this is our type so now I can nicely go to print staff detail details and say okay there's going to be an object and as far as the type actually going to be equal to a stat now I do want to set up the void over here since we're not going to return anything and now another million doll question well how we can check whether the staff object is

the Employee or a manager because if it's a manager then we do have an array but if it's the employee that's not the case and we cannot go with well is type off equal to an object well both of them are equal to an object so that's not going to make much difference here's what we want to do so we want to go with our condition and then we need to pick a property which is specific to the object so in this case that's the employees correct So we go here with the property and we

say in and then our object over here so that's the staff if it's the case well then we know that it's a manager if not then we know it's a staff one so let's go and log something here we're going to go with staff name so let me access this one staff name and then we'll say is an employee in the specific department so in here we want to access again the staff one and now we're looking for Department again a property which is not on a manager and again typescript is smart it knows that

if there's an employees this is going to be a manager if not well that's the staff then and I can access the department so let me add this one and now I want to just grab this console log and we'll just change a few things around still going to be a console log but we're going to go with manager and notice how right away typescript is correcting us essentially It says well department does not exist on type manager so now what do we want to do well we'll remove this we're going to go with employees

and we're looking for length and let's just type employees okay good let's try it out going to navigate to the bottom and we're going to go with print staff details let's pass in the first one and and let's also pass in the Bob once we navigate to the browser we see that Alice is the employee and Bob is the Manager so this is how we can combine multiple features this is how we can set up type Alias with the type Union this is how we can start using type aliases with the array and this is

how we can set up a typ guard if we are working with the object uh next let's discuss the intersection type in Union which is a way for us to combine multiple types into one let's imagine this scenario we have a type book it is equal to a number name is equal to a string and there's Also a price so we set up this number over here and we're good to go then let's create let's say two instances I'm going to call this book one is equal to an object and let's right away set up

our type our book type and then in here let's provide some dummy values ID will be equal to one name will be how to cook a dragon because why not and also let's set up some kind of price so in this case it's going to be some random 15 then let me copy and Paste and instead of Po one this is going to be b 2 now the type will stay the same the ID will be two as far as the name we're going to go with the secret life of unicorns and we're going to

set the price equal to 18 so all this is good but what if I have a discounted book where not only I have these three properties but there's also a discount so first let's set it up and you know what I think we can speed this up a little bit where it's not Going to be a book we're going to go with discounted book okay good now for now type will be book but clearly we'll have some issues I can right away tell you that then let's come up with the name in my case I'm

going to go with this one price will be equal to 25 and we also want to add this discount property and we'll set this one equal to 0.15 and notice the moment we do that typescript complains why well because It's not in our types so there is no discon anywhere here so what's the solution well we could create another type correct we could just copy and paste and set up over here a discounted book type and then just add that discount property it's definitely an option or we can nicely utilize the intersection type how's that

going to look like well we have multiple ways how we can set this up you can definitely do it over here in line where you go with And operator and you just add what more types you want to have for this particular instance so in this case I can go with discount and I can set it equal to a number and notice typescript doesn't complain anymore so now essentially it uses all of the properties from the book type already but we just added nicely the discount as well so that's one option or we can set

up another alas now the logic here is not going to change so I can just cut it Out and go type then discounted book and we're going to set it equal to this one so now for my discounted book I can use the discounted book type Alas and again the difference with Union type it's either going to be this type or the type on the other side of the pipe however with the intersection type now we combine them now we say yeah it's going to have all of the properties that we have in the book

type and also there's going to be this discount one which is a Type number all right and at the end of the type Alias section I quickly want to mention that type Alias also supports computed properties so we we don't always have to hardore code for example if I have a tiger object and eventually I'll set up the type you know what for now let's just set up the object in here I can go with age and set it equal to five so nothing new but we can also set up a variable in there we'll

have a string and we'll actually use that String as a property name so straight up JavaScript let's say we're going to go with const prop name and we're going to set it equal to age and now instead of hard coding I can just go with prop name so if I'm going to change the string value now my property is also going to change over here in a tiger and we can do the same thing in type Alias I can go with type animal let's set it equal to our object and then instead of hard coding

we're Going to go with prop name and set it equal to a number I just need to follow the proper syntax over here and now let's set up the type for a tiger and we're good to go so just like in regular JavaScript we can use computed properties in type alas okay and up next let's cover interface type which is used to describe the shape of an object as a side note we are purposely covering interface type right after type Alias simply because they are very similar and Yes before you ask quite often you can

use either one of them and the result is going to be the same now what do programmers do when the same thing can be achieved in multiple ways well we argue about it on Twitter and try to convince everyone else that our solution is somehow some way better why because apparently that's the best use of our time and remember if all the other arguments don't work you can always say it's just a better practice To do it apparently that one always works jokes aside I do personally prefer type Alias over interface and therefore during the

course most likely you'll see type Alias syntax more often but just like I mentioned before it really comes down to your preference despite what yet another Twitter Guru says okay hopefully I did not scare you away with my joke SL rant and if you're still here let's set up a book object so I'm going to navigate to my Tutorial I'm going to call this deep work and you'll see a second why so we're going to go here with deep work if I only would know how to spell this is going to be my object we're

going to go over here with this ISBN which essentially is just used for books as the ID so in my case I'm just going to go with one two three then we're going to come up with title I'm going to call this deep work as a sign of this is an awesome book again I'm by Any means not being sponsored or I'm not trying to sell you this book but this is an awesome book uh you won't regret whatever dollar it costs so we're going to go over here with author that is going to be

Cal Newport awesome and then let's also set up the genre and I believe it's selfhelp self and we're looking for help now I do need to add over here a comma and we already know how to set up ttype alas so probably this is something we're Going to set up at the very end but we also can use the interface again this is something that we use if we want to describe the shape of the object now the keyword is interface then we come up with a name same deal lowercase uppercase totally up to you

in my case I'm going to go with the uppercase and then instead of the equal sign we just want to set up over here the curlies and then same deal we go with the property name and then the type and I write away Want to mention that the readon modifier which we covered with type alas as well as the optional property is also allowed and therefore I'll go right away with read only then I'll Target basically this book ID and I'll set it equal to a number remember if we'll try to modify this value later

it's not going to work then also let's set up a string okay beautiful that's going to be 40 title then the same deal we're going to do with author we're Going to set it equal to a string and the same is going to be for genre but I'm going to set it as optional again just so we get this one out of the way I don't think we need to spend a separate video on these two things since we have covered them before and effectively if I go here where is my deep work and if

I set it equal to my book I'm going to go so if for some reason I go with a deep work and try to modify this property which is read only let's say I'm going To go with some value notice typescript is going to complain same deal is going to be if I'll try to add property that doesn't exist let's say price and I'm going to set it equal to 800 that is not going to work and then let's say for genre since it's optional property I can just remove it basically comment out and my

code is still going to work and if you enjoy working on the challenges you can set up a type Alias for this deep work object and you'll see That in this scenario you can use either of those approaches and the result is going to be exactly the same okay and up next let's discuss methods in interfaces and we're going to spend few video videos on it just because it's not in my opinion a complex topic but it can be a little bit confusing because you can set up methods as properties as well so essentially you

can mix and match and at that point it might look a little confusing so start with just straight up Approach which is my preference and then I'll show you the alternative code that you might see somewhere in the wild so effectively if this book has for example a method of print author I just go directly to my interface in this case I'm going to add a comment and I'm going to come up with that method now please keep in mind here we're not typing any logic I'm just saying yes there's going to be a print

method or you know what should be print author for some reason I Went with print method it's not going to look for any parameters and then as far as the return it's not going to return anything it's just going to log so the moment I do that now notice I have typescript complaining because I haven't set up that method over here you know what just so I have less code I'm just going to remove those comments over here so now let's set up that method again this is going to be my Approach where I go

print auth setup over here my method and in this case I'm not looking for any prams we'll cover that in a second and then we just go with log and then since I'm not using the arrow function syntax I can access any of these properties over here by using this again we're going to cover the arrow syntax approach a little later for now we just want to log the author that's it so now let's go go right after the object we're going to go deep work Then we're going to invoke print author and if everything

is correct we should see in a console the author so let me take a look at the browser and yep I have my Cal Newport so my logic works now what is the syntax if there's going to be a parameter well let's try it out in this case I'm going to go with print title and I'm just going add some message after the title I'll say this book is awesome or something along those lines so let's go here with Title we set up the parameter as a sign note this name doesn't need to match whatever

we set up over here in the instance so in here I'm just saying yes there's going to be some kind of parameter and I'm going to reference this as message now type is going to to be string and Just for kicks let's also return from this function again we're not setting up any kind of logic over here I'm just saying that there's going to be a method by the name of print Title so now we want to scroll down and same deal we want to set up our function so I'm going to go with print

title and I'm just going to call this value just to Showcase again they don't need to match now is my preference to set them up the same yes but again that is just my preference and then inside of the function same deal in this case I do want to return and notice how typescript essentially is complaining that hey you said that it's going to be a string over Here and at the moment it's still void what's up with that so let me just access again this dot since we're not using the arrow function then we

can access nicely title and I'm going to provide over here whatever message is going to be passed in and then let's keep on moving I guess right after the print author either we can log it right away or in my case I think I'm just going to store it in a result so let's go deep Work then print uh nope it's not the one we want to go with print title and then let's say is awesome book so this will return a string so what do we do with string value well we log it and

yes it looks like everything is correct but text is not so let me set it up properly or here again if we have a method in here we just set up the blueprint so what is going to be the method name whether we're going to Accept any parameters if we do then it's useful to set up right away a type and also whether we're going to return something from this function or or no and then inside of the instance we set up the method and we just need to follow our blueprint so if we're not

returning anything from this function we just set up the functionality if we are returning we need to make sure that the types match and with this syntax we can access any Properties by using this keyword okay and up next let's cover an alternative way how we can set up method me in interfaces now let me stress something technically this video is optional I just wanted to cover this because you might encounter such syntax somewhere in the wild but I personally tend to stick with the approach we covered in the previous video simply because I find

it way more straightforward alternatively we can set Up the method in the interface as a property how's that going to look look like well we can go here with print something and again the example is going to be pretty straightforward and essentially we set it here equal to a function but please keep in mind this is a syntax we're not setting up over here the arrow function this is just the syntax that we're using so we say that it's going to return a number and then we set it equal to some value and pass In

the number and now with this proper in place we want to go to a deep work object and here we have quite a few options to set up this function so I'm going to add these comments I'm going to say First Option then there's going to be a second option and I believe there's going to be a third one as well but we'll see most likely I will improvise as we go so first option well we can use the good old function keyword so I'm going to go with Print something that's going to be my

property right now then I go with function same deal it's looking for some value now what is going to be the value that will be a number correct and then as far as the function body just so I return a number essentially I'm just going to go with some value now let me scroll down a little bit I mean most likely we can just remove these values just so our console is less busy and I can go with my deep work then let's go With print something we want to pass in some number why not

34 and then let me set up the log and let me move this sucker inside then let me remove my semicolon let's navigate here and notice I have 34 so again instead of setting up the straight up method now I set up the proper which is equal to a function in here if I have some parameters then I set up the type and I Also say well what is this function returning again you don't have to return something from this function just because it's a property right now so that is going to be our first

option okay let's common this one out and our second option is going to be Arrow function so we can go here with print something remember we want to access the some value that is going to be our parameter and then as far as the logic I'm going To go with some value now there's a reason why I'm setting up the curlies I'm fully aware that we can set up the implicit return the reason for that is because I wanted to Showcase that there's a gacha with this and arrow functions so Arrow function is going to

capture the global this please keep that in mind if you're using Arrow function functions unlike the good old regular function where we right away have access to this which is scoped to this instance It's not going to be the case with the arrow function so for example if you want to access any of the properties in my case I'm going to go with author we'll have to go with deep work and then the author now let's navigate over here notice we have both we have the 34 and we also have the author so this will

be our second option and I guess what was somewhat confusing is the fact that you can also do another Way where I can go with print something and effectively just use the syntax we already used before so this also is going to work and that's why again my preference is just to use this approach where I set up the method and I clearly do the same thing inside of my instance so this will also work so we can go here with return and then some value print something and notice once we navigate back to the

console this also works and lastly I'm not trying to confuse you too Much but this also is going to work so notice we have over here this print author which is set up as a method but we can set this one up as a property so we can go here with print author now I believe typescript is going to complain so I'll uncomment the first one my Approach I guess if I have a property then we're going to go print author and we will set this up as a property and we'll set it equal to

an arrow function again not trying to Confuse you too much but just showing you alternative syntax that you might see somewhere again remember we don't want to use this we actually want to go with deep work and then we're going to look for author now tespt will complain since I already have my first approach but again if you navigate to the console you'll see that the result is there now I'm not calling print author that's the reason why I don't have it let me go here let me Invoke it and you'll see that as far

as functionality it works again what's confusing is that you can set the property equal to a function so instead of straight up method you set up a property which is actually equal to a function and then you can start doing this mix and match where yeah it was a property but then actually in here it's going to be a method and then the other way that's why my preference is to set up methods with this syntax and and the Same in my instance just set up straight up methods simply because in my opinion it's just

less confusing hopefully I didn't lose too many of you and with this in place now we can start working on our next task okay and once we're familiar with the interface fundamentals let's work on a small challenge where we want to set up a computer interface inside of it we want to set up few properties one is going to be read only which is going to be for object then Brand equals to string Ram is going to be number upgrade ram will be a method and in there we're going to be looking for number and

we'll return a number and also there's going to be a storage property which is going to be optional but the type is going to be number also once we have the interface we will set up the instance and we'll provide the properties apart from the optional one and then finally we'll also invoke the upgrade ram method So let's try it out let me set up my interface name will be a computer let's go line by line this one will be read only so I'll set it equal to my ID then brand equals to A String

after that let's go with the ram that will be number okay then upgrade ram this one will be a method so we'll look for increase and this actually is going to be a number now from this function we want to return a number and then also Let's set up the storage which will be optional and we'll set it equal to a number so now let's create our instance in my case it's going to be a laptop so set it equal to our object and we right away want to set up our interface type now let's

pass in those values there will be an ID then a brand is going to be a random brand after that we have a ram we'll set it equal to 8 I guess 8 gigs and let's also set up our method upgrade ram as Far as the parameter I'm going to go with different name just so you can see that for sure everything works even though the names don't match and in here let's just set up functionality where we grab the current Ram value and we just add the amount which is past in and then since

I want to return a number I'm just going to go with this Dot and RAM this is what we're returning since the storage is optional I'm not going to pass it in let's just Set up our instance then storage and now I'm going to set it equal to 256 we can log it so let's go over here with our laptop let's see yep I have my object a brand RAM and everything up to the upgrade RAM and also let's invoke the upgrade ram let's pass in some value and let's keep our console locked so we're

going to go over here with another one I guess since we're returning the value so let's go with laptop upgrade ram let's pass in some kind of value in My case I'm going to go with four and then if everything is correct this is what we're getting back from the method and also our Ram instead of eight is actually equal to 12 okay and up next let's see how we can perform interface merging how we can extend the interface and then we'll work on another challenge and during that challenge we'll see how we can use

typu with interface for starters I want to create two interfaces one for person and one for dog owner now Both of them will have two properties I guess well one is going to be be a method name and let's say details so let's go with interface I'm going to go with person I'm looking for name I'll set it equal to a string and also there's going to be a get details method which will return a string so that's my person one and I also want to set up one for dog owner so let's just go

here dog owner so that one will have a dog name I Guess that's going to be my property name which is going to be string and then instead of get details we're going to go get dog details let's invoke it and again we're looking for a string over here okay beautiful and first let's see how we can merge the interfaces so once I have my person one I want to create my object I'm going to call this person and the type is going to be equal to my person interface now what are the two Values

we need to provide first we need to go with John and as I not I'm missing here the equal sign and the second will be the get details one so let's just go with get details that's the function and we're going to set up the functionality with the template string name colon then let me access the this dot so this do name and also let's add Age so this one will also be equal to this Dot and then the age now notice over here how we don't have the age correct and one way is to

go back and set it up over here in this person but there's another way how we can add this property and that is by merging the interfaces and I know that this looks a little funky in the beginning please keep in mind that most likely you're not going to do that in the same file but Let's say if you're getting the interface from somewhere if you know the name you can do something like this and as a said note yes essentially I'm using the same name I go with interface person and then I just go

with age now number so I add that extra property over here now this also needs to be in my instance correct so in here I need to come up with some kind of value and now the get details is correct I can access both the name and age so I have the first one and Then I just merge so whatever properties I'm going to set it up over here yes essentially if I create this instance now all of these properties will have to be there hopefully that is clear now just a showcase let me go

with person Dot and then get details let's invoke it and for some reason I don't see anything in the console and of course because I'm returning so what am I doing here let me go with my log me move this sucker Up and now let's try it out yep I have name John and age is 30 and up next let's see how we can extend the interface which is a way for us to create a new interface that inherits or essentially just uses the properties and methods from the existing interface now it sounds more complex

than it actually is imagine the scenario we have an employee instance and for now we're not going to Set the type let's just set it equal to an object I'm going to go with some kind of name I'm going to go not with John let's go with Jane over here then let's also set up the age CU remember we already added this to a person so now essentially we need name we need get details and we also need an age so let's set up some kind of age here then let's go with our details however

in this case since we're going to add one more Property the return is going to be a little bit different here's the thing Jane is a person that kind of makes sense correct so I can definitely set it equal to a person and call it a day however let's imagine that Jane since she's an employee she also has the employee ID now I don't want to add it to a person so I want to keep this as a separate interface but I do want to use all of the properties that I already have in my

person one and just add on That employee ID so here's how we can do that we go with interface then come up with a name in my case I'm going to go with employee and then we go with this extends and now we're just looking for a specific interface we want to use and now let's just add this employee ID and set it equal to a number so now Jane not only she's going to be a person but she's also going to be an employee so now when we set up the type We go with

employee and now not only I have name and age but I also need to apply this employee ID so let's add this one let's say over here 1 two 3 and then remember details needs to return a string so in this case I'm just going to grab whatever we have over here and then let's just add the employee ID as well so let's add a comma we're going to go with ID and then let's access this Dot and then employee ID now just so we can see that Everything works I guess instead of person details

let me go with employee get details and yep and have all three values in the console now we can also inherit from multiple interfaces essentially I can extend from the person as well as the dog owner so we're going to go with a manager instance I guess so we're going to go here with manager eventually we'll set up the type For now I just want to provide a name it's going to be equal to a bob and also for now let's go with the AG which will be equal to A35 now when it comes to

Bob not only is going to be a person so we'll need to provide all of the properties but also let's imagine that he's a dog owner so essentially we want to extend from both interfaces that we already currently have the person and a dog owner now since Bob is a manager I Also want to add a a method onto the interface and in my case I'm going to call this manage people so let's move where we have Bob and first I guess let's construct the interface and then we'll worry about the properties so we're going

to go with interface manager for stars let's just add that method that I was talking about so I simply want to go with manage people uh it's not going to take any parameters and we're not going to return Anything and if we set this equal to a bob we'll have an issue since we have two properties that we haven't set up in our interface so now let's go with extends and one by one let's look for those interfaces so we're looking for a person and a dog owner so Bob is a manager a person and

a dog owner and now if I navigate over here and set it equal to manager type I will have to provide all of these values what they are well we need to provide a dog name let's go Direct Rex it's a super popular name then we also have get details and you know what in this case I will speed this up I really don't want to type everything from the scratch so we have get details what do we want to access here I guess let's just go with age since we don't have the employee ID

then we also have one for dog so let's go with get dog details now we will go with name is and then let's access the dog Name dog name over here then let's remove the age guess we don't need it and lastly let's set up that manage people manage people let's invoke it and for now we simply want to log so let's set up a console log and let's write a text managing people and lastly just to test it out that everything works want to go with manager and it's invoke manage people if everything is

correct we should have this text in a console and again this is how we can merge Interfaces by essentially using the same name and just adding the properties another name that you might hear is reopen essentially they mean the same thing where we declare the interface with the same name one more time and then typescript is going to merge them together and we can also extend so let's say if we have an interface with some properties and methods and we just want to grab methods and properties from some other interface simply go with extends We

look for that specific interface and in the process we'll right away get those methods and properties and with this in place we can move on to the next task and up next let's work on another challenge and during the challenge we'll see how we can use typu with the interface now I did split up the challenge into multiple videos so in the first video we'll kind of prepare Everything we'll set up our function we will will return one of the interface types and then in the following video we will work on more logic where we'll

see how we can use the typ guard so I didn't want to jam everything in one video because there's quite a few lines of code and I mean the most important thing is kind of at the very end and usually if it's a long video then people just lose the interest so long story short we want To define a person interface with the name String then we want to set up a dog owner which extends the person and just add the dog name which is going to be a string and also we want to set

up a manager which extends the person so not person and dog owner no the manager is going to extend only the person and we'll just add two more methods on it then we want to set up the instance which can be either of them so we'll use the Union type and actually we'll set it Equal to get employee function now in there in get employee we'll just call math.random and based on value we'll return one of those interfaces so whether a person dog owner and a manager and again in the next video we'll see how

we can use the typ guard because there's a gacha that we need to be aware of STS let's navigate to tutorial one by one let's set it up so this is an interface we want to go with person let's go with Name equals string okay then let's also set up a dog owner so we have here interface dog owner now that one will extend the person so we'll get that name property and we also want to add the dog name dog name will be equal to a string and then the last interface is going to

be a manager which is going to extend the person and in here let's go with manage people that's our method and we're Simply going to go with void and also copy and paste and let's say delegate tasks so those are our two functions and then let's set up our our instance but before we do that let's also set up a function and I'm going to call this get employe and this is the function that we're going to use in our employee instance so for starters I'm going to go here with const employee and as far

as the type I'm Going to use the union type so either it's going to be a person or it's going to be a dog owner or it's going to be a manager and I'm going to say it equal to my get employee and I'm going to invoke it now I didn't want to move this function up simply because in the following video we'll write the code over here and I think it's going to be less confusing so let me move it up that's going to be our function and here's the task inside of the get

Employee I want to invoke math. random and then based on the value if it's say less than 0.33 well then I'm just going to return a person interface if not then it's going to be a dog owner and if not then it's going to be a manager so I have this employee notice over here it just says well the moment you're returning void and that's not what the employee is expecting so in here I'm looking for one Of these three values now in this get employee we're not not going to pass any parameters simply want

to go with our logic so let's set up the random that one will be equal to math. random so we'll get some random value between zero and one and now let's just work on those returns but also let's set up the type right away so we're looking for person we'll also grab the dog owner and potentially this could be a manager so Again we don't know what the value is going to be so every time we'll refresh the browser we'll get some random value over here and then based on that value we'll set up that

return so let's start with our first option if the value is less than 0.33 well in that case I want to go here and I want to return a name John so which interface is that well that's the person one correct so these two match then let's also set up another else If so if the random is less than 0.66 in that case let me grab this and now we just want to add the dog name so in this case we're going to go with Sarah and we're going to go with dog name and we're

going to set it equal to Rex now lastly if it's not less than 0.33 if it's not less than 0.66 then we're going to go with another else and in here we want to return a manager interface so in this case we're Going to go with return Then object name will be equal to a bob and then let's set up those two methods we're going to go with manage people and as far as the logic let me just go with console log and we're going to say managing people dot okay good and then let's do

the same thing for delegate tasks that's my function and as far as the text it's going to match now let me navigate where I have the employee and let's just log it like I said we'll have to refresh the browser so once I navigate over here notice this was my person instance then I get over here the manager correct then I get the dog owner and as you can see every time we refresh the browser we're getting a different value so in here again we want to set get employee and we want to make sure

that we only return one of these interfaces we use the unit type and then when it comes to the instance same deal I'm looking for one Of these three values so employee is going to be either a person a dog owner or a manager and in the following video we'll introduce the typ guard and make this challenge more complex okay and with this in place now let's make this challenge more complex by adding a function which is going to check for specific interface and only if it's a manager we want to invoke delegate tasks because

here's the kicker we get back our object we store it in the employee And if we try to go with name everything works why well because dog owner extends the person manager extends the person so that property will be definitely there we can navigate to the browser we just need to refresh and eventually we will see all three values but it's different with delegate tasks so notice once you start typing typescript is complaining it says well listen it could be either the person or a dog owner or a manager so you don't know that 100%

the delegate Tasks is going to be there at runtime this is why we want to set up a function and we'll start with somewhat straightforward approach and then we'll cover why we want to use type predicate so let's go here with a function my okaye I'm going to call this is manager so I want to make sure that it's a manager and then in the if block I'm just going to invoke delegate tasks That's My overall goal so I'm going to be looking for object because this is What we're getting back from employee but same

deal as far as the parameter well it can be one of these three interfaces okay then as far as the return like I said for now let's just go with the straightforward approach where I'm going to go with Boolean either it's going to be true or false and I guess the first gotcha in here is the return remember previously when we used the typ guards we did something like this we went with type of then object And set it equal to something now is it equal to what object well all of them are objects so

that's not specific so if I invoke his manager with employee this should return for all of them pretty much the same value let's try it out we're going to go here with log is manager then let's pass in the employee and let's take a look at the console notice as I'm clicking I'm all the time getting true so yeah this time guard is great but it's not going to Work in this case so if we want to check for manager we want to look for something specific and that something specific is one of these methods

and the syntax is following where we want to go with the method which will pass in the string and in and then the parameter in this case object so now let's correctly type one of the methods in my case manage people and now let's navigate to the browser and again once we refresh we'll actually See correct results only if the interface is manager then we return true and if it's not the case then we return false but there's another gotcha so now let's go and set up if block I'm going to go with is manager

I'll pass in the employee pretty much our setup and then let's try to invoke employee and same deal I don't have delegate tasks for some reason let me try to invoke it and again Typescript is complaining so here's the deal yes our logic over here is correct but just because we return a Boolean from this function doesn't automatically signal to a typescript that now employees actually type of manager and here basically yeah we passed the if condition but as far as typescript is concerned it it can be still one of these three types and this

is where type predicate is super useful and that is a special kind of return That not only returns a bullion but also it asserts the argument to be a specific type so what am I talking about in here instead of the Boolean we can go with object that's going to be the syntax is and then since I'm checking over here for the manager that's the interface I'm going to use and now typescript definitely knows that once we pass this condition this will be a interface manager so once I navigate back over here going to refresh

once I'm getting back the manager I'm also logging delegating tasks okay and at the very end of the interface section I also want to cover the differences between the interface and the type alas so if you're setting up the object since interface is used to provide the shape of an object you can use either of them so if I have object John with name and age I can either use the Alias type person or I can use the Interface person now as far as the differences you see type alas we can also set up for

primitive types for example if I have number or the union type number or string and the literal types you won't be able to do that with the interface so that's the first difference again when it comes to interfaces they're useful to provide the shape of an object but you won't use them with the Primitive or with the literal type now with interfaces we can Merge them together like we covered before or another word is to reopen them you won't be able to do that with the type so with the interface you can set up the

interface you can add some properties then I don't know three lines later you can create the same interface basically with the same name just add more properties and you're good to go that doesn't fly with the type that's another difference now as as far as the interfaces they can be implemented by The classes while the type aliases cannot be implemented in such way so if you work with classes this is something to keep in mind you can use the interface with the class but you won't be able to implement the type Alias with the class

and lastly remember when we covered computed properties you can only do that with type Alias so you won't be able to use the computered properties with the interface and with this in place now we can move on to our next Topic okay and up next let's discuss Tuple or Tuple in typescript which is a special type since we don't have it in JavaScript and essentially it allows us to set up an array with fixed length and ordered with fixed type in other words it's super useful when we want to group different types of values together

so for example I have a let person now this is an array and here I have string of John and then number of 25 I can set the type in such a way where I go with my array and then I provide those values so in this case I'm going to go with string and number so now this value is fixed so if I'm going to try to add something else like hello typescript is going to complain if the types are not going to match if for example I do decide to place 25 over here

typescript also is going to complain so not only we have fixed length but also we right away set up the Fixed types so now this value can be only the string and number now there is a gacha something I'm going to cover in a second but for now let's just focus on this that yes it's going to be John and it's going to be 25 now you're not limited to only two values over here you can set up as many as you want and for example you can go here with number and number I mean

that's also an option let's say you don't want to have just an array of numbers but you want to have an Array with fixed amount of numbers so let me just go here let's say with date so in this case it's going to be number number and number and then depending where you live either you'll pass in the month or the day so let's say I'm going to go 12 then 17 and then we're going to go with 2001 so notice now this is a fixed array with number number number so again if we make

any changes that typescript will complain about it now it's useful if Let's say we want to return something from the function let me go with function get person and we're not going to provide any parameters I'm just going to say that yeah this function is going to return an array with such types so string and number so now let's set up the function body where we want to go with our array we want to pass in John and we're going to go with our 25 so now if we have random person now and that one

is equal to a get person we Invoke it if we log random person and then zero copy and paste and one in a console we should have both of those values now like I mentioned the gotcha here is that even though when we're hardcoding these values typescript is going to complain unless we provide over here this read only we can actually add items or remove items from our particular array so how is that going to look like well let's say if I go with date. Push I can add the values and typescript actually is not

going to complain about it now it complains because it's not a number right so it says well it's not a number but if I change this to do my 34 everything is going to be fine so I can set up multiple instances and now if I loged the date check it out it's probably not something that we expected now the workr is to provide this readon over here so in this case I cannot do that so once we add this Readon we cannot use anymore the push pop or whatever methods that's something to keep in

mind now lastly I also want to mention that we can use the optional parameters as well so let's say if I'm going to create a new instance and I'm going to call this Susan so I'm going to go with my Tuple we're going to set up a string number and in here I'm just going to go with my optional parameter once I set it equal to my function notice I can just provide The string and basically I'm good to go typescript is not complaining this should do it for tuples in typescript and up next we're

going to discuss enums in typescript okay and up next let's discuss enums in typescript against something we don't have in JavaScript and essentially enums allow us to define a set of named constants the syntax as following we want to go with keyword enum then let's come up with a name in My case I'm going to go with server response status since we'll have a little bit of functionality so we're going to go with response status then we want to go with the curries and this is totally up to you you can go all lowercase you

can capitalize the first letter or you can go all uppercase totally up to you we just need to provide divide over here the values and in a second I'll show you what this Actually results to so first one is going to be success and then the error now we can add more but for our example we really don't need it then let's set up the interface in this case I'm going to call This Server response and then the first property result actually is going to be type of enum so let's set it equal to to

server response status and then another one is going to be a data and this will be an array of strings so now let's set Up a function get server response which actually is going to return this interface so we go here with function get server response let's invoke that as far as the return type let's set up the server response so this is equal right now to our interface and then inside of the function body we want to go result and now since this is type enum over here this is what we want to use

so we go over here with server response status and notice we either have error or Success again you can use enm if you want to store some constants and then later on use it in your project so now in this case we only can provide success or the error so let me type this one and then in order to match our interface I'll provide data as well I'll say first item then comma and we're going to go with second item now I do need to add a comma over here we do want to invoke it

and set it equal to response const response is equal To our get server response let's invoke this function over here and let's set up the type what we're expecting so we're going to look for our interface and then let's also log the response just because I want to show you the potential values we can set up over here so at the moment we have success and error and by default they actually get the numb starting with zero and I'll show you what I mean in a Second so first let me just log the response and

notice how the result is zero now why is that well because if we go up over here and we log server response status we'll see that we have right now the success and error and the values are zero and one so it starts with zero then one and then pretty much the more values you add well the more numbers you're going to have now don't be surprised if you see quite a few values in a console ENT at the moment we have four of them this is something we're going to discuss in the upcoming video

for now I just want to showcase that even by default you get those values starting with zero so 0 1 2 3 and whatever you can also reassign them so for example I can say that success is going to be equal to a 500 or I'm sorry 200 and error is going to be equal to 500 or I can mix and match I can say that yeah error is actually Going to be equal to this string this also is valid and again the main point is that now we have over here this constant which we

can use all throughout our project instead of trying to make sure that we type the string or the number correctly okay and up next let's take a look at the gacha with enams which is the fact that when you have number values it's actually going to do the reverse mapping and remember it is the default so if we Don't provide anything we will get that reverse mapping for example if I provide over here 200 and 500 if I navigate to the browser again I have more values over here in this object so not only error

and success but I also have this reverse where number is actually a property and then whatever is my constant name is set as value now why do we care well because let's say we want to iterate over the values in JavaScript we have object. values and then we pass In the object in this case we'll pass in the inum and you'll see that everything is going to work but it's going to depend what kind of value we have over here if we have a number we'll have to do an extra check so let's go here

with object dot values then let's provide server response status and we're going to go with for each so we're iterating over now I want to grab every value and we'll just log it and again since I have the number Values I have this reverse mapping so now not only I have the number value I also have this success and error and it's not going to be the case if let's say we're going to go here with success and in here error again something valid that you might set up in your code now everything is correct

now we're only accessing that string so if we have numbers which again is the default setup so again let me set it up here as 200 just so we're on the same Page the solution over here is just to add another another typ guard so if I only want to access the values they are type what their number so this was going to be a string therefore in here I'll say if type off and value that was the name of my parameter if it's equal to a number well then I want to log it or

do some kind of functionality in this case just log so we're going to go with console log and we'll log the value so now we Correctly just access those number values now another place where we need to be careful is when we're setting up the value so notice something interesting if I have an enum I have a constant over here and the value is number then later when I set up this enum as my type I can still use the good old number so this is going to work because again typescript is doing that reverse

mapping however if you have an enum where the constant value is Actually string this is not going to fly so just to Showcase that I think I'll comment this one out so if I have here 200 and 500 if I set up over here this result to be equal to my enum I can go to my server response and this is going to work work so typescript is not going to complain about it and I can see that my code runs and everything is awesome however if again and I promised for the last time we'll

change it around we go with success and error this is not going To fly if we navigate back to our get server response and try to provide the string value as you can see right now typescript is complaining so we cannot assign string to a type enum however when we use the number value it's going to work because there is this reverse mapping hopefully that's clear and now we're ready to move on to the next topic okay and now let's work on our next challenge where we want to define a enum with the consant of

admin manager and Employee Define the type Alias named user and in there we'll set up the ID property name as well as the rooll and the RO is going to be equal to our enum and also we'll set up the contact which is going to be a tuple on two elements the email which is a string as well as the phone then we'll set up a function by the name of create user which will take in the user object as a parameter and return the user object and then at the very end we'll call the

user object Provide the object object and we'll create the instance so in tutorial I think I want to start by defining that enum here let's call this user role let me set up my constants here and I think I'm going to rely on those default values so 0 1 two and I guess in this case that's going to be it only going to be 0 and one two then we also want to go with employee after that let's set up that type alias in this case User here one by one let's set up those properties

ID is equal to a number then we also have name is equal to string we're going to go with roll and in this case it's going to be equal to a user R so one of our three constants and then we also want to go with contact and we set this one up as string and string we have create user function so let's set it up over here create user and this one is looking for a user parameter which is Going to be type user same deal over here we're going to go with user and

from the function we'll return the user and the last step is to create the instance so let's go with the user which will be type user let's call create user and now let's provide the values ID name John do then also we'll have a roll and since we're using our enum we're just going to set it equal to user R then Dot and one of the values in my case I think I'm going to go with admin One and then at the very end we also have the contact I want to set it equal to

our array and let's just provide some values gmail.com comma and then we're going to go with 1 2 3 four 5 six and 7 89 the very end let's just log it and pre sure everything is going to be correct Yep looks like I have the correct value and with this in place we're ready to move on to the next topic and up next let's cover type assertion Which is a way way to tell the browser what type an existing variable is and this is especially useful when we know more about the type than the

typescript does as a side not it's very handy with dom elements so if these examples don't seem that convincing in the later sections we will cover different examples as well so let's imagine the scenario we have a variable and I'm going to go with some value and for some reason type is any now as far as the Value I'll set this up as a string so this is a string and then in the next line I want to get the string length which actually is going to be a number so in here let's set it

up type is going to be equal to a number and now I want to go with DOT length but I want to assert to a typescript that actually this is a string so I'll say some value and not just any type I'll say as string so the keyword we're looking for is this as that's the assertion where we tell Typescript that yeah I know that maybe this is not something you expect but I know more and I know that this is the specific type this is also something that we can use for example with the

Json parse because it returns any so let's say we have a type bird now this type bird only has a name and we'll set it equal to a string now it looks like I have a type over here so let me set it properly and now I'll set up two Json strings and We'll run pars now in order to speed this up I will grab those values from the read meor here so basically we have bird string and a dog string we want to set it up over here and now again once we'll run Json

pars you'll see that type actually is any so let's say I have a bird object and that one is equal to Json then parse and now I'll pass in my bird string so again let me copy and paste and let me set up one for the dog and as we hover over like I said Type is any but I don't want type to be any I actually want this to be a type bird so if we create an instance or any other functionality and we set it equal to a bird object instead of just leaving

it as type any I can go with as and then my type because I clearly know that yeah maybe I'm getting this back as type any but I know that the signature matches whatever I have here for the type bird now please be careful you can also do something like this where you can set up The dog to be a bird and most likely that's not the behavior you want so if I go here with not bird object I'm going to go with a dog object and I'll set it equal to a bird I will

be able to look for dog. name but if we take a look at the dog string it doesn't have that property so it has the breed so if we go here with log and we type bird name and as I said for some reason it's complaining it says cannot find bird and yep it's because for some reason I named It bed so let me go here with bird and also a dog notice how typescript is not complaining because I made a type assertion that yes this will be type bird even though we can clearly see

that it's actually type dog now we don't have the type yet but you get the point so if I navigate right out of the browser notice how I will get this unexpected undefined at runtime and at the very end let me just show you a use case that I Just encountered when I was working on my next JS project so in there there was a enum and I believe the name was status don't quote me on that and there were more values but I'm just going to set up two so we don't have to spend

all day typing and essentially there was a constant and I set the values equal to a string so there was pending I believe interview declin but we're just going to go with these two so we're going to go with declined and we'll set it equal Also to a string so I had this enum and then I was just adding it to I believe it was the job instance and I was saving it in a database now here's the kicker when I was saving actually in a database I was saving it as a string because that

was the value for my status pending and then when I was getting back the value from the database it was already a string but I needed to reassign this value to one of the instances and at that point Typescript was complaining because they didn't match and if this doesn't make any sense let me just showcase let's imagine that we have a user object and in there I have two things I have name String and also status is now going to be equal to a type status so we know that ually we can use status. pending

status. decline everything is nice but since these values are not numbers we don't have that reverse mapping so if we'll try to Set this value as a string it's not going to work so now let me quickly navigate to read me and I just want to grab these two comments over here again just so we don't have to type this from the scratch imagine this scenario now we save status pending in a database but we save it as a string so we'll save this value over here then we get it back from the database and

now I'm going to go with the status value and I'll set it equal to the String value of pending so effectively this is what I'm getting back from the database again kind of makes sense correct because this is the actual string value now if I'm going to go here and set up my user instance and set it equal to my user type yep I typed the name everything's correct but if just going to go with the stat is equal to a status value notice how typescript immediately complains type pending is not assignable to this Type

so typescript doesn't know that I saved in the database as a string so I know for sure that it's the value that's going to match the constants here in the status TPT doesn't know that it just says Hey listen status here is type status so you cannot set it equal to a string and this is where the assertion is useful where I say yeah it is a string but I know for sure that is type status so again type assertion essentially is a way to tell The typescript that we know what the type is that

we know more about the type than the typescript does okay and up next let's cover type unknown which is a type safe counterpart to type any so just like type any we can assign any value to type unknown but the difference is that before we can use the variable with type unknown we need to perform some type checking which again avoids the unnecessary runtime errors so let me go to tutorial and in here I want to Create a variable and I guess in my case I'm going to call it unknown value so that will be

my name and as far as the type I will set it equal to unknown so just like with any I can go here with unknown value and I can set it up for example to be a I don't know a hello world so Yep this is allowed I can also go to a next line and set it equal to for example array that is also allowed so let me set up my array I'm going to go with numbers okay Good and then also we can set it up to be a number so let me go

with 42 and then let me add some numbers after your D dot so this is allowed now the difference is that I cannot go over here and say unknown value and then set it equal to a fixed as we can see typescript complains it says Hey listen that type is unknown and right away you're running some kind of method how am I supposed to know that it's actually a number and we can run this particular Method I mean maybe it's still a string so the difference again unlike type any before we can use that value

if it's type unknown we need to check what is the type so in this case we can do following operation I can go type off and then unknown value and I can check well if it's a number well then I want to run my method so let me move this sucker down and notice now everything works because in this condition typescript knows that yeah unknown value Is actually a number now one place where we'll definitely see type unknown is in the try catch block because by default typ scrip is going to set this error to

be unknown now why do we care about that well what is typically the first thing we do over here go here with log and then error and then the message and notice how T says well error is type unknown so how do you know that there's definitely going to be over here this message property and this assumption Comes from the fact that typically especially if we're throwing our own errors over here we use the following code we go with throw new error and provide whatever message and in this case I'm going to go there was

an error so this is is a nice assumption but please keep in mind that JavaScript can also do something like this we can go with throw and some string over here and I know what you're thinking well there's no way I'll do that in try clatch block Yeah but you might be running some code from third party library and at that point you don't know whether the error you're going to be getting back is going to be the instance of the error class or it's going to be something else again it literally can be a

simple string now to demonstrate that I will use somewhat of a silly example where I'm going to set up the function over here I'm going to go with run some code so let's imagine that we're saving an image in a database Or I don't know we're posting some data somewhere or sending an email or whatever and in here I'm just going to set it equal to I Rand them then let's go with math. random let's invoke that and essentially if it's less than 0.5 then I want to throw a new error if not then I'll

just throw good old string so let's set up over here if else and let's check for random if it's less than 0.5 then I want to use the Seconder let me set it up over here and if not then I'll just go with throw and we're going to go with some error so let me save this and now in Tri block let's go with run some code and effectively in here in a catch we want to check whether the error is the instance of the error class and if that's the case yeah then we'll have

access to the message in this case there was an error and if not well then we'll simply log and provide some hardcoded Error and this is essentially what you're going to do when you're working with typescript before you do something with that message you want to check whether the error you're getting is actually the instance of the error class so here in the cach block we want to go with error instance off we're looking for the error and then if that's the case yeah then tcri knows okay there is a message property and here we

can go right now With log and and we can set up the error do message now if it's not the case since I already have some text I'll simply log the error let me log it so now let's navigate to the browser and check it out depending on that math random either we're going to get there was an error or we'll have that string some error and again just like any type unknown can be anything but before we can start using type unknown we'll have to do some type Checking and therefore this is a type

safe alternative to type any and up next let's cover type never which is a special type that represents the type of values that never occur now I'm not going to Sugar Code it especially in the beginning this entire concept might seem pretty confusing but hopefully after we cover one of the most common use cases of type never it's going to be easier to grasp the main concept of type never for starters let's just establish that if we Have a variable with type never we cannot assign value to it so let's say if we set up

a variable some value and if let's say it's zero if I'm going to go with type never typt is going to complain and I'm going to get the same result regardless of the value over here so this can be hello world this can be an array doesn't really matter we cannot assign any value to type never so that's the first thing we need to remember second you might encounter in your own Code Type never if you set up one too many conditionals speaking from the personal experience so let's say you have a type theme over

here and you set it equal to two possible values either is going to be light or it's going to be dark then let's set up a very useful function called check theme yes we'll say that theme parameter is going to be equal to our type of theme now we're not going to return anything so I'm just going to set it Equal to void and then inside of the function I'm going to set up two conditions I'm going to go with well if theme is equal to and then I'm going to go with light one and

I'm not going to be particularly original I'm just going to go with light theme and then let's return from the function and we already know that typescript is super smart it knows that at this point theme can only be value of dark correct because these are the only two options but let's Imagine scenario where we do add another condition I'm going to go with if theme is dark okay good then I want to log it but I'll change the value and I'll also return let me change this one around let me go with dark theme

and notice something interesting if we type theme after both of these conditions typescript says Hey listen theme is type never because we have handled all of the possible cases so at this point in time there is no Possible value for the steam so if you ever encounter such scenario you'll have to go back and look at the original value and also all the conditions you're setting up because somewhere things are going south if you are at the point where variable is type never well then you already have handled all the possible cases and what's really

awesome we can actually use it to our advantage the fact that we cannot assign any values to never and also the fact that Typescript will immediately assign type never if we cover all of the possible conditions as far as our example we're going to go with enom I'm going to set it equal to a color we're going to go with red and blue so those are two possible values now we can assign it to a string but there's really no need then we want to set up a function in my case I'm going to go

with get color name as a I not I'm just going to set up a switch statement where we check for possible Values but if you work with Redux you'll find this example very similar to how we set up the Redux store so as far as the type for my parameter it's going to be a color and inside of this function I simply want to go with switch I want to check for my color and let's set up our cases so at this point we have two of them so we're going to go with color. red

so if the color is red what do we do then well then we want to go with the return Red so let's set up our colon return and we're returning the string of red and if it's blue well then let's just change it around so let me select these two and let me just go with blue then let's set up to console logs iess let's invoke get color name and we'll pass in color then red and we're going to copy and paste and set up blue as well and everything's awesome if we take a look

At the console yep we have red and blue but what if sometime later we go to a color and add green and notice everything is valid not breaking any rules over here the problem is going to be here when we invoke it this is going to fail but the worst case it's actually going to fail silently so if we navigate right now to the browser we can see red blue and undefined why well because we're not handling the case over here And again this fails silently so we set up nicely an additional enm we correctly

pass it in and then unexpectedly we're getting an error correct and if you're familiar with such code you're probably screaming at me you're like Hey listen just set up the default case and throw the error and you're correct before typescript that was the approach so let's go here with default then we go with throw new error and for now let's just take a look At the color and all of the is nice but keep in mind this is again happening at runtime so yeah we have this default case where we throw the error if none

of the conditions match but I actually would like to do that while I'm writing the code not when my application is running so we can definitely keep this one over here but a typescript approach is to come up with the variable and I'm going to go with at build time here and me add another comment and in here I'm Going to go with at runtime and in here we want to set up another variable now the name is really up to you but I'm going to go with unexpected color the type will be equal to

a never and I will assign it to the color and notice how immediately typ script complains why well because initially we only had two values so if we go back to this one everything is correct I only have this yellow squiggly Line which is totally okay but if I'm going to add this green one then right Away tab script is going to yell at me because now I have one more condition and of course we already saw that if we don't handle it over here then essentially we will throw that error at runtime so what's

the solution well we go with another case let's go color green and same deal just want to go with the return and return a string in this Case it's going to be a green one and as you can see the moment we shut up our cage types doesn't complain anymore everything is fine because we have three possible enums and we're handling all of those cases in our get color name as well so essentially this is a great benefit for us where we can check for those potential errors at build time instead of just runtime okay

and up next let's switch gears and quickly discuss modules and typescript now if you are Familiar with how es6 modules work most of the things we're about to cover will be a nice review but when it comes to modules and typescript there are some GES we need to be aware of and let's start with the main one you see by default in typescript files are not modules they're actually treated as script in a global scope so what does that mean well if I go to a source come up with a name for example actions TS

come up with some Random variables one is going to be Susan then second one is going to be something so let something is equal to something if I create another file or in the tutorial try to use the same variable name not going to be successful so typescript is actually going to complain so it doesn't treat this file as a module so whatever I set up in my files is actually put in a global scope which obviously limits the variables I can use I have Susan over here and I also have Susan in the actions

and therefore typescript is complaining so pretty much think of it this way everything that you put in the files by default again we'll fix that in a second but by default was actually put in the global scope so in order to fix it we have two options we can go to TS config and essentially set the property or we can add the export and import and the moment we add export and import then They're treated like typical es6 modules now also don't be surprised about this gotcha where let's say in tutorial you'll try to come

up with the variable with the name of name and you won't be able to even though technically in actions we don't have this value over here you see such name is used in declaration file again something we're going to cover a little bit later and again we have this name Collision because typescript doesn't Treat this file as a module so essentially unless we change that there's going to be some keywords that we cannot use and this was super confusing to me in the beginning because as I started learning typescript I wanted to use this name

variable and I got this red Squigly line and I was like what's happening over here why I cannot use this name one I mean there's technically no error and again let me repeat for a third time it's because by Default typescript is going to essentially treat the files as just scripts in the global scope so once we know the issue how we can fix that like I said we have two options over here we can either go to TS config and add the property and you know what let me just first showcase is how this

would work with Import and Export if we add export or import statement to our file immediately typescript is going to essentially treat this as a module so For example if I'm going to go back to a tutorial and if I'm going to go with import and I believe this one was the named export so we're going to go with something from the actions everything is awesome so notice we don't have the issue anymore with the global scope correct so now these ones are scoped to tutorial and then these ones are scoped to the actions hopefully

that is clear so this is one approach now what if I don't want to add Import and Export like Force it in a way well then we can go over here to TS config and we're looking for the property by the name of my module detection and we want to go with Force so by default it's going to be set to Auto but we want to force it so in this case even if there is no export statement everything is going to work so notice now of course I have different complaint because I'm importing from

the actions and there is no export but the moment I save I can use the name even Though it's technically used in declaration file which was the issue before and I don't have this name collision with actions anymore as well so I have Susan over here and the same is in actions again few approaches we can either add the property in TS config or if we add Import and Export then immediately typescript is going to treat it as a module okay and once we're familiar with The main gotcha let's just see how we can use

es6 modules in typescript and like I mentioned before if you are familiar with the main Concepts this is just going to be a nice review now before we start typing away I do want to mention one property in the TS config which is module and at the moment notice how we have the value of es next now this property controls what module syntax is set up in the out put code so effectively once the typescript Is done compiling our code so if I navigate to a playground notice I have my export statement over here where

I'm exporting some function and this is going to be the result now if I go to TS config and change from es next to for example commonjs and as a sign not if you're not familiar with commonjs it used to be the main module syntax in node.js but even no. JS is right now slowly but surely switching to a es6 module syntax and notice the Moment we change it actually this will be the output so this is a common JS syntax so if you ever have a use case where you want to use different module

syntax in the output code just look for the module property something I wanted to mention and now just go to actions and set up few values we want to export and then in tutorial we will import them again just to have a nice review how the es6 modules essentially work just so you can see that pretty much the idea is Exactly the same first I want to go with um some kind of function I'm going to go with say hello let's set up name equal to a string and you know what I'll also say that

we're not returning anything from this function in here we're going to set up a nice console log we're going to go with hello and let's access the name so nothing really groundbreaking then let's also Export let person is equal to Susan and let's also set up a new student so this will be my object and there's going to be a type for this student so new student I don't have the type yet so let me just type over here Peter and age let's set it equal to 24 and you know what let's do set up

to type because I want to showcase how we can nicely export type so for now let's just go with Type student and name is equal to a string then age is equal to not string sorry I'm going to go with number and then new student is going to be type student and now since I already have two named exports I just want to showcase how we can do the default one as well so we're going to go with export default then new student and essentially call it a day so now I want to navigate to

tutorial and one by one let's grab all of those Values since I have the default export I'm going to go with new student which is coming from the actions of course we can use a different name but I'm not going to do that and then for the name ones we're going to go and say hello and also we'll set up the person one second yep I want to save and let me open up the tutorial over here so these are the things we are importing right now let's invoke say hello we're going to go typescript

okay good then Let's log the new student and also a person just so we can see whether we're getting the correct values and then we'll talk about the types and how we can export them so hello typescript I have Peter as well as the Susan so everything works as we expect and as far as the types yes we can nicely export types as well so in here I can go with export then type student and then back in tutorial I have few options I can either go here with The student notice how I'm getting right

away a nice suggestion or we can also add over here this type again this doesn't change anything as far as the functionality it's just a common approach to signal that this is a type we're importing so this clearly signals to me that hey this is a type that I can use in this file so for example I can go here with const another student set it equal to my student Type and let me add different values so this will be equal to Bob me add an equal sign over here comma and we're also going to

set up the age of 20 three and then if I log another student we can clearly see that we don't have any typescript errors and then in a console we should have the correct value now million doll question what is the correct quote unquote approach should we set up the types in a separate file and then import It or we keep it in the file where we're actually using the type and as always the answer is probably not something you're looking for it really comes down to your preference yes definitely you can set up over

here a new file call it types DS and then pretty much every time you have a type in your project set it up in the types and then import in all the files where you're using that value it's definitely an option you can definitely Do do that and another approach is to keep the type in the file where you initially are using it and then if you ever have a use case like in our case in tutorial you export and then grab it in tutorial and a common scenario is that you initially just set up

the type in the file and then if you see that you are reusing it all over your project then yeah at that point it kind of makes sense to keep it in one place since the Imports are going to be easier you won't Have to think about well where is the actual type located but again as always it really comes down to your preference all right and while we're still on a topic of modules let's also see how typescript treats JavaScript files so remember at the very very beginning of tutorial I mentioned that whenever we

work with typescript in our case since we're working with JavaScript files and react files we need to stick with either do DS Extension or DSX extension and now let's see how typescript is going to treat the file if it's just a JS extension so let's say I'm going to go with source and we're going to create the example JS and let's go with export some value that is equal to some value everything is awesome I'm just missing over here the keyword in this case I'm going to go with let and now if we go to

tutorial What do you think is going to happen how do you think typescript is going to treat this file let's go with import some value and it's coming from and I don't see essentially it in my suggestions so I can try to force it I can say over here example JS but not going to be successful so effectively typescript is complaining that it couldn't find the file now the reason for that is because it's not a Typescript file so here's the thing about typescript it pretty much needs to know everything about your project and this

is something that we're actually going to come back to when we start working with the third party libraries in our project essentially when we start using the code that's coming from somewhere else so as far as typescript is concern no we need to set this one up as a typescript file so then it clearly knows well what is the shape for the Data we're getting because at the moment typescript is like hey I don't know what are you getting over here I have no info on this sum value now we can force it there's a

property we can add in the typescript config just keep in mind that typescripts ability to infert types it's not going to be as robust as when we're working with the typescript file so yes we can navigate right now to TS config we can look for compiler options and we can go with Allowjs and essentially we can set it equal to true now we do need to add a Comm over here and now everything magically Works in our tutorial so essentially typescript can infer that some value is actually a string but just be careful with such

approach effectively since we're working on a typescript project yes we do want to name our files TS because then typescript is going to know that it's a typescript file and It's going to have the info on the shape of the data and if you'll just set up JS file without making any changes to the DS config try to run it typescript will complain basically it's going to say Hey listen I'm not sure what are you exporting what's happening over here I'm not okay with this so let me remove and delete this import as well and

with this in place now we can move on to the next topic and up next let's explore the Tyard options available able in typescript basically my goal was to gather all of our options in one place and since we already discussed most of them throughout the course this section will primarily feature challenges so if you're interested read the steps and attempt to complete the challenge before watching the video also for some challenges I already provided star code so we can spend more time on the typ guard Concepts and we're going to start With the good

old type off typ guard and this is going to be our star code where we have a type it's either string number or Boolean we assign it to a variable and then we just invoke math. random and then depending on the random value if it's less than 0.33 then the value is going to be low if it's bigger than 0.33 but less than 0.66 then it's going to be a number and if it's actually bigger than 0.66 then it will be a bullion and our Goal is to set up a function in my case I'm

going to call this check value that takes in one parameter value and the type will be this value type and instead of the function effectively we want to check for all of these conditions for the string number and Boolean and based on that we want to do something again it doesn't really matter what we do as far as the functionality but we do want to set up those typ guards correctly so let me just take the star code just so we Can spend more time on the actual function let me set it up here in

tutorial and let me start working on the function so we want to go here with function then check value is we'll be looking for the value parameter and I'll right away set it equal to a value type now this function is not going to return anything at least in my setup and then let's just set up those typ guards and remember one of the most straightforward Type guards we have is type off and then we have bunch of possible values so if I go here with if then type off I'm looking for my parameter and

I set it equal to and in here we should at least get a list now the reason why we don't have the list is because I have three equal signs over here so we have this big in fion function and you can read the rest so let's start with the string one over here and I guess since people are tired with the uppercase when don't We go with log and value two and let's try the lower case somewhere to lower case okay good let's return so we want to set up the return here then let's

check for the number and if we bypass both of these conditions then logic tells us that the value is going to be bullan so I guess you know what order to speed this up I'll just copy and paste in this case I'm not looking For string we're looking for number and then we want to go with two and fixed and let's pass in two again we want to return and at this point it is a Boolean so let's go here with log and let's just log the value so let's access the value and let's invoke

the function so let's go with check value and pass in the value now let me navigate to the browser notice at this point it's a number then I have hello and at this point it's a Boolean and With this in place we can move on to the next typ guard all right and the next typ Guard we're going to discuss is going to be equality narrowing now don't be scared of the fancy name essentially is just a narrowing which occurs when we use equality checks now I think will right away also go with the check

for property typ guard because effectively we'll have the same starring code so we have these two types one is dog one is cat and in here we have the type Property which references the actual type and also we have the name as well as the method which is unique to that specific type and essentially our goal is to come up up with a function which is going to check for that specific type and if it's a dog then we bark and if it's a cat then we meow and like I mentioned before we'll pretty much

work on both of the challenges since the starting code is the same and we just have multiple options how we can narrow Down one of the types so in tutorial I want to grab this code notice how we're using over here the Union as well so now we have this animal which could be a dog or a cat so now let's set up our function which makes the sound so make sound function we're going to go with animal so that is going to be our parameter and that one will be equal to our type animal

and here let's go with animal and which property is unique well that will be the type one correct so we Can just say well if animal type is equal to in our case dog well what do we want to do we're going to go with animal and bark because we know that it's a dog now if it's not the case we already know that we have animal and our other option essentially is to meow so if we go over here and just invoke the function depending on what we're going to pass in that's what we're

going to get in the console now at the moment again there's no function a over here Hopefully it's clear that effectively we're just narrowing down the types so this is one option we have also we can check for property and how does that look like well we can go here with function then make sound same deal animal is equal to our animal type and then inside of the function we want to set up if and now we're looking for a specific property in the type now in our case which one is the specific one well

you Can actually check for method you can take a look whether bark exists if it is an animal then we know that it's a dog if not then in our case we know that it's a cat so we're going to go with if and then bark in so this is a keyword we want to use in the animal well if it's the case let's go with animal bark and if not then we know that it's a cat so we can run the other method let's go with meow and let's invoke it so effectively when we

have such setup These are the options we have either we can check for property or a method or if we have a property which has that unique value for example in this case it's a typon well then we can also use the equality checks all right and up next we have truthy or falsy guard and it's as straightforward as the name suggests essentially in here you just want to check for truthy or falsy value in the condition and depending on the result just set up the functionality and as far As the challenge we want to

create a function in my case I'm going to call this print length we're going to be looking for a string parameter as far as the type we're going to use the union type so either it's going to be string null or undefined and then if it's truthy if it's a string then we just want to log string. length if not then we'll just say that no string was provided and then we'll just test with few values so here In the tutorial we want to go with function print length let's look for string I'm going to

go with SDR and then as far as the type either it's going to be a string either it will be null or we're going to go here with undefined and if we want to check for a valid string we simply want to set up the if block and then pass in the SDR so if it's truthy if there's value in a string then we'll end up in this if block and as far as the logic We're going to go with s strr and then length so at this point we know that it's a string now

if it's not the case I'm just going to go with log and let's just go with something generic no string provided even though as I'm looking at it I mean we're also going to end up here if there's no value in the string so technically it's not 100% correct but let's just go with this one for now again our main purpose was to set up the function it inside of the function so Let's go with print length let's go with hello over here then let's pass in the empty string then we're going to go here

with null and after that let's pass in pretty much nothing let's at least try to do that now we're not going to be able to since typescript is going to complain but let's just pass it in just for our reference so let's say if we don't provide anything and also at the very end let's go with print length and and set up the undefined now let's Navigate to console and essentially notice if we provide a valid string yep the result is four so we get back this length and if not then we just have a

list of no string provided again not 100% correct technically in here it is a string but it's an empty one but again these are just Minor Details the main goal of this video was to showcase the truthy or falsy type guard in typescript all right and up next we have instance off typu which is a way in typescript to Check the specific class or Constructor function off an object at run time and this is something we actually covered very very recently when we talked about type unknown so therefore in this case again we'll have two

examples we will go back to trying and catch so we'll reiterate pretty much everything we learned in the type unknown video and also we'll work on the another example where we'll check for the date so first let's just reiterate that if we have try And catch this error is unknown so even though we have over here for sure throw new error and if I pass in the message typescript will complain if we'll just go with error. message because there's also a possibility for different type of error essentially we might have an error which is not

the instance of the error class so therefore if we do want to access the message first we want to go with error And then instance off and we're looking for our error class so if it's the instance yes then we know that there is that message if not well then we simply want to log something some kind of hardcoded message so let's go here with log and then let's provide some kind of string and we're looking for error object and now we just want to render I guess the error message so error that message so

now we can access it if not well then let's simply log something Else we'll just go with unknown error error and do dot dot again if we navigate to the browser if everything is correct we should have this one over here why well because at the moment in Tri block I have try new error now if I'm going to comment this one out or simply type above and say throw and some error now I should have unknown error in the console so again this is something we covered pretty much few videos ago now also we

can use such setup to check For date so we can check whether the input we're passing in is a string or it's actually the instance of the date object so let's set up our function we're going to go with check input and in here the variable name is going to be input basically the parameter name and then either it's going to be date or it's going to be a string now from this function we want to return a string and now we want to check whether the input Is the instance of the data object if

it's the case then we want to turn it into a string now if it's not the case if it's simply a string then we want to return the input so let's go with input instance off then data object here and then let's use input since this is a date right now we have access to all of these methods we're looking for get full year let's invoke this one and we want to turn it into a string so notice if I just return this one typescript Immediately complains because this will be a but we said that

we want to return a string so let's invoke this two string so now typescript is not complaining and if it's not the case if it's not the instance of the date well then I don't need to do these acrobatics I can simply return the input so now let's construct two variables we're going to go check input in here let's just pass in new date and also we're going to go with Some random values as well random and we'll set it equal to check input and let's just pass in some kind of string so 2020 the

best year ever of course in the air quotes and let's pass in some random date then let's log both of these values we're going to go over here with year and random I'm not even sure whether we are really interested in the console but let's just log it and notice essentially Both of them are strings and again the instance of typ guard is a Nifty way for us to check in typescript whether the object is an instance of a class or created by the Constructor function if it's the case it's going to return true if

not it's going to return false all right and up next let's discuss type predicate function which is a special kind of function that not only returns true or false but also we can narrow down the type and Again this should be a refresher because we did discuss type predicate previously as far as the star code let's just grab this one and then we'll go over the challenge so here in tutorial I have two types I have the student one as well as the user notice this property is the same it's a string and the only

difference well they have different methods so one is study and the other one is login then I use the type Union to create type person which can be Either the student or the user and then again I go with my math. random if it's bigger than 0.5 then I'll return one if not well then I'll return another one so either this is going to be a student or a user and effectively what we want to do is set up our type predicate function where not only we check for specific type but we also want to

help typescript by narrowing down the type uh in my case I'm going to show you two options how we Can check for specific type but feel free to use whichever makes the most sense to you and then after that we want to use if else essentially run our type predicate and if it's true we want to invoke one of the methods so let's say in my case I'm going to be checking for student if not then I'm going to invoke login which is for the user so right after the person I'm going to go with

function is student at least in my case I'm going to be checking for student Again this is totally up to you you can check for user as well now I'm going to be expecting a person which again can be either of them for now I'm not going to set up the return type and as far as our options well we can use the in operator something we talked about literally few videos ago where again we're looking for something unique in this case either it's going to be study or a login and we just go with

the method name then in and then the person since that's our Parameter or we can also use the type assertion which where we assert that person is going to be a student then we invoke the study method and then we check whether it's defined or not so again this part is totally up to you for now again we don't have any returns I just want to showcase that if we go here with return and then study again our method in person this will return either true or false so either this method is in the type

or not Now if it's the case then we want to go with person is the student correct because at that point that script knows for sure that the instance is the type of student and if that's the case then we can use the study method now alternatively we can use this approach where we go to return Then person and we assert that it's a student now what is the method student Has it has the steud one but again just because we are asserting doesn't magically make this person to be a student and therefore in here

we still check we say okay we assert that person is a student we know that there is a study property but it also can be undefined so it's only a student if it's not undefined like so so those are the two options you can use over here and now let's set up the if blog let's say well if it's a Student then let's pass in the person what do we do at next well then we can use essentially our method correct and if it's not what options we have well then it's a user correct so

we go here with person and then log in and also invoke it again a very fancy name type iate effectively just remember the is keyword and remember the fact that not only we're trying to check for a specific type but we're also helping typescript to narrow down That type okay and before we move on to the next topic I also quickly want to show you one gotcha and this involves type never now technically this video is optional if you're not interested you can just move on to the next video but I simply want to showcase

that if we hardcode the person to be a specific type typescript is going to yell at us so in here yes we are setting up that person randomly correct so we have our random person and Pretty much depending on the value well we either return a student or a user now if I set up my person differently let's say if I comment this one out again I'm going to go with person I'll say that this type is actually a person and then I'll hard code so I'll say name is equal to Anna and then since

I'm creating a student I'm going to set up my study method so I'll come up with my function and I believe it doesn't return anything so I'll just go with log and study dot Do dot okay let me fix the typos and all that so now I have this person but I'm hardcoding this is not any more random notice TPT essentially right away yells at me says well there's no way this person can be a user the other type why well because you hardcoded to be a student so yeah I can still check whether the

person is student so type pred code still works but in the lse block you'll notice that person is Never and this brings me back to the point that I was making in the type never video essentially if you have the scenario where type is equal to never you'll just have to go back to the initial place where you're setting up the variable and also start checking your conditions because effectively in here typescript just says Hey listen there's no way that person can be a type user because you hardcoded to be a type Student now what's

interesting if I change this around to a login now the person is actually a user correct so now I'm hardcoding to be a user so I have my type predic cut I check in my condition it's not the case and now we can successfully get to else but if I hardcode my person to be a student then there's no way for me to get to this pulse block hopefully it's clear and now we can move on to the next topic all right and up next let's Discuss discriminated unions and also let's recall how we can

set up the exhausting check using type never now again I I know that the name discriminated Union most likely sounds pretty scary but essentially it's just going to be a property which has a literal value now as far as the star code this is what we have over here so we have two types one is going to be increment action second one will be decrement action both of Them taking the number the amount time stamp which is going to be a number again this is totally random and the same goes for user string this is

totally random and then we have a type by the name of action where I use the union type and I just use both of these types here so either it's going to be increment or decrement and then I will set up a reducer function which is looking for two things it's looking for the state so again this is just going to Be some random number and also the action so what do we want to do do we want to increase the number or we want to decrease so let's start setting up and in a process

you'll see why we need the fancy discriminated unions which again is just a property with a string value so for S let's go here with new state and you know what I haven't set up the functions so maybe let's start with this one so we have a function looking for state which will be A number so some kind of hardcoded number and then also the action so whether we want to increase or decrease and by how much this is the amount over here so if we want to increase then byy this amount and the same

goes for decrease now I'm not going to set up again anything as far as the functionality I simply we want to go with reducer that's the function and of course I forgot to add the name over Here my bad so we're looking for reducer then as far as the initial value again we're just hardcoding something random so I'm going to go here with 15 and then when it comes to action well now I'm going to pass in the object so either it's going to be increment or decrement and in this case I'm going to hard

code that user value will be John we don't have the type yet so let's just go here with amount of five and then time stamp well let's set up 1 2 3 4 5 Six or something along those lines and now let's discuss why do we need the discriminated unions in the first place well we have two types and how are we going to check for specific type I mean we canot use type off we cannot use in we cannot use I mean instance off or any of the things that we covered previously why well

because pretty much they're the same correct now they do have different meaning one is going to increase this State over here and the other one is going to decrease but in the reducer how I'm going to check for that action this is where the discriminated unions come into play where we'll have this unique literal value how is that going to look like we'll navigate back to increment action and yes effectively you'll just add here whatever property name you want in my case it's going to be a type and it's going to be equal to increment

and now We want to do the same thing for decrement so instead of increment we want to go with decrement so now in the reducer we want to set up a switch statement where we're going to check for the type if it's increment then we'll increase if decrement then we decrease and also let's just recap how we can set up our default case with the help of type never now typescript is complaining because I'm not providing a typ over here so we do need to go with One of them in this case I'm just going

to going to go with the increment again it doesn't really matter since our main focus is on this logic here in the reducer so first let's set up the switch one and we're going to be looking for Action type that's the property we're interested because it's Unique to each type over here and again if we have 10 types yeah we'll pretty much have to set up the type for all of them and provide that unique value then We want to go with case and this case I'm going to go with increment and as far as

what do I want to return from the function well let's go with number so we're going to go with that initial value basically a state and we'll add action Dot and the amount that I'm passing in now we want to do the same thing for the decrement correct so let's just change it around and again let's just recall the issue with the setup if we add some other type to this action Well it's going to fail silently correct and therefore we want to set up the default case and we want to assign the action to

some variable which is type never because in that case if there's some other type over here it will immediately be assigned to that variable and we cannot assign to type never so let's just go over here say default that's going to be our default case let's also throw I guess quite typical scenario so throw new error and Then I'm going to set up the template string and in here essentially let's set up unexpected for some reason this is the biggest challenge as far as the spelling unexpected action over here type will be equal to never

and we'll assign it to an action so if actually action is never if we have handled all the possible cases we're good to go but if there's going to be some additional case and we're not handling right away typescript is going To yell and in here let's just type unexpected action and then let's access the unexpected action again the point really here is not to run the code I mean we're mostly focusing just on the logic over here in the redu sh so this is how we can set up the discriminated unions and exhaustive check

using the never type in typescript okay and we have successfully arrived at the most complex and confusing Topic in typescript which is none other than the Generics in short generics allow us to write for example functions with any data type and you can think of generics as a variable for types now I'm not going to Sugar Cod it it's not an easy topic the good news is though that most likely in the beginning at least based on my experience you'll primarily use generic functions or interfaces created by somebody else whether it be the creators of

typescript or developers of some Third party library and in that case you'll only need to remember one concept every time you see those funny looking angle brackets think generics and let's begin by taking a closer look at the arrays in typescript so at this point in tutorial we should be already familiar with this syntax so we have three variables the values are arrays and here we just say well what is the type for the array and as we're looking at this code and we're just focusing on Typescript so please don't tell me that the answer

here is the keyword let as you're looking at this code what is the one thing that doesn't change so what is the one thing that stays the same and it's kind of pretty obvious but I do want to start from this point and the answer is following notice how the type is changing here all the time but we're always always getting this array now of course we can make this complex we can provide our own type We can provide the union type whatever that doesn't change the main idea we're always always getting back this array

and not only that we can pretty much pass here whatever we want as far as the type correct so it still needs to make sense as far as type and we'll always get back the array so it's not like I need to go somewhere and look for string array no I don't have such type I literally just have this one universal one that I can use because if you think About it how difficult it would be that not only we need to remember but also to construct such types let's say we'll need to have one

numbers array type then one Boolean one and I can go on and on and on and on and actually we can examine what type are we getting back over here so let me remove this silly text and now let me right click then we want to go to type definitions and yes I know we haven't covered the Declarations yet don't worry All of that is coming up and you know what I'll actually pick the third one because it's going to be easier for me to show you so let's go here to type definition and then

we're looking for this declaration one so we're looking for lib es5 D DS again we haven't covered them how we have access to them and all that all of that is coming up for now but just focus on this code so notice we have this interface again something we should be already familiar With remember we use it to provide shape of an object the name here is an array and check it out we have the funny looking angle brackets and inside of it we have this T now right away I want to mention T is

convention you can call this shake and bake you will see that in a second once we set up our own generic interface or function or whatever basically this represents the notion that this type can be anything so I can pass here the String number Boolean my own type you name it and every time not only I'm going to get back the array with that specific type I'll also get all of the properties and methods that we know already exist on array so what am I talking about well we know that length is part of the

array correct we can just call array. length and we're good to go so notice we have over here this method so we can definitely use it and then let's keep on moving and we'll see again All of the functions we already familiar with but here's the kicker for example pop now if you're not familiar this essentially is a function which removes the last element from the array and returns it but now notice what is the return here specified for the pop it's not string number or Boolean or your own no it's basically this D it's

basically this generic so whatever I pass in whatever array I construct well I want to remove that Last type correct I'm not saying hey this is the array of strings and now I need to call specific method to remove the string no basically whatever type we use to set up that array well that's the same type we remove and notice how essentially we're saving bunch of the code because imagine if you would have to set up such interface pretty much for any type that we can pass in the array I mean you Would go most

likely insane so that's why we use this variable where we say okay you can pass in any type and it's going to get treated the same way we'll create the array the same way we can you call the methods the same way so so none of that changes so whatever type we pass in well that's the type we're going to use to operate so hopefully again this is clear that it definitely makes sense in a lot of instances to set up the generic one because you don't want to Set up essentially the interface for every

possible type that you can pass intoa and now knowing this we can actually take a look at the second approach we have to construct the arrays now I can tell you right away that just because we know the generics you won't have to use the syntax so you can still use this I would say more userfriendly syntax but I do want to showcase that since this interface is an array we also have this option so now let me comment I Guess these ones out you know what let let me start everything from scratch so I

want to go here with let and again I'm going to call this array one and and then as far as the type sorry I'm not going to go with string I will go with array and then let's pass in the string and now as far as the result well that one is actually exactly the same so I'm just saying yeah it's going to be an array of strings and Again this doesn't change the only thing that's going to change the type that we're passing in so if we pass in the string and of course course

we'll get back array of strings as well as all the methods that we can call so if I call the pop on this one on array one guess what it's going to remove the last item and the type is going to be string and of course we can repeat the same for number and bullion and with this in place now we can move On to the next topic all right and once we're familiar with the main Concepts let's construct our own let's start easy let's just go with the function as well as the interface so

here's the goal we want to create a function which is going to take any type and return the same type so one approach could be following we can go with function then let me go with create string as far as the argument I'm going to call this string basically I'll give It a type string it returns a string and then from the function we return the argument now everything is awesome but we pretty much need to return the same function for any type so we need to create one for the number for Boolean and rest

of them now I'm not going to create function for all of the types but you know what let me just Showcase with a number so let's say if from this function we want to return a number this is what we'll need to do And as you can see this gets annoying pretty fast correct and we only have two types so this is what I was mentioning in the previous video imagine that array interface if it's not a generic that pretty much you'll need to copy and paste and everywhere where you have a string you'll have

to change it to number and Boolean and then rest of the types so what's the solution well this is where we use the generic I will leave this one for your Reference or you know what actually you have it going read me my bad let's start from the scratch I think it's going to be better we're going to go with function then let's call this something generic and I think generic function is good enough and we will set up the parameter we will set up the logic now I want to set up the variable for

my type so instead of hard coding instead of number and string I'll say it Can be any type and both my argument as well as what I'm returning are going to be that type so we go here with this angle bracket like I said you can call this shake and bake just make sure you use the same name and again the convention is just to go with d which stands for type so we go here with t then we say that yeah argument is actually going to be this type so I'm not going to say

that it's a string number whatever no whatever type we have Over here and as far as the return will also go with the T this is what I'm returning from this function and now we just need to set up the logic where we return the argument so now we can go here and set up some string value set it equal to generic function then since I'm creating a string value this is the type I want to pass in and then I just want to provide a string let's save this and now I can do the

same thing for the number so instead of string we're Going to go with number and instead of type string will set up the number now it does need to make sense as far as the argument so it's not like I'll randomly pass in the string as you can see typescript is complaining and we set up over here the number so now we can use this function with any type even the ones that we set up ourselves so this is not limited anymore to one specific type this right now is generic function where we can pass

in any type and we'll get Back the same type and while we're on topic let's also take a look at the interface so I'm going to go with interface and let me right away call this generic interface same deal if we want to set up a generic one we already know that we need to go with angle brackets let me stick with convention with the T and then there's going to be a value property the type will be whatever we're setting up over here SD that's why they Need to match and let's also set up

the get value function which is not going to take any parameters but it will return the same type and now let's create a new instance I'm going to call this generic string which is somewhat funny but let's just stick with that one since I have that in a read me so we're going to go with generic string we go here with generic interface we say that yep as far as the type it's actually going to be a string And now inside of our instance of course we need to follow the same rules so the value

I'm going to be setting up has to be a string so we'll go here with hello world and then as far as get value one well let's just return this do value return this do value let's save it and once I save I have right now the string instance from my generic interface so this is how we can construct our own generic functions as well as generic interfaces all right and before we start Working on the more complex examples I do you want to showcase something most likely as you're looking at these first few examples

you're like I mean this is ridiculous what is the actual need for such functions I mean I do understand yeah there's angle brackets yeah I can use this T and it's going to work with any type but in reality this is just silly okay hold that thought and let's just set up a a sync function and remember in JavaScript What do async functions return they return a promise so let's go here with async call this function I'm going to go with some funk for now let's not worry about the return or you know what no

let's set it equal to a string do definitely want to showcase something so we right away have the error this is something we're going to deal with for now let's just return and hello world so technically it's kind of correct we're return a string so what is typescript Complaining well again same functions return what they return a promise so now let's do the same thing like we did with the arrays let's look at the type that we're getting back and hopefully in the process you'll see that even though this might look somewhat silly essentially this

is the foundation that you'll see over and over and over in document ation so if I'm going to go here with result and some funk and we take a look At the result I mean it says that it's a string but we clearly have this issue over here and notice now we have this the return type of a sync function or method must be the global promise again funny looking angle bracket type did you mean to write promise and hm interesting we actually have the generic again so you know what let me remove the return

type for now I'll rely on typescript to infer a type and now let's click on the result and type Definition and same deal noce we have over here this interface the name is promise and again it's a generic and yes it has a little bit more code but not just the general idea effectively we just get back this promise and in there we have the type so the point is that every time we have this async function we do need to set up promise as a return type and we just need to remember that it's

a generic so instead of typing string like I was Doing before we just go with okay we're returning a promise but since it's a generic we need to specify the type in the angle brackets so again the main point is that yes I know that this might look silly but keep in mind that this is going to be the foundation that you see in documentation as silly as it looks it actually handles all of the cases that we're interested because in here I can return whichever type I need in that particular instance and I simply

just Need to provide the value over here in the angle bracket so let's say if I'm going to go with 234 or whatever number then is going to complain so now I just need to go over here and say yeah I will return a promise because it's a sync function but the type in this case is going to be a number so yes even though our first two examples might look super silly they use the same concept that you're going to see later in declaration files And with this in place now we can move on

to the next topic all right and once we are familiar with the fundamentals of generics let's work on a tiny challenge where we want to set up a function in my case I'm going to call this create array which takes in two things it takes the number length so that just controls the length of the array so if I pass here three then I'm going to have three items if I have pass here 15 then obviously it's going to be 15 and then the second Thing is going to be the actual value so if I

pass in the string then I should be getting back the array of strings if it's going to be number then it's going to be an array of numbers and hopefully you see where I'm going with this and I guess let's start Again by hardcoding hopefully in the process we'll see why we want to use generics but first let's create a function I'm going to go with Generate string array like I said we're looking for two things length is going to be the length of an array and also well what is the actual value and as

far as the type I'm going to go with string now from this function since I'm taking in the string type I want to return a string and array now when it comes to logic I want to create the result variable this will actually be string and array and for now it's just going to be empty array but yes we're going to Store over here the strings okay good then let's assign result to array so again we can use our object in there first we want to pass in the length so how long is going to

be the array how many items we're going to have over there and then let's just call the fill method so pretty straightforward whatever value we pass over here we'll add to our result so we'll call fill and we'll pass in the value and then from this function since I want to get the Array of strings let's just go the return and result let's save it and again everything is awesome but I need also the same array for numbers booleans or any other type so now we just need to make this function generic or you know

what let me just quickly showus that the code actually works so generate string array how many items I don't know let's go with six because I have the example of three so you probably don't believe me let me go over here and notice Everything works so I get back my array it's typ string and I have six items okay beautiful so now how we can make this function generic and again most of the logic is actually going to be the same the only difference everywhere where we have the string we just want to convert it

to a generic we want to convert it to that variable and as a result we'll be able to pass pretty much any type so let me copy and paste instead of Generate string array we'll just call this create array create array length stays the same but this one actually is going to be equal to at and now we want to set up that angle bracket so again we set up this variable for a type and we pass here DT so now everywhere where we want to reference the type we'll use the T instead so here

instead of string instead of hardcoding that we'll go with array and pass in the T then instead of strings we're going to say that yeah the Result is going to be just an empty array of this specific type this doesn't change this doesn't change now we just want to invoke it and we'll do the same thing like in the read me we're going to go with strings then create array we want to provide string over here here and far as the value let's go 10 the more the better I guess let's copy and paste and

let's call this numbers so Numbers this will be a number uh let's go with 15 and as far as the value I'm going to go with 100 so now we just want to log both of these values array of numbers and strings strings let me move this one up just because don't ask me why and if everything is correct this is the result we should see in the console so this is how we can create a function which takes any type and returns an array with Specific length of that particular type all right and up

next let's see how we can set up multiple variable types and in my case I'm going to use the function example so we want to set up a function called pair which takes in two parameters however the type is not going to be the same and then from the function we just return both of those parameters but again we need to return the same types so let's go here with function again the name will be pair we Start with our good old T so we already know that one but if we have multiple variables like

this we just add a comma and then provide the value again it's a convention to go with du and then if you have more parameters just follow the logic over here but you can name them of course differently as well then we're going to set up our param I guess one so this one will be equal to T and and then param 2 is going to be equal to U like I said from this function I want to return An array and I want to keep the same types so this will be equal to D

and U and let's just set up the logic where we have Pam one comma and then Pam 2 so now let's invoke it and if everything is correct we should get the correct result so we're going to go with the result that one is equal to pair and then I'm going to go with number and a string let's go with one two three and hello and check it out typescript is not Complaining so if you have more variable types add a comma and then the common approach is to go with you and then rest of

the letters that follow you if you have more parameters or you can come up with your own names just make sure you use the same name in the parameters as well as the function logic and up next let me quickly show you that t script can still infer the type even if we don't provide the types here in the angle brackets but just like before we Need to be careful yes if you're expecting to get back the number and a string everything is awesome but if by mistake you pass in some other type it's not

like typescript can magically figure this out so therefore if you don't pass in the types You're Expecting just make sure that you pass in the correct values hopefully that is clear and as aen this is something that we're going to see later when we start working with react where use State hook actually is a Generic which again if we think about it kind of makes sense right I mean we can pass in string into use state same how we can pass in the array so this used State hook needs to accept whatever value we pass

in whether that is a string number all the way to array of objects and essentially since it's a generic we can technically bypass the angle brackets so let's say if it's a String I just let typescript to infer that yes for sure it's going to be a string since I'm passing in the empty string but for example when we're going to be setting up the Rays typescript is going to complain and at that point we'll need to specifically let typescript know hey is it going to be an array of strings numbers and in this case

I'm just coming up with some fake product type so hopefully that is clear yes typescript can still infer the type Just be mindful when you use such a pro approach and also I want to show you how we can set up the constraint on a type essentially I can limit the type options I can pass in so let's imagine this I have a function of process value function process value and in here I have my generic T but I only want to limit this to a string so the keyword we're looking for is extends and

then in here we pass in the specific type now in The following video I'll show you a different example so don't think we can only use it here with primitive types but let's just start nice and easy so we're going to go over here with the string then we want to set up a parameter again I'm going to say that it's equal to at and you know what let's say that we're also going to return it so in here let's log it let's say value and let's also return the value let me save it let

me call Process value now in This case I'm just going to infert the type and I'm going to say hello and as you're looking at it you're like well I mean at this point we can simply set up a function without the generic correct so I can simply say that yeah I'm going to be passing in the string and I'm expecting a string back and you're 100% correct so with this particular example I mean there is no real benefit of setting up the type and then extending it only down to a string but again it

is A option and in a following video you'll see a more complex example where actually it definitely makes sense now we can also use the union type so effectively I can go with string or number and at this point if I call in process value I'm able to pass in the number as well so for example I can go with 12 now if I'm going to go with process value and then pass in I don't know true then of course typescript is going to complain because we can only Pass in string or number in this

generic function and once we're familiar with the extends keyword now let's see a more complex example where we have our own types so let's imagine the scenario where I have type car two properties branded model both of them strings then I create the instance same with product only in this case the properties are name and price and I have string and number again I create the instance and the same with students so the properties Is the same the first one name it's a string but then the second one is age and in here I want

to come up with a function I guess I'm going to go with print name because why not where I just want to access the name prop property so let's go with our function print name then let's provide the type the generic in this case we're going to say that input is also going to be D and we're not going to return it so I'm going to go with void now even if we just try to Conso log input that name typescript is going to complain why because it has no guarantee that there will be that

name properly so in this scenario we're not going to extend to a string we actually need to look for the types which have that name property correct and in our case we can either go with the student or with the product we just set up over here extends and we go with student so just like before with string number Boolean or whatever we can use our own Types as well so now if I go and invoke the print name in here and if I'm going to pass in the student everything is going to work now

it's going to fail if I pass in the product even though it has the name correct let's try it out so I'm going to copy and paste and once we invoke the not print name print name sorry we're looking for a product of course typescript is going to complain because the type is product in this case so yes we can still use over here the Union type and passing the product but there's actually a better way because if we think about it what are we going to do now we'll look for all of the types

where we have the name and then essentially just use the union type and add it to extend I mean technically it's an option but like I mentioned there's actually a better way and that better way is that we can set up an object we can set which property we're looking for and then we can pass here in the extends Now we can set it up as a separate variable or we can pass here directly so instead of passing in my student or product types I can simply set up an object and I can say Hey

listen I'm looking for name property and it has to be a string so now that script is smart where it says okay so student yeah it does have a name so everything is going to be fine same with the product but if I'm going to try to call it with a car it's not going to work because there is No such property so if I pass in this instance notice entually it complains that the name property is missing in the car so this is an interesting way how we can use extends not only with a

primitive type or our own custom type but also we can simply narrow down to the shape that we are expecting okay and at the very end of generics let me show you how to set up default type just please keep in mind that it's not going to be super useful in our examples since We're hardcoding all of our data anyway basically they're going to be far more useful when we don't know what is going to be the shape of our data so let's imagine we have interface it's going to be a generic and I'm going

to call this store data I'm going to say that I'm expecting T and then inside of it there's going to be a data and it's going to be equal to an array of types so whatever we pass over here then let's set up store numbers so Store numbers and first let's set up the type so we go with store data then number and then we set it equal to data and in here since I want to store numbers I'm just going to go with one two three and four okay so this works but what if

let's say I have some random stuff what if I don't know what I'm going to have in the array well let's try it out so we're going to go with random stuff set it equal to store data for now we're not going to pass Anything in we're going to go with data and then we'll set up some random stuff so I'm going to go with my string over here as well as the number now store data is expecting the type so at the moment essentially we have two options either we set up over here the

default one then we won't get the error over here or since let's say I not sure what data I'm expecting back technically I can hardcode here any I can say yeah I mean I'm not sure what values I'm going To have in this array so I'm just going to go with type any now if we want to bypass this essentially passing in any if we don't know what data we're expecting we can simply set D equal to any or any other default type as a side note you can go here for example with string or

whatever is just somewhat common to see and as default type and in that case we don't need to even provide it so if I don't provide the type then right away Typescript is going to use any as my default one again kind of hard to see over here because we can clearly see basically what we have in Array but just to Showcase that I'm not making this up let me grab the example from the readme so if you're interested that you can also copy and paste now there might be some errors since I don't have

those values over here don't worry about it too much I just mainly want to showcase some Stuff most likely you're familiar with the library called axios which is super popular to make HTTP requests and normally the syntax is following where we go with AOS then the method Now by default it's get but in here I hardcoded get as well and we pass it the URL and the data is located in the object in data property now if we take a look at their documentation we can actually see that get is a generic what does that

mean Well it's looking for the type but if it's not passed in over here it uses any so if let's say you just called axios doget it's going to set data as any so whatever we're getting back and we can actually see that if we continue inspecting the documentation notice there's also a second one which is r and that one by default is equal to aio's response and it uses the type we pass in so essentially this is another generic interface which is used as a second type Over here and essentially it uses the T

that we pass in now if we take a look at the axio response in our generic one we can see that we're getting back this data and this is set equal to T but again the default value is any so for example if we don't provide any info on a type it's going to be equal to any because that's the default as we can see it's used over here it's passed down to AIO response and the same deal in in the interface Now if we set up the angle brackets and specifically say that Hey listen

I'm fetching this data but I know that structure is going to be following I'm going to get back the array of object and in there I'm going to have name which is going to be a string in that case this data will have this shape so if we provide essentially a shape that we're expecting then the Ste becomes that shape and goes all the way down to data Now if not then they use the default parameter and essentially set equal to any now I know it's a lot of code in here a lot of angle

brackets and that but hopefully it's clear now we can nicely use type any if we don't know what shape we're getting back because again think about it this is an HTTP request so the shape can literally be anything and therefore the default one is any and then if we provide specific shape well that's the shape we're going To have here in this data property okay and while we're still on a topic of HTTP let's also see how we can fetch data with typescript now normally I use axos library with react query simply because the setup

is super straightforward and react query is really good at inferring the types but let's start nice and easy and cover up the straightup pitch API first and also keep in mind that in this example we'll just log the result so we won't set any state or display pretty Much anything in a browser we'll just check for correct results in developer tools all of that is coming up just be patient and wait for the react part of the course now also you will need the URL so in the read me I provided a URL back to

my server where we can just fetch some random tours we were using this one in my react course basically build one of the projects so this is totally up to you if you want to use this URL feel free to do So if not if you have some other URL you you can of course use that as well and for now we'll just simply set up a fetch function we will log the result we'll see the issue if we don't have any type and then in the following video we'll have a challenge where you'll have

to set up the type and proper returns and all that cool stuff so for now let me just grab I guess the URL so we're looking for this one over here and we want to come up with a function so in my Case I'm going to go with sync function let's call this fetch data it's going to be looking for URL it will be a string over here for now no returns we just want to set up the TR catch since we have a sync operation it's always a good start now in here let's go

with response so this one will be equal to a weight fetch we pass in the URL so notice how we can right away start using Fetch and actually we'll cover that in I believe two three videos how come we Have access to this function without any issues and typescript doesn't complain and fetch has this interesting setup where it doesn't treat for example 404 errors as errors it only treats the network errors as errors basically if you'll have 404 over here it's not going to come up in the catch block so we will do a manual

check where else say if response. okay is not set well then I'll throw my own error again this is just an extra Check we need to do with fetch for example you don't need to do that with axio so go row new error then let's set up the template string we go with HTTP error and the status here let's go with status and we're going to set it equal to a variable let me access that we're going to go response that status so now we're checking even if we'll have 404 error it will actually trigger

the error and we will return whatever we have in catch Block and now let's access the data again we're looking for the array of objects that's what we have here and you can definitely see that if you navigate to this URL in the browser and we want to set up another await let's go with the response and Json let's invoke that and at the very end of the tri block let's go with return data now in the catch block let's right away construct the message so I'm going to go with error message and this One

will be equal to ter operator where I'll check if the error is instance of error well then I'll will set the error message variable equal to error. message since I know that the property is going to be there if not then I'll just go with something generic there was an error so let's set this one up and then let's log just so we can see what's happening we're going to go with error message here and then at the very end of the catch block we want to return empty Array so if we're not able to

get all of the tours will return MTR now I guess for now let's just log what we have in the data and let's invoke the fetch data fetch data let's pass in the URL if everything is correct in the console we should see this array of objects and if I go over here and mess with the URL since I have this check over here now the response is not going to be okay and I can clearly see that over here so we're nicely throwing The error as well and this is going to be my error

message so this works now where is the issue well let's go over here set the tours away to TS so now I'm essentially assigning this to some kind of variable and notice something interesting what is the type well it's any because typescript doesn't know what I'm getting back so so yeah I was able to fetch data I have access to it I have no issues but this is equal to type any now why is that such an issue well let's Try doing this let's go towards map we know that we're iterating over correct our array

and we should have access to each and every object over there but if I type tour check it out typescript immediately complains says okay I have no info on this this is type any so how am I supposed to know what is this tour so we're not getting any suggestions we're not getting Auto completions anything like that so yeah I can set this equal to tour and and Then go with tour. name but I mean this is not going to be sustainable in the long run so yeah I can nicely see everything in browser's console

but since we're working with typescript we will have to figure out how to provide the shape of our data to typescript so typescript knows that Hey listen this tours is going to be an array of Tours where I have following properties so I have ID name info and rest of them and this is something that we're going to do In the next video as a challenge all right and once we see the issue now let's fix it how well we're working with typescript so we need to provide the shape and set up the correct return

type for our fetch data and once we do that typescript is going to know what we have there and then we'll have Auto completion suggestions and all that cool stuff so here's the challenge set up to type a hint you can use the URL as your reference and also Set up a proper return type for the fetch data again hint remember that it's a promise correct because it's a sync so first let me navigate to the browser and I can see that essentially each and every object is going to have ID name info image and

price and guess what it's pretty straightforward all of them are strings so now I just want to navigate back to tutorial somewhere over here set up my type I'm going to go with type and name Is up to you in my case I'm going to go with tool ID is going to be equal to string then I have the same for name info image and price so you know what let me just copy and paste hopefully it's going to be faster in the long run so we have info here then we have image and at

the end we also have the price let's save this and there's two places where we want to set up this type so first we want to set it here where we Have the return and I'm also going to set it over here where I have the data so I'm going to say that I'm expecting from this. Json back my array and it's going to be an array of Tours and the same over here for my fetch data I'm going to go with my return and remember this is a sync correct so what do we need

to pass in a promise promis is what it's a generic so we go over here with tour and then we pass here the array as well now don't worry if it's empty it's Still technically going to match whatever we have in our return and now we don't want to set this as any of course we can actually go back and we'll nicely see that this is a tour why is that super beneficial because check it out if I'm going to go here with log and tour dot notice I have all of these properties right away

avail ailable I can go with name save it again the result in the browser is not going to change but essentially this is just a Type Safe Way how we can fetch data where we come up with the type we set up proper return and after that can start using this data in a type Safe Way in our project all right and the moment we feel good about ourselves that we have nicely provided the type and Everything is Awesome we can start using in our project let me throw you a m grenade so what do

you think is going to happen if I'm going to remove some Properties or I'm going to add some extra ones so Let's say if I'm going to go with something and then I'm going to set it equal to a bullion what do you think is going to happen you think I'll have access to it you think typescript is going to complain and I guess you can clearly see that typescript is is not complaining and actually if I go over here technically I can even select it but what is the result I'm getting back undefined so

here's the kicker yes this is definitely something We want to do we do want to provide a correct shape to the typescript but there's no way for typescript to check this at runtime so yes this is super useful for us to later use in our code you saw previously what happens if we don't do that then basically typescript thinks it's any but also just because we set up this type over here at build time it doesn't 100% guarantee that at run time we'll get the correct results because This is just build time in here we're

saying yeah this is going to be my shape so I can type here whatever I want and typescript is going to be like Hey listen you told me that this promise is going to return the array of Tours and this is going to be the shape for the tour but what if the something is actually not there I mean there's no way for typescript to check that and therefore in the following video we'll take a look How we can do the runtime checks with the help of extra Library by the name of Zod okay and

up next let's see how we can validate data at runtime first off let me just mention that technically you can do it manually so in this case yes we can iterate over data check if the specific property exists as well as has the proper type and even though it sounds super cute in reality it can get messy pretty fast so instead if you ever need To validate data in such a way Zod library is a very valid Choice simply because it provides bunch of options out of the box and it's far better battle tested than

our own validation code now you can use Zod in other scenarios as well for example in my nextjs course we use Zod to validate form submissions on the client as well as server actions on the server if you interested in learning more about Zod just visit Zod Dev or you can follow the link I left in the read Me first thing we'll need to do is install the library so I'm going to open up the terminal now I'm going to open a new window technically you don't have to just make sure if you stop the

server to start it up again otherwise stuff is not going to work so in this window I simply want to run npm install and S so now we install this library and as a side note in few videos we're going to talk about declaration files so There's another reason why I'm installing this Library so we install Library okay everything's beautiful I can close this window there's really no need then we want to import Z from Zod and essentially it's a named import and then we want to construct our schema so let's set this one up

and you know what I can just type it scratch I guess so let me go over here let me go with import then Z from and I'm looking for my Zod Library again if we have Successfully installed should be somewhere over here notice I have dependency and there I have the Zod one so we import the e z and then we want to construct our schema so this is very similar to what we have over here this is going to be shape of our data but difference well we'll use Zod methods and this is going

to be checked at run time so I'm going to come up with t schema and as a side note eventually we'll set this equal to a different Value but not for now so in here we want to go with z and then the object is the method we're looking for so I'm pretty much saying that I'm constructing an object and here yes we pretty much want to provide the same properties and and as a side note I think I can remove this something here and this one here as well for now we'll figure out what

we're going to do there in a second and yes we want to set up the validation for the same property so this is not going to Change however in this case Zod provides bunch of methods now again I'm not going to go through each and every method in this case we simply want to check whether this is going to be a string and this is super easy I can go with ID and then Z Dot and then string so this method essentially is going to check is it a string or not and if it's not

a string if it's not present then basically it's going to yell so now let's copy and paste and we simply want To provide different values so we're looking here for name then we want to get the info we also want to set up an image over here so image um lastly we also have the price so all of them are strings but the comms are missing over here that's why I have the errors so let me set this one up and then as far as the tour we can actually infer the type so I'm not

going to leave this for your reference since you have Access to it in a read me but essentially I can go with type door and instead of hard coding Zar has this method of infer and it is actually a generic and we should be familiar with this one so notice the syntax effectively we just go over here with these angle brackets and then inside of the angle brackets as far as the type we go type off and then tour schema so now we infer this T type and notice pretty much the result is the same

but now We're nicely getting this from Tor schema and like I said you have more options for example ID has to be a string but I can also add min max and all kinds of methods again this is just scratching the surface and notice how we don't need to change anything here in return we're also here in a data but we do want to right now add some checks at runtime and in order to do that I'm going to rename this to Raw data so this this is not Something we're going to be passing and

instead we want to go with const result is equal to then we go with our schema it has an awesome method of array which we can invoke we're not going to pass anything in and we also have this safe pars so essentially safe pars is not going to trigger automatically the catch block we'll do it ourselves so we're going to go save Parts with we pass in our raw data so now we're going to check this at runtime Actually not only at build time and then since we have a safe part since this is not

going to trigger immediate error we want to check for the success property in the result so if essentially we don't have the success property over there then we'll go throw new error and let's again and come up with some message let's go with invalid data for example let's access the result Dot and we're looking for the error so if we're not able to parse then we'll throw The error manually and now where we have the return instead of data which we don't have anymore we're going to go with result. data so that's where our data

is going to be located and again if we're successful this doesn't change still getting back that array but difference will actually check everything at runtime so now let me navigate to the browser I don't believe I'm doing anything so you know what let me just log the results just so you can See what we're getting back let's go with the result notice we're successful so success is true so we bypass that error one and then we get back the data over here so now I can navigate to my map one and again I have access

to the door so let's log something let's go with door Dot and again let's access the name so this works now here's the biggest difference if I'm going to go over here and let's say add a property which I'm expecting but it's not there Will actually get the error so if I'm going to go with something and set it equal to whatever number it doesn't really matter if I go over here notice how immediately this is going to trigger the error so success is equal to false and now I have this error message in the

console and again the cool thing is that we're checking this at runtime not just at build time okay and I think at this point we're ready to talk about typescript declaration files and why They're so important and let's start with a small recap if I were to go to tutorial and you know what no let me create a file first so I want to create types DS on here I'll write away export and I'm going to go with export type and random and here let's just go with name and string if I were to import

this so import I mean with the type keyword or without everything is going to work correct pick because typescript knows Everything about this type random so I can start right away using it in our project so far so good but can you explain to me this how come I right away have access to the document object so if I type over here press dot have access to all of the methods and all of the properties and of course I'm not going to double check that so I'm not going to prove that it's definitely a document

object but trust me the same one and again good luck trying to build Something without this document object so how come we have access to it because I can guarantee you that I didn't set it up anywhere it's not like I went to the types and then started constructing the document type I mean that would be just a work for I'm not sure half a year so what's happening over here well you see when we work with typescript there's something called declaration files and the same is going to work for libraries something we're going to

cover in a Second but when it comes to typescript they get included and then essentially as we're working with typescript it already knows everything about the document so if we go here to a type definition there is a definition for this document like I said it's going to be giant but good luck working without the document so in here there's an info about every property every method what it's doing What um parameters the function is expecting and that sort of thing so in here technically there is no functionality that's going to be running in this

file but there's going to be type definitions since when we work with typescript typescript needs to know everything about the shape of our data otherwise as you saw with the straight up JavaScript file it's just going to complain so I guess first I'll show you Where the Declaration files are located and then I'll show you how we can add them or remove them from the project now as a side note since we're using the boilerplate V application it's already done for us but yes if you're starting everything from scratch you can add those things manually

ually Stars if we navigate to a node modules and typescript which is a package we're using under the lib notice This long list well these are declaration files again once you navigate over here let me just find something uh maybe this one over here right notice you have these type definitions it's not like in here you have some kind of function that's running no but you have clear description of type definitions so so again if you want to start using something from the Dom you can only do it if there's a type Definition for that

something in one of the files again you'll see in a second if let's say we don't have access to these files typescript is not going to know what is a document or any other web apis and the way we control that let me just close the node modules again it's already set up for us but you can do it over here in this lib notice this Dum essentially in the lib you specify the set of bundle Library declaration files that Describe the target runtime environment and notice over here this D well if we remove it

notice something interesting immediately typescript is going to complain immediately typescript is going to say Hey listen what document I don't know what you're talking about so essentially we can either set it up ourselves or we need to have those type definitions without those type definitions we won't be able to essentially successfully build our Project so let me just close this one and navigate back to TS config let me add the Dom since I do want to use it since we're building for the web and this leads me to the second Point yes the same works

with any Library you want to use in our project remember how in previous video we were able to import Zod from the Zod library and we were good to go so notice how again typescript is not complaining and in fact typescript knows Everything that there is to know about the import it knows the types it contains it knows the methods properties and all that how well let's check it out again we're navigating to node modules I want to close this one we are looking for a Zod in this case and under the lib guess what

again we have the type declaration files and in there we have type definition and therefore once we start using the library typescript has no issues it Right away knows what the method is expecting what is the interface and all that that which leads me to another Point yes if you're going to install Library which doesn't have the Declaration files basically there are no type definitions you won't be able to use it now the good news that there is a repo which essentially contains the types for a bunch of libraries but first let me show you

what happens if we install such Library uh What is the result and again this is just random example I'm going to use bcrypt j s which is a password hashing library and technically this is optional I mean you don't have to follow along I just want to showcase something so let me go to a separate terminal window let me install it okay I installed the package clearly see that it's in my dependencies okay good let me remove all of this I'm going to go with import bcrypt Js from and definitely have the Library but check

it out so essentially typescript is complaining there is no declaration file so same issue like we had with the straightup Javascript file and like I mentioned before the solution is following there is a repo which contains bunch of types and I left the link in read me so let me try to navigate over here and in this repo under the types you'll be able to most likely find the library you just installed because it contains like What 7,802 entries so essentially you have typescript types for all of these libraries and the one that we're looking

for in this case is bcrypt JS otherwise we cannot use it in a project and the way we install the types is following so we go with npm install we're going to go with save dev then at type and then bcrypt JS so our specific Library let me grab this line of code and the moment we do that typescript is going to know everything That there is to know about this bpjs so if I'm going to go over here type dot notice I have access to all of the methods the import provides hopefully it's clear

why typescript declaration files are so important when we're building the typescript project and with this in place we can move on to the next topic okay and up next let's cover typescript config file where as the name already suggests we can configure our typescript setup now if I'm being Totally honest I actually find this topic super boring and therefore I'm planning to cover only the properties which in my opinion are the most important ones but if you are interested in specific property or maybe you feel like a rebel and you want to explore all of

them feel free to utilize this link in the read me so this is the link that you're looking for as you can see it guides us back to documentation and you can start Scrolling and you'll see that this is a giant file where pretty much you can find everything that there is to know about the DS config again big picture this is where we control our typescript configuration I just want to mention that we have this include and in here we point to where the typescript files are going to be located so in our case

where it is well it's in the source this is where we're setting up our project then we have compiler options and let's start With the target one over here and with this one essentially we control the output code so navigate to a typescript playground notice I have this export con and then the arrow function now if my target is a JavaScript language version which has the arrow function already then as you can see the output code is going to be pretty much the same but if let's say I change this to ES3 notice how it

didn't have the arrow function therefore we get good old Regular function so this is what we control over here in the Target now as far as the module remember with this one we're controlling what kind of module syntax again we're going to get back in the output code in the lib this is where we were controlling the Declaration files that we're getting and pretty much after that the one that we're interested is the strict one so this is this flag which controls how bunch of the errors and the Warnings are treated so if we're going

to go with false then bunch of the things that technically should fail are not going to and we'll be able to build the project now if we set this one to true then we have the strict type checking set to true and then for example we have this no unused locals so if I were to go to tutorial and come up with let something is equal to something notice how I get this warning that something is declared but I'm not using It well if we go here and set it equal to pulse or just remove

it then essentially we'll have no warning message anymore again just a example of one of the properties that we can use this concludes the TS config and with this in place we can move on to the next topic and up next let's quickly cover class syntax in typescript now if you don't use classes in your project feel free to skip this section Al together since most likely you'll see very little Benefit and first let's start with a recap that classes in JavaScript serve as blueprints for creating object and they also have this special method called

Constructor which is automatically called when we create a new class instance with the new keyword and this keyword inside of the Constructor refers to the object being created so in this case I have a class notice we need to use the keyword class Then the name is book now the convention is to go with uppercase but technically you don't have to and it has a Constructor it's a typical method basically we can pass here pams and in this case I have title and the author so every time I'm going to go new book and pass

in the values they will be set inside of this object inside of this class instance and in order to set those properties I need to go with this dot then the name of the property in this Case title and I just set it equal to a value just being passed in so in this case it's deep work and then the author name now since we're working typescript notice how we have few red Squigly lines how do we fix them for STS we we need to set up the annotations over here in the Constructor so what

is going to be the type of the title and author and here let's just go with string and string and of course we can use the Boolean we can use the number pretty much everything That we have learned up to this point but here's the kicker I still have the red squigglies inside of the Constructor and you would think okay we can go over here and say that this is going to be a string and number or Boolean but when it comes to classes and typescript we actually need to go inside of the class and

explicitly set the type for the properties we are setting inside of the Constructor so in this case since I have two of them I have title and author yes I need to go above my Constructor and essentially set this one equal to a string and the same is going to go for author so I set both of them up and then notice now I don't have the red squigglies and I'm able to create those instances again result is going to be exactly the same I will still have my instance in this case de work with

the title and author properties the difference now typescript is happy as well so I'll be Able to build my project just like a normal JavaScript we can also set instance properties or they're also referred to as default properties and essentially the idea is that we set this property inside of the class instead of the Constructor and then they get automatically added to all the instances we create now how's that going to look like well imagine we have this checked out property and it's a bullan and initially it's always going to be false So yes definitely

we can go here with this Dot checked out and again notice we're not passing anything in a Constructor it's going to be set by default and I'm going to go with false so now I can navigate over here and say checked out and set it equal to Boolean correct so this is going to work but since I'm not passing this as a parameter we might as well set this one up as a default property so I can just Move this line of code and where I have the checked out yes I can still keep it

as Boolean and set it equal to false but we can also rely on the fact that typescript is going to infer this value so this is up to you you can go like this or you can set up the checked out like so equal to false for example or true and then typescript will immediately infer type now again just like other Times when typescript infers the type just be mindful of potential pitfalls you might face and if let's say we're going to go with deep work and checked out we should see the value in the

console so at the moment it's false and let's say if we decide to set it equal to true that's also an option so let's go with deep work checked out and let's set it equal to true now since it's a Boolean we can definitely do so now it's equal to true but if I'm going to change It to hello world of course this is not going to work typescript is going to complain because it is a bullion so this is how we can set up default properties in classes in typescript when we work with classes

in typescript we also have this read only modifier which does exactly what the name suggest essentially if we add this read only modifier to any of the properties we won't be able to modify them for example If I'm going to go to my title add read only yes I can still read the value for example I can go with deep work and title and for some reason I keep forgetting to set up my logs so we can still nicely access the value problem is going to be if we try to change it so if we

go here with deep work. title and set it equal to something else so this is not going to fly because now we have this read only modifier added to the title property Also in typescript we have private and public modifiers which control whether we can access the property or the method from the outside now as a side note by default everything is public therefore if we go with deep work and type do notice we have access to author checked out and title but if I'm going to navigate over here and let's say set checked out

to private notice how still will go deep work and now I only Have access to author and title so yes of course I can go over here and say public just keep in mind that's the default Behavior let me just set it up so I'm going to go with with public over here and also as a side not you can combine them so notice in this case I have already read only four the title but I can also say that this is going to be a public one now typically the way we control some private

property is by setting up some kind of method which we Can call from the outside just to Showcase that let me go with the method and I'm going to call this check out then let's set up the functionality where I'm going to go with this dot checked out and I'm going to set it equal to true so as you can see I'm still able to access the property from within the class but like we just saw we were not able to see the checked out value from outside so in this case I can Go with

deep work then let me call the method check out out and now if we'll take a look at the Deep work again in a console the checked out should be set equal to True correct so let's navigate back over here and notice of course the value right now is true so this is typically how we would access the value we set this equal to private so we cannot access it from the outside but then we set up a method which actually controls this value and just to hammer Home that we can mix and match I'll

set up few more methods one is going to be is checked out where we're just going to check the value and then I'm going to set up the private method so again this is a bit of Overkill but I'm just going to add this public one over here as you can see that's the default Behavior everything is public then we're going to go with another one where we're just going to check what is the value so we don't Need to take a look at the console so in here I simply want to return this Dot

and checked out and then also I want to set up the private one where we're going to toggle so this will be a private method toggle and let's come up with the name status that sounds like a good one hopefully I have no spelling errors and from this function I simply want to return the opposite value so I'm going to go with this Dot and we're looking for checked Out now since this is a private one again I'm not going to be able to call it here where I have my instance instead where I have

the checkout one I'll just set it equal to this dot so now I'm accessing the private method and I'm invoking the toggle checked out status like so and now let's just navigate over here I guess let's clean up our code a little bit and and let's just invoke few functions so for STS let me go with deep work we have checkout that's the one That we want to invoke and after that we're going to go with log and again we're looking for our instance and now we want to check the actual status and notice over

here this is set equal to true so by default it was set to false then I ran the checkout method which essentially just toggles the value and then I logged in a console that it's equal to true now let me try this one out let me run it two times and now this should be set equal to false because We're just toggling back and forth so this is how we can use public private and read only modifiers in classes when we work with typescript and up next let's see an awesome shortcut we can use which

is going to say was quite a few lines of code now for starters I do want to clean this up since I want to discuss Getters and Setters in the upcoming videos and I think it's going to be too much logic Inside of one class and also let me remove the first two properties as well as all of this code over here in the Constructor so the shortcut is following at the moment notice if I go with my deep work and type dot I don't see anything correct since we didn't set the properties correctly but

what we can also do is add readon public or private modifier in front of the parameters and if we do that it will be automatically set as a property with the value inside Of the instance so let me show you what I'm talking about we go here with read only and yes even though it might seem redundant since by default technically this is public if we go here and set up the public this will be set in my instance now we're not going to use this value but just to Showcase that same is going to

work with private I'm simply going to go over here and say some value and let me set it equal to a number so now if I go to my deep work Right now and type that notice I immediately have access to author and the title so this is the shortcut we don't need to use this anymore over here we don't need to explicitly set these properties in a class we simply can use either read only or public or private and effectively immediately tcri behind the scenes is going to set those properties with the appropriate values

when we create the instance now since you might not believe me about the Su Value let's come up with some random function let's just explicitly say that this is going to be public and I'm going to call this get some value okay and then we'll return this Dot and some value so notice inside of the class I do have access to it so let me call get some value and we do want to place it in a con log I guess so get some value let's invoke this let's set up our log let's move this

inside and the moment it says Undefined because I did not provide the value okay so notice of course it's missing so I have some value and since I'm looking for a number I'm going to go with 45 so once we log right now everything is correct so again this is an awesome shortcut we can use in the Constructor we can add one of the modifiers and this will automatically set those properties in our instance and up next let's work on the example with Getters and Setters which are special methods that are access like properties more

specifically let's take a look how we can combine them with the private and public modifiers which we covered in the previous video so one cool thing that we can do with the getter is to set up a computed property so essentially I can create the property on a fly now in order to create the getter or the setter we want to go With get or set eord then we want to come up with a name so this essentially will be a property on this deep work and in here I just want to compute some value

so in this case case I'm going to go with the template string first I'll access the title and I'll combine it with the author this dot author let's save it and now we want to go with our deep work and notice we have essentially this info property now since we're returning the value I keep forgetting That we want to place this inside of the log and in console now we have title followed by the author again what's super cool is that we can create this on a fly so I can just come up with the

property then do my computation and I didn't need to set anything in the Constructor or above the Constructor and the same way we can set up the setter the keyword we're looking for is set and in this case again I'm going to control that checked out property first Let me start with a set name now just like good old method we can provide over here parameters and in this case I'm going to call my parameter checked out now we do need to provide a type and then inside of the setter we're going to go with

checked out and we'll set it equal to our parameter value and then let's navigate to the console log and right after that let's invoke our Setter so We're going to go with our instance then and set our name and in this case again this is the property so we set the value now if I'll try to go with hello and notice how typescript immediately complains so let me go back and yep I want to go true and now I don't see anything in a console since I'm not logging let me try one more time where

I'm going to go deep work and if everything's correct the checked out should be equal to true and we can use The private and public as you can see again by default everything is already public but let me just showcase if we go here with private now we can only invoke this inside of the class so this is not going to work let me comment this one out and let me set up two more Getters one is going to be for the checked out value and in the second one will actually we use the check

out method a lot of checkouts so let's go over here with get now as you can see The name can be exactly the same because one is a Setter and other one is a getter by default it's going to be public and then from this one we want to return checked out and now Just for kicks let's set up a getter but inside of it let's invoke the setter just to make it more confusing so let's go here with public even though again technically it doesn't change anything in this case I'm going to go with

some info we're not going to Pass anything in and in order to access our Setter our private one we want to go with this. checkout set it equal to true and then after that we want to return and since I want to return the same value you know what let me copy from the info and and let me just overwrite in here so now let's navigate to a console first we want to go with log I guess we're going to go with deep work then some info so this is going to set our checkout equal

to true and also Return this value and also let's copy and paste and set up one more and in this case I'm looking for my getter the checkout one and once I navigate to a console as you can see at this point it's false then I get back the same info the title followed by the author and at the very end we can see the checked out value which is now equal to true and that's how we can use Getters and Setters with public and Private modifiers and up next let me showcase how we can

implement the interface by the class and if you remember the video types versus interfaces it was one of the things which we could do with the interface but we cannot do with the type so let's imagine we have the interface and the name is I person which essentially stands for interface person because there will be a class of person let's come up with some random properties so We're looking for string then also we want to set up the age number and you know what let's go with greet method and it's not going to return anything

and it's also not going to take any parameters then we're going to go with class let's come up with the name in my case person and we go with this Implement which essentially is promising that it will provide all of the properties and methods defined in in the interface so in this case we're looking For I person that's the interface I want to use and in here let's go with the shortcut which we covered before so I can go with public now what is the name it's a string correct so let's set up and also

we want to go here with public age now this will be a number we're not going to set up anything in the Constructor well we don't have to we still have a red squiggly line because there is no method so right after Constructor let's go with greet it's our Function and let's just log some stuff over here in this case I'm will go with hello my name is Slim Shady and this is name and also I am this. age let me access this. Ag and we're going to go with years old now we do want

to set up our instance so let's go with con and hipster we're looking for a new person let's provide a name Shake and Bake and as far as the years well let's Go with 100 and then at the very end let's invoke hipster GRE and if everything is correct we should see the text in the com so so that's how we can implement the interface with the class again something we canot do with the good old type Alias okay and once we're done with tutorial let's put our typescript knowledge to a good use and create

a small tasks application as far as the setup for this project I'm going To set my code editor and browser side by side but you you don't have to it's just my preference since that way I don't have to switch screens like gazillion times also I will set up a new page in my case I'm going to call this tasks HTML keep in mind technically you can build everything in index HTML I just think that it's going to be easier if we separate the tutorial from the project so here's what we want to do navigate

to The route again please don't set this one up in the source we want to create a new file and I'm going to call this tasks HTML now I will create a basic HTML structure and in the vs code essentially we just do that by getting the exclamation point I believe I mean I haven't created the straight up HTML project in so long that I already forgot so yeah basically we want to click shift and back tick and notice we get the this suggestion from EMT that you can create A HTML structure now in my

case I'm going to call this tasks app or tasks then also there's going to be a link for CSS so that is coming up and in here for now let's just say tasks app let's save it now this is totally up to you you can navigate in the browser and just stay there or we can actually go to to main DS and notice we have both of these logos well at the moment these links navigate somewhere externally basically back to typescript and vat and we can Actually change this around where I'm going to go with

forward slash and tasks and of course if you named your page differently please make sure that the H matches and I'll do the same for this one so now once I click on one of them I'm going to navigate to the tasks app now I'm not going to set up the link back I don't think there's any need for it for now I think we can close the main one but we will return to it and also Let's create an Source tasks DS so this is going to be our typescript file where we'll set up

the logic let's go with Ds now in this case we're not going to import that in the main DS we actually want to go there directly to tasks somewhere here the bottom of the body we want to go with script then we're going to add type module and now let's look for Source we're looking for tasks I believe yep that was the File and I always prefer to set up some log just so I don't run around like a headless chicken looking for a bug but maybe there's an UT wrong or something along those lines

now for some reason yep everything is fine so I see over here the tasks so I know that my logic works then let's navigate uh back to tasks HTML and now above the script effectively we want to set up the structure for the application so I just Want to add some HTML elements now this is totally up to you but I also provided some CSS just so it looks a bit more presentable now you have two options you can either get it from the final folder so navigate to the final repo look for typescript tutorial

and then more specifically look for task CSS so I didn't want to add this code in the main CSS file so we're going to create a separate file for that task CSS and then just grab that code or you can nicely Navigate to the end of the readme and just copy this code again there's a bunch of Base Styles so let's not worry about the CSS too much as far as the actual CSS for the project there's not that much code but I'm not going to go over it because this is definitely not a CSS

course so just select everything inside of the back dick where you see the CSS then we want to go I guess let's set up in a source Doesn't really matter we're going to go tasks CSS copy and paste and now where we have a tasks HTML we want to set up a link we're looking for the CSS one and basically it's in the same or it's not sorry it's not in the same folder we're actually looking for t CSS so once we add that I mean at the moment most likely we won't see anything but

once we add our elements we should have a nice CSS as well and with this in place now let's set up the structure and I'm not sure whether I mentioned that technically the CSS part is optional so I mean it's not going to affect any of our logic our application is just going to look tiny bit more representable then we want to go with tasks of some kind of value as a sign note we might need to refresh yep now everything works now I can see my tasks over here then let's create a form now

we won't have the action but I do want to add the class and even if you're not using my CSS Please make sure that you use the same classes or if you use a different class make sure that you remember that when we are setting up the logic then let's go with input inside of it the type is going to be text then we want to go with another class and we're going to go with form input save this okay this is what we should see then also let's add a button type will be equal

to submit okay beautiful let's add a class name BTN let's call this add task okay again I'll have to refresh and then right after the form we have anord list class let's go with list we're not going to place any items so we will place the items dynamically with the help of JavaScript and then at the very end let's just add a test button because there's something we need to discuss first so technically this is not going to be part of the project but it's super important we cover two things and Therefore we're going to

go here with the button so we're creating the good old button let's add a class of test BTN and let's just right click me let me save Let me refresh and this is what we should see in the browser and if you have the same result now we can move on to the next step okay and before we start typing away let's address these two important points first when we use Query selector we actually get back the Element which is the most General Base Class that only has the methods and properties common to all kinds

of elements so that's Point number one second there's also potential for null and we also need to address that and no we cannot build this project unless we cover both of these things extensively now once we do it should be a smooth sailing so first let me just showcase the two important points if we go with cons button we know we Have access to a document correct because we have the Declaration files and document has this awesome method called query selector where we just pass the class in this case and we can select the element

and everything is awesome but as I hover over the button notice it can either be an element so it's going to be an issue if I try to get some properties and methods that are only specific to buttons which is actually going to be our second point And also it can potentially be null now why do we care about that well let's say if I want to go with BTN and then Dot and event listener it's not going to work well technically it's going to work because typescript is going to fix my code but notice

it's only going to work if we go here with this question Mark so this is one approach how we can fix this because as far as typescript is concerned there's no way to tell whether yes for sure we're getting back to Button unfortunately again this is built time this is not runtime so typescript is like okay you're selecting the element from the dumb potentially well this can be wrong correct and in that case you're not getting back the element you're actually getting back null and we need to handle that also don't be surprised if in

few cases and I sign not yes we'll cover that actually when we talk about the element Point you might need to do more checking you might need to do something like this where you go with if button and only then run the code so this is one approach how we can handle the case where element is null and yes every time you'll want to do something with the element you'll essentially need to first check whether the element actually exists now another approach to deal with the null issue is by setting up the non null Assertion

operator so effectively in here I'm telling T script yo I know for sure that the element exists over here and in that case notice I can go here with BTN then Dot and then add event listener and I don't need to use anymore the optional chaining and the same is going to work if I'll try to run for example disabled on a button I won't have to check for the element whether it's actually present so in here I'm just telling T Script listen I know a bit more about my project than you do and I

know for sure that the element is there and actually if we take a look at the main TS I believe it was over here now don't worry about the code after essentially they're just dynamically inserting the elements and all that notice this one over here where they go with document query selector they grab the development they're looking for the ID over here and then they just tell typescript Hey Listen we know that the element is going to be there now how do they know that well we take a look at the index HTML notice this

ID it's app correct so you have two approaches you'll see both of them used extensively as far as your project it really depends if you like this approach where essentially you let typescript know just be mindful if the element is not going to be there then of course you will have runtime errors or or you can Use the optional chaining and then here and there you might need to actually check whether the element is present so that's the first point that I wanted to address now the second one is following I use over here this

nonn assertion operator okay everything is awesome but what if I want to run disabled method I know that the button has this particular method so let's say I go here with BTN Dot and then I'm trying to type but I can see that it's not present so Something is off why I have such issue well remember we are getting back what we're getting back actually an element which is the most General base class from which all elements in a document inherit now this one the element has only the methods and properties common to all the

elements so where I'm going with this well there's going to be instances where you select elements and you need a specific method or a property which is only on that Element and this is the case the button I know it has disabled one and I know for sure that I definitely want to use it but I'm not able to because I'm actually getting back the element now let's take a look why is that a case let's go here to type Ty definition and notice the query selector so query selector surprise surprise is what a generic

now it's looking for the type and notice how there is actually type Constraint where it says yeah you can pass in the element but it needs to extend from the element so this is a more interesting case for type constraint instead of our string and number our still EX examples actually this limits the element to the element and not only that notice how it actually provides this one as a default and what does that return it actually Returns the element we passing over here or it returns null so all of the things we Learn we

can now nicely use when we inspect the documentation so now it's very easy for us to look at this documentation and be like okay so we do need to provide the element we want to select it needs to extend from the element and if we're successful we're actually going to H it back so now let's navigate back and in a query selector we want to set up the angle brackets and then we want to look for HTML button and element so that's the One that we want to pass in so now we're not getting back

the element or null we're actually getting back our HTML button element so now if we start typing notice BTN disabled and we can nicely set it equal to true now before I show you the type assertion option which is another approach you'll see let me just remove this non null assertion operator and showcase that here and there you'll have to actually check for the button so remember our second option where every Time we will use a method for example ad event listener we need to add the optional training which as a side note is already

done by typescript in this case in this case in the case of disabled it's going to be a little bit different so if we'll try to do that typescript is actually going to complain it's going to say hey L and you canot do that so instead we'll have to check button and then we can set it equal to True again this just brings me back to The point that we have two options over here and we can also always add this exclamation point and as far as the second option if we don't want to pass

here in the generic we can also use the type assertion so let me just go here with disabled and let's set it equal to True again and let me remove now once I do that typescript is going to complain and another approach that you'll see is this one where we select yes we're getting Back the element but then we use that type assertion and we say yeah actually this is going to be HTML and then button element now I personally prefer the other approach and that's why throughout the course you'll see that one but definitely

don't be surprised if you see something like this in the code base this is also an option we can take where we select the element and then we just use the type assertion and you have the example in the read me so I guess I can Just remove pretty much everything over here because we'll start everything from the scratch and we'll start working with our form so you know what let me clean this up we also don't need that silly button over here since we covered two important points and now we're ready to move on

to the next step okay so let's start working on our project and in this video I want to select three elements I want to select the form I want to select the form input as well as the list so Form input is where we'll get the value We'll add the event listener on the form so every time we submit the form we will grab the input value and also we want to get the list since every time we'll provide here a task if the value is there then we'll basically add it to our list and

also this is where typescript is going to come into play we'll need to set up our type so this is something interesting every time you work on a typescript project yeah pretty much one Of the first things you'll want to do is to start at least setting up the shape of your data this is at Le at least in my opinion biggest differences between the regular project and a typescript one you'll always always have the types or interfaces somewhere because typescript needs to know about the shape of your data so let's start I guess by

selecting all three of them I'm going to go with task form now I'm not going to use the nonnull assertion Operator throughout the project I'm just going to use that optional chaining so we're going to go here with do docent then query selector I do want to set up the angle brackets and I'm just going to say that this will be a HTML form element or no then let's go with the class and we're looking for the form and I believe I forgot to mention you see there's no way for typescript to know that this

definitely is a form that's why we need To provide over here this form element so it cannot magically go to the HTML and figure out that since we're using the form class then for sure we're selecting the element which is actually a form that's why we get back this generic element and that's why we need to use the generic to provide what is the element we're actually selecting hopefully that is clear const form input is going to be the next one we're going to go with document query Selector then will provide the HTML input element

so this is the element I'm looking for input element okay good and then the class is Dot and then form input now I think I can make this one so everything is in one line I'm pretty sure we can see everything that's happening I mean you know what no let me make it like this and then Also let's go with const task list Element and this one will be equal to document then query selector let me add the angle brackets as far as the class we're looking for list and over here we want HTML ul

and list element and my apologies I'm just going to be kind of randomly moving the this stuff over here don't worry we shouldn't have issues with the later code it's just these select lines then let's create the type and effectively we will have a task with Description which is going to be a string and is completed which is going to be a bullan so let's set up this one type task then let's go with the description set it equal to to a string and yes as a sign not you can set this one up as

interface as well it's just my preference to go with typ aliases and we're going to go with Boolean and then I'm going to set up an array of Tasks so this is where we'll store the tasks and as a sign note eventually we'll grab these tasks from the local storage as well so think of this as the state for our applications so we're just going to go with tasks it's actually going to be equal to an array of tasks and for now it's just going to be empty array okay and now let's start setting up

the functionality so we want to add event listener on a form we're going to be listening for submit events We do want to prevent the default so we want to handle everything with JavaScript and after that inside of the Callback function we want to grab the form input value if some value is provided will actually wipe everything clean and return and of course before that we'll have to do quite a bit of logic and if there is no value then we'll just set up the alert so let's set everything up we're looking for task form

again we can rely on typescript or We can manually add this optional chaining operator ourselves then we're looking for ad event listener like I said we're looking for submit and again notice how helpful typescript is so right away provides all the possible events that we can use over here for now we will provide call back directly but in the following video I'll show you the Goa we need to be aware of remember we have access to the event now if we hover over we can see the that actually it has A type of submit event

something important we need to keep in mind and then let's go with event we're looking for prevent default and we just invoke it so now we'll handle everything with JavaScript after that let's grab the form input and more specifically we're looking for the value property which again is on the form input I'm going to give it a name of task description let's set it equal to form input same deal we don't have this non null Assertion operator so again we can just rely I guess on typescript or in this case it simply complains so we'll

just need to add this optional chaining so now we're grabbing the form input value if we have something in there if the user has provided something then we'll do a list of things if not then go with alert and we'll just say please enter a task description again it's not going to be the most complex application ever let me Refresh and notice if I don't provide anything essentially I just get this alert box now if we are successful again there's going to be a list of things that we will do but once we're done adding

a task to the list once we're done rendering the tasks and updating the local storage at the very end regardless we want to set the form input value back to an empty string and we want to return since I only want to hit this alert if No value has been provided now also for time being you know what let's just log here let's just say task description so if I provide some random value check it out I have it here in the console if not again we have this alert box and what this in place

now we can move on to the next task okay and before we set up the logic to add new task to our list let me showcase the event object gotcha and as I know this is something you'll also see in react section of the course so pretty Much the main idea is going to be exactly the same and it is following you see if we provide over here call back function directly everything's awesome typescript knows that yeah it's actually a submit event but it's not going to be the case if we set up the reference

so can go here with function create task as a say not I don't think I'm going to keep it so I'll just set it up and eventually remove it but this is totally up to you of course you can also keep This code if we're going to go over here and basically take all of this logic like so everything should work correct we have access to the event and now we can just replace it well let's see let's go with create task and check it out so typescript essentially saying that event right now has the

type of any so this is the case where if we're setting up functions and providing them as references here when we're listening for Events then yes we'll explicitly need to provide what is the type so in this case we're looking for submit event and once we do that again our logic is going to work I can provide some value over here and everything is awesome and the same is going to work with the empty value and yes the same you'll have to do in react now in there the code is going to be more complex

but the idea is the same if you're listening for some kind of event and you set up the logic directly In a callback function yes event will have that correct type straight out of the box but if you're setting up a function which you're then using as a reference it's not going to be the case something important to remember okay and up next let's see how we can add task to our list now in this video we're not going to set up the logic to render any tasks on the screen that is coming up so

most likely we'll do right after we are able to add task to our list and in here I want to First create function I'm going to call this add task and as far as the parameter it's going to be a task but this is where we set up the type so we definitely say that we need to provide the task and we're not going to return anything from this function and as far as logic we want to go with task I'm sorry tasks and then push and we want to add our task so whatever we

provide over here then we want to navigate back to our if block and you Know what let's add three comments we'll say add task to list then second one will be render tasks and then we also want to update the local storage so all of that is coming up for now inside of the if block I want to construct a task so if I have a text I want to go cons task is equal again to my type my task type and I want to set it equal to description this will be equal to task

description so this will be my string and then as far as the completed one we Will hard code so go with is completed and we'll always always set it equal to false so once we create task now we can invoke add task and pass in a task and since I have the correct type everything is good script is not complaining and we can actually log the tasks here so let's go here with tasks let's add something so let's say first task and check it out now I have my array with my first task if I

go with second task it's not going to be surprised if we have two items in The array and with this in place now we can move on to the next step okay and up next let's render the task on the screen now we will call actually render task in two places so for now we'll only call it here in a task description block so if we're successful we'll just render it on a screen but also once we're able to grab the tasks from the Lo local storage will iterate over and render all the tasks on

the screen so think of it this way not only we want to render the Task once we add new one to the list but also when the user first navigates to the page or we refresh we want to grab the tasks from the local storage where they are nicely saved and we want to render them on the screen as far as the function first we just set up our keyword I'm going to call this render task and again it's looking for a parameter but parameter has a specific type and it's equal to task then inside

of the function first I want to create The element and in order to do that I need to come up with the name in my case I'm going to call this task element then we go with our document it has a method of create element and we just need to provide what element we want to create so either we scroll down or we just type Li and now we successfully create the list element then we also want to add the text content basically it's going to be the Value for our task description the property is

text content and we set it equal to task so whatever it's passed in and description and then at the very end remember we have our list somewhere here that's the one if it exists if it's not null then we want to add this element to the list so we go with task list element up in child again typescript Auto formats for us and just add this optional chaining and then we Pass in our task element so now let's navigate up where we have render tasks and we want to go here with this function pass in

a task and now let's try it out if we're successful we should see the task on a screen so let's again go with first task and check it out we successfully created the element on the Fly same is going to be with second task and all the tasks we add to the list all right and I think we are at the point where we can add local Storage to our project because it's nice that we can render all the tasks we add to our array however if we na away or just refresh notice how essentially

we lose all the tasks since they're just saved in the memory now before we do anything I actually want to make sure I have nothing in a local storage otherwise I mean I might get some weird bugs so let me navigate to my local storage and just clean everything again Let me refresh I have nothing in there So now again I can make this one smaller and as I said I'm looking for the console okay good and now as far as the functionality we want to create a function called update storage and in there we

will use the local storage more specifically set item method and we'll need to provide the value and just stringify our current tasks so in my case I'm going to do it over here so we go with function let's call this update storage and as a yes We'll call it in multiple places so update storage as far as the parameters well we're not going to pass anything in and as far as the functionality we're just going to go with local storage then let's go with set item as far as mining it's going to be tasks then

comma and then we're going to stringify the tasks as a sign note yes pretty much every time we will add the task to our list or when we click on the checkbox and we Edit the task when we set it equal to completed or we uncheck that yes effectively we will overwrite all of the values that we have in the local storage with this new one so grab the tasks and overwrite with the current values now when do we want to call it well for starters we want to do it over here so we're going

to go with update storage let's invoke that and you know what I will actually open up a bigger window I think it's going to be Easier to see so that's my tasks let me open up application okay good and then let's go with first task again Yep this is what we have over here notice tasks and I have a d and if I'm going to go with second task now this is going to get added to the array so this should cover when we add the task to the array so this should cover the form

submission now we also want to handle when we load the page so at the moment we always set It equal to an empty array but we want to change that and order to do that we will come up with a function called load tasks now you can set it up with all of the functions but I'm just going to do it over here since in my opinion it's going to be easier to see the entire functionality we we are looking for a return and from this function we want to return an array of tasks so

an array and type is going to be the task now inside of the Function first let's grab the tasks from the local storage so we're going to set it equal to stored tasks that is equal to local or I'm sorry not load local storage it has a method of get item and we're looking for the tasks now here's the kicker just like previously this can be a null and we definitely need to handle that so in here when we set up the return we're not just going to go with store tasks actually we will set

up optional training and we'll say hey if There's a value okay awesome parse it so we're going to go with store tasks because keep in mind we cannot store essentially objects in the local storage we can only Only Store strings that's why we went with Json string ify and now we want to parse that value but we only want to parse it if we get something back correct if not well then we'll just return empty array and now where we have the tasks we'll actually go with load tasks we will invoke it and since Potentially

now we can get some tasks from the local storage we also want to iterate over and render the tasks so for every task we have in the local storage in our array we want to call render task method so I mean somewhere after the tasks we want to go with the name so tasks then dot we're looking for for each and we simply can pass in the render task now let me showcase that essentially it's pretty much the Same as we have over here so notice we can either go tasks and for each and then

pass in the call back function or you simply provide the reference to render tasks and now let me navigate to the browser and if everything is correct whatever tasks we have in local storage once we refresh we'll see them in the browser as well all right and at the end of the project let's also add the checkbox to our list item and every time we click on checkbox we'll be able to Control this is completed so by default it's false but then once we click on a checkbox we can actually toggle that and I think

I'll try to cover the part eight and part nine in this video hopefully it's not going to be too long STS we want to navigate to render task and at the moment we're just adding the list item to our list but we also want to add a checkbox to the item and then add that item to the list hopefully that makes sense so let's go here with checkbox we Have const task checkbox that will be my variable we're looking for document then dot then we want to create the element and this is going to be

the input so not list item we're looking for the input and then we'll set the type to be equal to a text box so we're looking for task checkbox type and we set it equal to checkbox then let's set check equal to is completed Again by default it's going to be false so let's go with task checkbox we have The checked property which controls that and we want to set it equal to task and then is completed and now before we add task element to our list we also want to go with task element so

task element then upend child and we want to pass in task checkbox and check it out now we have the checkbox at the moment it's not doing anything since we don't have any functionality but we'll change that right after we create the checkbox I Also want to add the event listener and the event we're going to be listening for is going to be change so before we add it to a task element element let's call toggle checkbox we're looking for our task checkbox that's the element then add event listener we're going to be listening for

change event we're not going to access the event and as far as the functionality we want to go with Task and then is completed set it to the opposite since we're going to be toggling and the way we do that is following so we go with exclamation point and task is completed so we set it equal to the opposite and then we call update storage so now once I click and you know what let me showcase that on big screen again let me start from the scratch just so you don't think that I'm cheating over

here and if we take a look at the tasks okay this is what we have Is completed is equal to false but then once I click notice it's set equal to true so when I refresh I get back the same result this concludes the tasks project hopefully everyone enjoyed it and up next we're going to take a look how we can use typescript in react all right and once we're familiar with the typescript fundamentals let's see how we can use typescript with react before we begin let me just mention that I assume you are already

comfortable with react So things like components State most common Hooks and some of the popular libraries if you are confused about some react topics please pause the video and utilize some external resources since our main focus is going to be on implementing react with typescript otherwise this part of the course will easily turn into a react tutorial in order to follow along with this part of the course you will need a star project which is the second folder in the main Course repo so if you have not already done so get a hold of the

repo either by downloading or cloning it and once you have the main repo on your machine open the second folder in your text error so get a hold of the repo open up your text eror and then just access the second folder now it is a note app so same deal we want to start by running npm install first and also or you know what I'm not going to set up such command because Here and there students complain that such command doesn't work on their operating system so first let's just run npm install and then

we want to go with npm run run Dev and if everything is correct again you'll have the application on Local Host 5173 and this is what you should see on the screen and if that's the case we can move on to the next step all right and let's start by taking a look at the files and Folders as well as the assets I provided so we have node modules over here this is where we have all of our dependencies we have the public one this is where we can set up some public assets a source

folder again this is where we'll do all of our work but in this case we're going to be working with react so we'll create components and all that cool stuff we have the eslint file also a g ignore again this just provides info what files and folders are going to be ignored by The Source control index HTML this is where our root component is going to get injected so for example if you want to change the title feel free to do so a package Json so in here you can take a look what extra libraries

I installed and also we can see that we have a Dev one so that spins up the dev server and also same deal we have over here a build command and before vit builds the project what do we do we compile our code then we have the good old Typescript configuration file and also a few more configuration files for V and also the node one now you'll also find the readme over here and just like in the first part of the course we will use this readme to set up the challenges to take a look

at the examples I also provided some links to useful resources and all that cool stuff and first thing that I just want to mention essentially this project is a straight up beat react TS boilerplate application the Difference I just added some assets to it and removed some boiler plate files that's it so if you're going to run npm create V latest react typescript so this is the name of course you can change it then the double dashes template and provide react DS effectively this is the project you're going to get back and like I mentioned

before most of our work we're going to do in a source so let's just navigate over there for starters just like Traditional react application we have main DSX so this is where we inject our app basically our root component into that div with the ID of rot now also you'll notice few Imports but we'll discuss it later I mean these are just Imports for some extra libraries we're going to use then we have the app DSX so this is where all of our components are going to meet you can also call this the root component

and we have a final and a Starter and the way I set it up notice these are all the topics we're going to discuss and this is going to be our starting point and in here you'll find the complete code so essentially pretty much every time we'll start working on a new topic we'll just import the specific folder because if you notice all of them have index DSX so this will be the default import that's just a note thing and then as we're moving from topic to topic we'll just Change the path over here now

for all of them you'll just find this standard component where I have few heading twos and basically I'm just displaying some text on the screen so all of them pretty much will be the same but of course once we're done the topic there's going to be more files more logic and rest of the good stuff and just to Showcase how it's going to look like let me navigate to app TSX we want to go with import then let's come up With the name in my case I'm going to go pretty generic I'm going to say

component from and now we want to go to a star forward slash and then again we have all of these topics and as you can see they are numbered so we'll start with return topic and then all the way to tasks so let's go with 01 return notice again we don't need to provide the file because all of the folders have already a index DSX and then we want to replace It over here we want to go with component and then render it on the screen again at the moment it's not going to change that

much because we haven't set up any logic yet and basically as I'm moving from topic to topic I'm just going to change over here the path and then if you want to test something of course you can import the component from one of the final ones as well now also something I want to mention the idea with the react and Typescript is following if we want to set up components basically react the stuff we need to go with DSX so that's the extension now if you just want to set up some logic some good old

JavaScript logic just like we did in the first part of the course we just go with Ds so whether you want to set up some hooks file or utils file or types file that's the case you'll go with Ds but the moment you set up the component you want to go with TSX hopefully I clearly explained how our setup is going to work and if you're looking at the other files over here in the source one we'll discuss them essentially as we progress with the course content for example the hooks the store so all of

that is coming up and I guess lastly let me just mention that yes I did provide some index CSS just so our examples look a bit more presentable but again this is totally optional and with this in place we can move on to our Next topic which is going to be the component returns in react all right so we have the correct import again we're looking for Star 01 return so that's where we want to navigate and our first topic is going to be the component return now let's establish a few things for starters what

are react components they are functions correct and what is the one thing that we know about function returns and typescript well it's the fact that Typescript infers the return type so if I hover over notice how typescript sees that essentially this is a component and the return is jsx element so what does that mean well if for example I'm going to forget to set up the turn actually typescript is going to yell at me so notice once I save I have red squiggly line in app DSX and if we hover over we can see that

component cannot be used as jsx component because it returns Void and few things I want to mention first it's super helpful because when you're working on a bigger project I mean having no return sometimes can be tricky to spot as far as the error go and second one this is something that I will probably repeat 10,000 times during the second and most likely also the third part of the course code error is going to be your best friend the moment you hover over the squiggly line or in General the events and state values and all

that it will immediately pretty much give you all the info you need so in our case let's say if we go back over here and set up the proper return we can clearly see that typescript infers the jsx element which leads me to another Point can we explicitly write jsx element in here as far as the component return yes it's absolutely an option we can go over here even though it's already inferred we can Say hey you know what I'm going to go over here with jsx element we save it and since in this case

I am returning a jsx element there's no issue pretty much it's the same deal but keep in mind what if in your component you decide that you're going to return a string well now it's not going to fly because now I already have here an explicit return where I say hey I'm going to return jsx element and what about null What if I I have some kind of logic and I'm going to Go with null again same deal we cannot do that because we have explicitly over here this jsx element now if you don't have

that typescript is smart typescript can infer that hey in this case it can be either hello either jsx element or no so again this really comes down to your preference one option you can simply let the typescript to infer a type and at least at the very basic scenario it's going to help you to avoid this case where you don't return anything second Option you can start hardcoding over here explicitly what are you expecting back from this component just keep in mind as your logic changes you'll have to adjust because if you're just going to

write all the time jsx element well typescript is going to be confused so in this case let me just hardcode it but for most part I just let typescript to infer a type so I'm going to go over here with jsx element that's going to be one option I'll say Hey listen it can Also be null and also well let's just set up a string type let me save it and now notice Ty script doesn't complain everything's fine because I have the explicit return and the options that I have inside of the component match to

whatever I have over here in the list so that's how we can set up component returns in typescript all right and up next on our list we have I believe props so first let's change the path so we're looking for 0 to props let's take a look At the browser yep we have react typescript and props so looks like everything is correct and essentially in here in the component let's just provide some values so we're going to go with something generic for example name and the ID which is going to be actually a number so

1 two 3 and immediately once we add those values typescript will complain because again it's like setting up a function providing the arguments but we Haven't set up the parameters so typescript doesn't know what to expect so let's navigate right now to our props index DX and let's take a look at the multiple options we have for props and essentially the first one is the inline one remember in react props are gathered in this object which we access either by just the structuring over here where we go with the curly braces or we go with

props now I'll show you the other option a little bit later for now let's just Grab the object the props object and let's explicitly take a name and the ID so those are the two values we're looking for but before we can do that since we're working in a typescript yep just like regular function we'll need to set up the type and the first option we have is basically set up everything in line now I can tell you right away that it's most likely not going to be your approach especially for bigger projects Where you

have components with bunch of props because it's just going to be very messy so yes in here it will start nice and easy but in a second I'll show you also another approach that we can take so in here we just say Hey listen name is going to be a string and the ID will be a number and the moment we do that typescript should be happy it just complaining that we haven't essentially used it yet now notice how everything's fine in the component for some reason It's complaining over here so let's try to use

these values and let's see whether that makes typescript happy so I'm just going to change it around I'll say adding one now that one will be equal to name and we're looking for our name value and then the second one will be Hing one and and we'll just provide the ID so let's go with ID and then let's access that let's save this and if everything is correct we should see name Peter and whatever ID Provided again we just go back to the fundamentals section where we learn that every time we have a function we

need to provide info to typescript what is this function going to receive as far as the argument and since props are essentially arguments that we pass in when we construct the component we need to provide the type annotations and what's really cool let's say that we're using this component in multiple places in our project if for Some reason I'm going to forget provide one of the props notice how immediately typescript is going to complain so I won't have to realize this error at run time as I'm building the project let's say that I'm setting up

this component somewhere and I just forget that I also need to provide the name typescript will immediately let me know that something's wrong and actually the same works if I decide that the name is actually going to be title I mean it's quite common to Have a component and you think that yeah the name for the prop name is awesome but then you realize that hey you know what actually prop name should be titled let's say I do that notice how immediately in all the places where I'm passing in the wrong prop it's going to

light up so again imagine scenario where you have this component in multiple places in your project immediately you know that something is wrong again something super super cool where you Don't need to run around like headless chicken and then look for those instances you'll immediately know where you provided the wrong prop so let me set it back to name and ID and up next we're going to discuss alternatives to inline type annotations okay so our initial setup works but what if we have a long list of props or let's say we want to reuse these

props well in that case we can either set up the type or the interface again this is the totally Up to you I'm going to stick with type just because it's my preference I'm going to call this component props and in here we just want to provide pretty much the same values so actually you know what I can just cut it out remove these curries set it equal to and then where I have my D structuring I just want to set it equal to my component props save it and since I don't see any red

squiggly lines I'm Good to go now also please keep in mind that alternatively you can just reference the props so in here I can say yeah props is going to be equal to component props instead of the structuring name and ID and then every time I want to access one of the values I can go here with props ID and props name again this really comes down to your preference Some people prefer the props option and some people prefer this option as long as you Don't have the red squiggly lines as long as typescript is

not complaining it does really come down to your preference and the same goes for the type or the interface so if you want to use the interface over here you can definitely do so if you prefer type it's definitely an option as well and while we're still on a topic of props let's also discuss the special children prop which allows elements and components to be passed into other components so if I'm going to Go to app PSX and set up my closing tag as well and then let's say add a heading to with a hello

world typescript is going to complain because I haven't specified that I'm going to provide the children prop now the name is exactly the same so that doesn't change we just go over here with children and yes we do want to render it somewhere in our return as well but now M dollar question what is the type and essentially we have few Options we can hardcode it ourselves and the type we're looking for is react node and we can import it or we can just go to react Dot and then react node so for example this

is one option we can take where we go with react Dot and then react node so that's the type we have access to and the moment we do that we fix the first error but notice right now typescript is complaining because since I set up my children prop in the props component It's also expecting the same thing over here and one easy way how to fix that is to just make this one optional just like we covered through during the fundamentals part so I can just go here say that yeah children might be provided or

not and if it's provided then it's going to be a react node now also a quick side note just like with vanilla JavaScript actually during development everything is going to work even though we have the error but please keep in Mind you won't be able to build the project unless you change some configurations and allow the project to be built with the typescript errors hopefully that is clear so let me go back to this optional property and let me show you another way how we can handle the children prop alternatively we can also import a

special type from react which is called props with children so yes we have access to a declaration file where there Is a type called props with children which actually is going to handle the children prop for us now in order to import it we're going to go over here with import now I will add this type remember technically it's not a must then we're looking for props with children and this is going to be coming from react and if we hover over we can nicely see the type definition and this is where I would encourage

you to stop the video and go Over this logic and try to see whether you're able to understand everything that's happening under the hood since we have covered all of these things during the fundamentals part and again reading such type definitions is going to be a good practice for us not only to jog our memory as far as typescript but also to understand what is the specific type or function or I don't know property actually doing and if we take a look at The type definition we can see that props with children is a generic

which again kind of makes sense because it's going to be used in a lot of situations so there's going to be the case where the component props has one shape and then in the second component the shape might be totally different so again a very good use case for generic Now by default it's actually going to be set equal to to unknown so this will be the default value and then notice how They use this intersection type so essentially whatever is passed over here is just combined with what with children property which is set equal

to optional so it might be passed might not and the type here is going to be equal to react node or it's going to be equal to undefined so let's try it out I think I'm going to leave this one for your reference so let me just copy and paste let me comment out first one over here and then instead Of setting up the children property ourselves we'll just go with props with children and then we'll provide this value over here so effectively it's going to look like this we're going to go with props with

children remember it's a generic and it's looking for that type and the moment we do that as far as the result notice we get back whatever type we pass in and it's just combined with this children property and with this in place now I can go to the app Remove the heading 2 or provide the heading 2 to the second instance and everything is going to work and typescript is not going to complain so again when we work with children prop we have few options either we can explicitly provide the value of react node ourselves

or we can import the props with children which essentially does the same thing behind the scenes all right and once we're clear on component returns props up next let's Talk about state so first we want to change the import and and this is actually going to trigger some typescript errors so I think I'm just going to go with good old component for now so let me render the component yep typescript still complains because we haven't changed the import so we're looking for a 03 State and now we render the component so now let's navigate to

this particular component and let's just I guess set up heading two with some Kind of value as well as the button because inside of the onclick we'll try to change the state values so I think I want to do that first and then we'll worry about the actual logic so in here inside of the div I want to go with heading two I'll add one of the classes so margin bottom is going to be set to one and I guess I'm just going to leave this one over here then let me go with a button

let me remove this heading To and let me add some classes just so we have some basic styling so BTN Center over here and then let's just right click me and eventually we will set up the on click let's not worry about it right now this is what we should see on the screen now I don't know whether you remember but actually we already covered sort of the Ed state during the fundamentals we talked about it when we discussed the generics but let's go over It one more time so yes we can nicely use use

state in react to control the local state but if we take a look at use State it's actually going to be a generic so let's start I guess with the import so looking for use State it's coming from the react and let me just hover over it notice this is going to be the type definition it's a function it's a generic and essentially we can either pass in the initial state or we can pass in the function and as far as the return Notice it Returns the value we provide in the initial State and the

function that controls it so where I'm going with this if we have just primitive values in the use State you'll see that typescript is very smart and it's going to infer the type so for example if I'm going to go over here with text and set text and set it equal to my use State I don't need to set up over here the type and say that is going to be a string because typ script is going to know that so if I'm going to go here with shake and bake and if I'll have our

over text step script knows that it's a string so essentially whenever I will try to update this value it's going to expect the string and we can actually see that over here if we go with on click and let's not worry about how we can handle events in react we'll cover that a little bit later for now let's just pass in our Arrow function just so we can invoke set text and if I'm going to Provide a wrong type it's not going to work so notice again as we're hovering over what is the set State

action function looking for it's looking for type string so it's going to be okay if I go here with typescript yeah there are no complaints but if I'm going to provide the number immediately typescript complaints again the logic technically is going to work during development I can navigate over here press and technically I shouldn't have Any errors in a console nope everything is fine but typescript is not happy with me and the same is going to work if let's say I'm going to set up the number so let me navigate over here and instead of

text we're going to go with number and set number okay good and then we'll provide the Primitive value over here and you know what let me just comment this one out for your reference if we're going to go with set number Again we can see that set State action function which essentially is a type for this one for our set number function in this case is expecting a number because typescript is going to infer the type if I'm going to provide it if I'm going to say 23 yeah everything's awesome if I'm going to go

with some kind of string value it's not going to work now it doesn't stop me from explicitly going over here and saying number I mean we can still definitely do so but again the Whole point is that typescript is going to do a very good job of inferring such type now it's going to be a different scenario if let's say we have empty array as our initial value so let's say we have over here a list then comma and set list and we set it equal to use State an empty array notice how typescript essentially

sets list to an array but the type is equal to a never and at this point we have few options either we provide some values over here So typescript knows what the type is going to be so for example I can go with hello but keep in mind there are instances where you want the default value to be empty array so I'm not going to provide some random hello just to make typescript happy so the solution in this case is to use the generic approach where we know that US state is in a generic and

we'll just say all right yeah yeah it's an array but it's going to be an array of strings and at that Point if I'm going to go to my on click and go with my set list again my function everything is going to be awesome if I'm going to provide the strings over here I'm going to go with hello and maybe I'll also add over here world so this is going to fly because I have strings in my array however if we're going to change this around and we'll go with one and three notice typescript

is not happy because it's expecting a type string so this is how We can work with use State and typescript by default typescript is going to infer the type but it is a generic and there's going to be instances where we'll need to explicitly provide the type that we expect for the value and automatically is going to be set for the set function as well okay and up next let's cover an example where we have a list of objects now in my case I'm going to create nav links but again the actual data is Totally

up to you so I'm going to go with naab links that will be my array and I'm just going to provide some dummy data and yes I will in the beginning rely on the fact that typescript is going to be able to infert a type so in here I'm going to go with id1 then URL I'll just type some URL so essentially it's going to be some kind of string and also text will be some kind of text so some text okay let's save it then we want to copy and paste so one and two

Let's just change these values over here two and three and I don't think think I'm going to change any of the actual values I don't think it's relevant now I do want to set up the type type will be equal to a link I'll say that ID is a number okay awesome then URL will be a string and then text will be a string as well let me save it I'm not going to set it up over here this is something we're going to do later and now let's see how we can work with that

in our use state So in here I'll call this links and set links that will be my function name we're going to go with use state for now let's not set the type explicitly and now let's just provide the nav links and again typescript is super smart now it knows that essentially links has this shape and essentially we can go over here where we have our own click we can invoke set links let's say that I just want to add it to an existing array so I'm going to spread out all the current Links and

I'm going to try to add a new one if the values I provide don't match the signature you'll see that typescript will complain so if I'm going to go with id4 then URL is going to be equal to hello and then also a comma and I'm going to go with I don't know what was the last one I believe it was text right if I'm going to say hello yeah everything's awesome because this matches the signature however if I'm going to Omit text notice tapescript Immediately is going to complain because the text property is missing

so all of this is nice the problem becomes this is inferred and remember when typescript infers something it infers based on what on the original value so for example if I just go and comment this one out now notice typescript thinks that yeah links technically can be an array of objects with this shape or with this shape where text is actually missing so now if I'm Going to go here I'm actually going to be successful so this is a good use case where we want to go with our angle brackets and we want to say

yeah we have these links over here but actually the type is going to be following it's going to be an array of Link type so now typescript is going to complain it's going to say Hey listen you know whatever values you provided they don't match so we need to fix it over here and now the same deal is going To be in our on click as well we'll have to provide I believe it was our text one now lastly I just want to mention that technically we can avoid all of this debacle pretty much if

we just go with our type annotation over here and we say with the link then of course I'm not going to be able to remove the property but keep in mind there's going to be some instances where you're not going to be setting that data so again that's why it's super useful to use the angle Brackets and to explicitly let typescript know that the shape You're Expecting is going to be following and that way essentially later when you need to update it's going to be very hard to provide the wrong data and up next let's

see how we can handle events in react for starters we want to change the import so we're looking for starter and the number four events one the component is not expecting anything because we just have the bare bone setup With the div and all that and initially I just want to set up two controlled inputs one is going to be for text and one will be for email and of course in the process you'll see why we have two of them so let's do that let's go with use state that is coming from react awesome

then let's go with our text and email and yes I will rely on the fact that typescript can nicely infer the Primitive types so I'm just going to go with empty value That will be my string and the same is going to be for email let's provide the name here and let's go with email let's save this and now we want to set up two inputs inside of the form again just for better styling and all that I'll wrap this into a section then we'll provide a heading to I'll call this events example and we

want to go with our form for now no action don't care about that but we do want to add a class of form and inside of it let's go with input Type will be equal to text let's just add few classes here we're looking for form input and margin bottom is going to be set to one since I'm creating over here a controlled input I'm going to go with value and on change so let me go with value so that will be equal to my state value so I'll set it equal to my text and

then also we have unchange which essentially controls that value so we're going to go over here with unchange in Here I'm going to pass in the arrow function and remember we have access to the event and now let's go with our set text and let's pass in event. target. value so again this is typical setup for controlled inputs in react there's nothing really unique now we want to copy and paste and we want to set up one for email the difference we're not going to use the arrow function we'll actually set up the function reference

so type yep still Equal to or you know what no it's actually going to be email then the class name for input yeah that stays the same value will be email so this is coming from the state and also on change like I said there will be a reference so you know what for now I guess let's just remove it even though most likely it's going to complain then let's go with our button and Just for kicks let's go with type and let's set it equal to submit then let's add some Classes BTN and BTN

block and let's write over here submit and actually this is something that we covered previously when we worked on the tasks application during fundamentals you see in here when we provide the arrow function T script will nicely provide the value for the event as you can see it's react. change event so that's the type we get from our declaration files and it's a generic and Essentially we provide over here the element the HTML input element and this gives us a good clue what we need to provide over here in the function reference so if I'm

going to navigate up and I'm going to go with const and then handle change function and if I'm going to try to access the event typescript is going to complain and it's going to say Hey listen this is type any so for now let's not worry about it let's just go with event. target. Val just so you can See that we can access that and let's also go with our set email and we want to provide the same value so event. target. value now let me navigate to my browser so at the moment it's just

complaining because we haven't set the onchange this is our form notice I can provide the value but I cannot do the same for the email and in order to provide the correct type again we simply want to reference what we have over here so Notice this change event we want to go with event then react Dot and then we're looking for the change event and if we take a look at the docs if we take a look at the type definition we can see that change event type is a generic it's expecting a type which

is going to be the HTML element and the default value is going to be element now where we get back is Target and that will be the intersection type between The event Target and the type we provide so now let's navigate back to our index DSX and set up the angle brackets and provide the correct element so we're going to set this change event on H DML and input element so now we have access to the Target as well as the value so this is what we need to do when we set up the function

as a reference again if we just provide the inline one everything is going to be set already for us so now let me just Navigate over here and we're going to go with on change and we'll set it equal to anal change and with this in place that typescript doesn't complain and also we have the correct values in the browser so let me go over here notice I'm able to provide a value and the same is going to be with my email okay and while we're still on the topic of events let's cover submit event

and few things we need to be aware of when we work with form data API so let's say we want to handle the Form submissions we know that in react there is onsubmit and same deal we can either pass in the inline function or we can set up the reference and just like with on change event essentially if we pass here the inline typescript will right away infer the correct type if we set up the function reference then we'll need to do it basically manually for ourselves and you'll see that the form event is very

similar to change event It's also going to be a generic and we'll just need to provide the correct HTML element and I think I'll right away set up the function reference but you know what before we do that let me just mention that in between the videos I added two attributes one on each input and it was the name attribute so in here I just set the value for text and in here for email simply because we will use the form data in this video as well and in order to Access those values we need

to add those name attributes now I'm fully aware that these are controlled inputs so technically when we submit the form we can access both of these values directly but I do want to showcase some things about form data and therefore I added these attributes so if you want to follow along I suggest you do the same so like I said I'll right away set up the reference let me go here with on submit and I'm going to set it equal to Handle submit a function I don't have yet so let me go with handle submit

and what is typically the first thing we want to do that's correct we want to prevent the default so for now again I just pass in the event and since typescript has no idea what e I'm talking about it's going to complain and it's going to say that the parameter any so first let me just set up the logic prevent default and if we want to get The type again we can always use the editor as our best friend so notice essentially we have over here the HTML form element and then we're looking for form

event or you can pass in the inline and you'll get the exact event type so in here where we have the event we want to go again with react or we just import this type then we're looking for form it's a generic and in here we simply pass in HTML form and element and now we have the correct type so now we Can use all the properties and methods and typescript is going to be happy and not going to complain now as far as form data it's a nice interface to handle AE if you have

bunch of form inputs and you don't want to deal with controlled input so you don't want to set up the state variables you don't want to set up the on change as well as the value then it's pretty straightforward just set up the form add those name attributes and you're good to go once you submit the Form you'll have access to it by creating a a new instance of form data so in here we want to go const form data we want to set it equal to new form data so this is right away available

to us we don't need to do anything and then if you don't work with typescript essentially we have two options we can either go with event. current Target and notice how with typescript we can do the same typescript Is not going to complain however if we're going to go with event. Target which again we can do without typescript actually it's not going to work if we use typescript so let me just comment this one out for your reference and actually I'll use this one later on anyway but if we go here with event.target it's not

going to fly so typescript is going to complain now way around that is to basically go with HTML and then Provide form element so we just add this type assertion where yeah we're looking for event. Target but we say that Hey listen this is going to be actually a forum element now if we go with current Target typescript is smart and it can see that we already have this element over here so let me like I said come in this one out and actually use the current Target and then one more gotch about form data

potentially the values could be Null as well and we need to handle that so how does that look like well for stars let me just showcase how we can nicely access all of the values so if we go here with object dot then from entries so now we just need to provide deform data and we'll get access to all of the values so if I go with data then let me refresh and provide some values so some name and email at email.com let's see where we get back Once we click on submit notice we'll have

this object and even if we have 15 inputs we'll have a object with 15 properties with all of the values over here and as far as the gacha well let me first create a type just so we can clearly see that so let's say we have over here type person is equal equal to and then name and that will be equal to string so pretty straightforward type and then let's go here with const person let's set it equal to our person Type and we're going to go here with name and now let's get the value

now it's going to be the same for the object over here for the text property inside of this object but first I'll just showcase what happens if we use the form data. getet method which is available to us so let's say I only want to get the text value I can always go here with text equals to form data then dot get then we need to provide the name and the names need to match so let's say in this Case I want to access the text notice the value that I'm getting back either it's going

to be form data entry value type or it's going to be null now why do we care about that well if I'm I'm going to set my name equal to a text typescript is not going to be happy about that it says Hey listen potentially it can also be a null and you cannot assign this value to a string so the way around that is to again use the type Assertion where essentially we go with as and then we set it equal to string and here again I'm telling typescript that I know more about the

project where yeah maybe this can be known but in this case I know for sure that value is going to be correct because I know that these two values match and now notice how everything works and the same is going to be over here let's say if we go with data. text remember that was the property name again it's not going to Fly so in that case we again need to go with as and then string and now typescript doesn't complain so just to recap whenever we set up events in react if we provide the

inline function everything is inferred as far as the event type so there's really not that much difference between typescript or not typescript however if we set up functions as the references then we'll need to provide the correct type for the Event and there are two things things that we're looking for we first need to grab the correct event type and also we'll need to provide the correct HTML element since most of these events are actually generic now if we want to get the quick suggestion we simply can set up the prop on the element and

then provide the inline function and the moment we do that we'll get a nice suggestion with the correct event type and the correct HTML element okay and up next let's work on a small Challenge and I think it's going to be easier for me to showcase the requirements so first let's set up the import but in this case we're looking for the final folder so all this time we have been importing from the Star this is the case where we will import from the final one so let's go with Port let's come up with a

name in my case it's going to be Component from then we're going to go in the final one more specifically Challenge and then we'll set up two instances so first we're going to go with component we'll need to provide the type as far as the values notice we have two options we can either go with Advanced or basic so let's start with basic then if we have basic we'll also need to provide the name in my case I'm going to go with Susan let's close this component And let's set up another instance where we're going

to go with component then type now if we go with Advanced now we'll need to provide more values not only we'll need to provide the name which is going to be Anna also we'll need to provide the email and let's go with Anna gmail.com and if we take a look at the browser you'll see something like this so so this is going to be the look for the basic one and this is going to be the look for I believe the name Was Advanced so here's the challenge create a component that has following features if

we provide type basic we only look for name however if we provide type Advanced we also need to provide email so for example if I'll try to set up ADV Advanced without the email typescript is going to complain and also based on a type notice how we have different looks so for the basic one we have this one and then for the Advanced one we have a different look now a tiny hint as far as the classes in here in CSS you're looking for alert and alert danger and success so this CSS part is totally

irrelevant technically you can skip it for example you can just add a red text or something along those lines for one of the classes the general idea is to create a component where based on that type we are first providing different sets of props And if we don't then we get the error and also we get a different look so try to work on this Challenge and in the upcoming videos I'll show you my solution okay and first let me show you a typical react solution prior to typescript we'll also take a look at the

potential issues essentially we won't be able to complete the challenge and in the following video I'll show you a proper typescript solution so first let me comment some things Out first one the import and then these two so I still want these for your reference because they will help me to showcase the potential issues and now let me grab the import component from and now we're looking for the starter and same folder so we're looking for the challenge and we want to render that component somewhere so let's render the component let's take a look at

the browser so now we have react and typescript Challenge and initially our approach could look something like this where we know that we need this type prop we also know that we need name and email and we know that based on that type we will display one set of classes and if it's the opposite then we'll display a different set so let's navigate first to starter and then index I guess we can right away set up the type over here or interface that is totally up to you I'm going to go with type profile card

props Three properties so we start here with type just because I enjoy it so much I'm just going to go with the literal type so I'm going to say yeah the possible values here are basic or they're going to be Advanced then there's going to be a name which is a string and also we'll set up the email which also will be a string cool cool cool and awesome start then in the component I'll say yeah there's a prop subject and actually it's going to Have this type so profile card props okay cool then let's

gather all of these things so we're looking for type name and email and that is equal to our props typescript is complaining because we're not using these elements and you know what before we set up the return let me just set up the logic for the class so essentially if the type is basic I want to use the success one and if not I'm going to use the danger again just to go back notice in the index we have this Class for alert so this is just going to add the padding and or radius and

all that and then based on this class so either alert danger or alert success we'll just have the background color and color and yes of course we can set it up over here in the return but I'll do it above since in my opinion it's going to be easier to see what we're doing so alert type is going to be equal to type then either basic or Advanced that is totally up to you and I'm going to go With success since that's the class name and yes they do need to match and then based on

this one I'll set up my class name so I'm going to go with const class name and we'll set it equal to alert so that's my main class and then alert iph and now let's access the alert type so hopefully it's clear that if it's going to be equal to Advanced essentially not basic then the value is going to be danger if going to be equal to basic then essentially the value will be Success and as a result our card is going to look different so in here we want to go with article and then

let's add a class name so let's access our variable over here or constant I guess more properly and then let's just access both of the props so the first heading two is going to be user so we're going to go user is equal to our name prop now when it comes to email it's going to be a little bit different simply because we only want to Display the email if the type is equal to Advanced correct so in my case I will only display the email if it's provided now we can set up turn operator

or we can use the good old hand operator and I think I'll stick with that one because in my opinion in this case it doesn't really make a difference so let's look for heading two then let's set it equal to email and now we just want to access the email prop okay good we have everything in place now let's Navigate back and let's provide these values and you'll notice something interesting we will only be able to display the advanced component let me showcase why so let me go here with type we're looking for advanced then

let's go with name again doesn't really matter what we provide so I'm going to go with Susan and let me also provide the email over here let me go with Susan at susan. let me save it everything looks Correct but notice if I'm going to go here with the basic and just omit the email not going to be successful why well let's take a look at our type typescript is expecting this email one so if I'll copy and paste over here and if I'll say yeah the type is going to be basic and actually I

don't want to provide the email typescript is going to complain it's going to say Hey listen I still need this email and technically you can Make an argument okay well I could provide email over here and just provide empty string and even though it kind of works you have to agree that this is somewhat clunky my goal is to have a component where if I provide this type Advanced I am looking for email and if it's actually type basic I'm not even looking for this prop that's my goal now you could make an argument that

We can go back and make this one optional over here and yeah technically it works for the basic one right now but what about the advanced one so now this technically is optional as well so if I remove it typescript doesn't complain but if I navigate back I'm not showing the email in my Advanced user card as you can see in both of the cases we have issues we don't have the setup that we're looking for and therefore in the following video we will Cover a proper typescript solution and since I know that I'm going

to get this question a lot let me just answer it here no adding following logic to our component is not going to solve the issue so yes definitely not only we can check for email we can also check for type and set up the tary operator where if the type is equal to advaned then we display the heading to with an email and if not we go with null but notice our component so For example if I have the advanced one yes it nicely requires the email and once I provide everything is awesome but it's

going to be the same thing with our basic one so since the prop is present I need to provide it and yes I can still provide the empty string but remember that's not my solution that's not what I'm looking for I don't want to randomly provide these empty strings and if we change this one around to optional property same deal Now if I go to app DSX and remove both of these values over here notice essentially the first card is correct but the second one has empty email value so yes even though this one looks

like a better solution essentially it has the same issues as the one that we used before where we checked for the email all right and once we have covered the issues with our initial setup now let's complete the challenge By constructing a proper typescript solution for starters I do want to remove these ones so I want to start from the scratch and essentially in here we want to create two types so our component actually is going to have two types so the first one is going to be basic one and second one will be Advanced

so we're not going to use this literal type over here we're actually going to hardcode it equal to a basic and since there's going to be two types I'll also name this one basic profile card props now let me copy this one and in here we want to remove the email and it's not going to be optional anymore so if the type is Advanced if we'll have this type then we'll look for all of these properties so type is going to be equal to Advanced name String and email string now for the basic one we'll

only have type basic and name type is going to be a string now where we have the component I'll actually create Another type I'll say profile card props and this will be a union type with basic profile card props and the advanced profile card props and in here we're actually going to set up to return based on a type so for starters what two properties we can always access well it's the type as well as the name correct because keep in mind we only have access to email if the type is equal to Advanced profile

card props so therefore we're going to look for two Properties that are always going to be there so name and type and now essentially we want to set up our return where we're going to go with well if type is equal to basic one of the potential values then we'll have one set of elements if not well then we'll return prey much the other card so let's go here with the return we're looking for the article so in this case we don't need to set up that logic to add classes based on type we simply

we want to go With class name alert alert success and then inside of the article we're just going to go with heading two user and we'll access the name so let's set it up over here and then if the type is Advanced basically our second option you'll see that we have access to props that email so let's go here with the return and as a sign you can actually structure it here as well so in here you can go with email and actually Typescript is not going to complain and it sees that email is actually

a string simply because if the type is basic okay we have one return so it knows that at this point the email has to be present now in my case I will use the props that email again doesn't really matter which way you pick so we want to go over here with article then let's add the classes now we just want to provide the different values so it's not going to be success it's actually going to be a Danger one and then inside of the article we're going to go with heading two we're looking for

user then we want to access the name just like before and we'll also add the heading two with email and then we'll grab the props that email so now let's navigate to app and if everything is correct if we type basic we only need to provide the name and we'll get the correct look however if we go with Advanced we'll need to provide both of those values so if we go With component type notice we have basic or advanc so those are our two options if we go with basic we only need to provide the

name so now we have property name is missing okay good it's provided and notice how we don't need to provide an email here with an empty value no that script is Happy everything's fine we have correctly a basic user card now if we're going to go here with component type and we'll set up the advanced now it's looking for name and email so one By one let's set it up we have name again let's go with our Anna and email and let's just provide the value Yep looks about right hopefully everyone enjoyed the challenge and

we can move on to the next topic all right and up next let's see how we can use typescript with context API before we begin please keep in mind that we will write bunch of the boiler plate code meaning don't get overwhelmed by the amount of code since you'll be able to take it from Project To project and second at this point in time context API is not as popular anymore so if you don't find these examples useful don't stress about it in fact if you don't use the context API at all in your apps

feel free to skip the following videos for context API I did prepare two examples the very basic one with just one state value and a more complex one with more bells and with just so we can cover all the topics step by step so let's start just like with The previous examples where we want to import from the star in this case we're looking for the context one and in this case we'll create two files so one is going to be for context and essentially in the index one we'll access the context now if you

work with context API before you know that technically we can wrap the app component in context we can also set it up in the main DSX so there's tons of options but in this case I just decided to set up Everything in the context just so it's easier add it to the final one and leave it for your reference so don't be surprised if in this example we'll have two files so for stars we're looking for component so this is coming from where we're going to final and then we want to look for context again

let's render it somewhere here on the screen the component one and let's navigate to our 06 context one let's create a new one and the name is going to be context DSX In here we need two Imports and you know what actually I'll set up the third one as well since we'll use it in the following example so we're looking for two functions create context one and also use context since we'll set up the hook as well and then lastly in the following example we'll use the use state so I'll add that import here as

well right away and for now let's just create a new context now as far as the naming you'll notice that I keep using This theme and it's simply because the following example is going to be for the theme and I prettyy much want to use the same names so we'll just build on this example that way we don't need to type too much so theme provider and let's call this context let's invoke create context now this is going to be generic and the difference between normal react and react with typescript is that we'll have to

provide the default value so in this case I'm Just going to go with undefined let's imagine that we don't know what the context is going to be then we want to set up a component which is actually going to wrap all of our components and provide the context so we're going to go here with theme provider and if you're familiar with the context API you know that this component normally is looking for children so it's looking for the Component since it's a context provider so in here we'll definitely need children and we know already that

as far as the type we can either use the type provided by react or we can just go with react and then do and react node somewhere here now as far as the logic here's where we want to go with return and we'll just set up one value so we're looking for theme provider context it has the provider component so we go here with the provider and then we want to Wrap the children we'll go here with the children and notice how typescript is complaining because we do need to provide the value now once we

provide a value you'll notice that typescript is not going to be happy with create context setup so for now let me just showcase the basic example let's say I provide over here the hello and the moment we do that notice we right away get the red squiggly line and the error message says well you cannot assign String to undefined so this was okay initially when we were creating the context we could say all right so it's going to be undefined but now typescript is complaining and in order to fix it create context is a generic

and in here we'll use the type Union first we'll provide what is the eventual value which will be a string here and we'll also go over here and say that it can be undefined so this will be our initial value and then this will be our eventual Value So eventually we'll have this value equal to string and that's why we have over here this type I'm purposely keeping still this undefined because it's going to be super useful once we set up our custom hook so even before we wrap any of our components I also want

to set up a hook called use theme again I'm just going to keep these names since we will use them in our following example as well and in here we want to invoke use context which is looking for The theme provider context essentially any context so let's set up this one context is equal to use context and we're going to go with theme provider context and now if the context is undefined I actually want to throw the error now when the context is going to to be undefined because at the moment we can clearly see

that actually we do have a string well this context could be undefined if let's say we're trying to access this use theme but the component Where we're using the hook is not wrapped in the theme provider context and in my opinion it's a good setup because that way we immediately can see that there is an error and you'll see what I'm talking about in a second if this is confusing so I'm going to go here with context and if it's actually equal to Define I'm going to throw the eror and if everything is correct then

we'll return the context so say here return context but before that we'll go Throw new and error and let's just provide some kind of error message my case I'm going to go with use theme must be used within the theme provider let me save it over here and now let's navigate to our index one let's import both things the hook as well as the theme provider and now let's set up the parent component so we're not going to export this one as default actually there's going to be a parent component where we'll have our Theme

provider so first let's start here with use theme okay yeah that's coming from the context and I also want to grab the theme provider and then let's set up the parent comp component again this is just to demonstrate how we can wrap components please keep in mind that typically you'll do that in the app or in the main DSX so we go here with parent component that's our function basically our component and as far as default one I actually want to export the parent component not the component and then in here let's go with theme

provider and then inside of it we want to place the component essentially this one and once we nicely wrap the component we can actually go over here and I can go with context go with use theme so that's my hook this is how I can access the values and basically if we log over here and provide the context if everything is correct we should see That value hello in the console so now let's navigate to the browser and H this looks interesting so it looks like I'm grabbing the file from the final one so let

me navigate back yeah we're not looking for final my bad so we're looking for the starter in this case and once we do that notice the value is hello and essentially it matches whatever we pass over over here in the value prop now of course normally this Is going to be more complex for example you could have here an object and name is going to be equal to something let's go with hello same deal now I'll just need to go back over here where we create the context and just provide that eventual value so again

this is undefined this is the default one and in here I can say that yeah there's going to be an object and the property is actually going to be string so notice now if we navigate to the console we'll See this value instead and the reason why this line of code is so useful is because if we navigate back and for example we forget to wrap everything in our theme provider basically let's say that we are trying to access our theme context without wrapping the theme provider and I'm just going to simulate that by returning

a component notice how immediately I'm going to have the error in a console and not only that it's going to be super helpful where it's Going to say hey us te must be used within the theme provider so this is going to give me a super good clue what is wrong with my current code and of course now I just need to go back and wrap everything nicely in the theme provider so let me remove move this one and now again we're good to go the main deal over here when we use tapescript we will

need to provide what is the eventual type for our value prop over here and we can simply say that yeah Initially it's going to be undefined and then eventually whatever we set up in a value we'll need to provide the type over here and since the theme provider is always going to be looking for children so is going to be looking for components therefore we'll need to provide a type for a children prop as well all right and now let's work on more complex example please keep in mind that this code is going to be

available in the Readme just in case you ever want to reference and also in the final one you'll find this basic context and basic index TSX and essentially this is the code that we set up in the previous video because in my case I will modify my existing code right now so for starters I'm going to go here with type and theme and I'm going to go with literal types so we'll provide light uh we'll also provide dark and We're going to go with system and essentially we're building here a theme context provider so let's

say in our application we want to toggle between the light and a dark theme and we want to do it globally therefore we're going to set up the context provider now let me navigate to theme provider and essentially I'll set up over here a use state so I'm going to go with use State and we know that it's a generic and I'll say Yeah the value is going to be string but actually it's going to be type of theme and eventually we will provide the default value let's not worry about it right now and let's

just go with theme and as I not I do need to provide the square brackets and we're looking for theme and also a set theme so we have these values over here and as far as what I want to pass down instead of this name hello I'll actually go with theme and also a set theme so Now of course typescript is going to complain because this doesn't match whatever I have have here in the create context so let's fix that let's set up a type for our state which actually matches whatever I have in the

value so we're going to go here with type theme provider and let's say State props State that's totally up to you I'm going to go with theme and that is equal to a theme over here so theme type and also a set theme and essentially we'll just say That that it's a function which is looking for a theme and type will be equal to a theme and it doesn't return anything so we simply provide void over here and instead of hardcoding the object with the name property which is a type string we're going to go

with theme provider State now in this case it's complaining because it says well theme can also be undefined and we have multiple ways how we can fix that either we can provide The value like so so I can just say yeah the default value is going to be dark light or whatever or in my scenario I'm actually going to add one more property in the props and therefore I will set up a separate type so I'm going to go type theme provider and let's call this props and we'll look for two things first one is

going to be children so this one is the same so react Dot and we're looking for react node and also I want to set up the Default theme so let me add over here a property default theme I will set it optional and I'll actually set it equal to type theme so it's going to be optional but it needs to match one of these values so light dark or system one and where I have the theme provider I'll actually remove the hardcoded one and add theme provider props and in here let's go with default theme

and I will add some default value which is actually going to be a system and now at the very End I'll go over here and provide default theme and pretty much this concludes our theme setup so as you can see once we understand how we can set up a basic context with just just one value it's pretty easy to set up a more complex one so now we just want to navigate to index DSX and we want to change our component around so this one will stay the same and of course if you want to

test it out you can provide over here the default value and all that That's definitely an option but in my case I just want to grab the context with a theme and I also want to set up a button which I'll use to change the theme so in here right after this react and typescript so I guess I'm going to leave that I want to set up a button and remember now in our context we have multiple things not only we have theme system but we also have this set theme function so I want to

try to invoke the set theme on a button click just so I Can see whether my functionality works so let's add over here a value I guess I'm going to go with toggle theme and then also let's add the onclick so we're going to go over here with onclick let's provide the arrow function and I'm just going to check what is the value if the value is equal to dark then I'll set it back to system and if it's actually a system one then I'm going to go with theme dark so let's go here with

context Dot and we're looking for theme then we Want to check the value notice how we right away get our nice suggestions I'm going to say if it's equal to dark then I want to set it to system context then set theme and we provide the system one then we return like so now if it's already a system one then we just want to go with context set theme and we provide over here the value of dark and you know what I also want to add some classes here so let's go with BTN and BT

and Center let's save it now I have my Button and pretty much every time I'll click on it I'll change this value now we haven't set up any CSS so nothing is going to change as far as the background but notice as I'm clicking I'm actually changing the value in a state so that's how we can set up context API with typescript okay and up next let's see how we can use typescript with use reducer hook and just like context yes it's not as popular anymore since we have options like Redux toolkit and Zoo Stand

but you still might encounter it from time to time and therefore I decided to add it to the course just like before we want to start in app DSX hopefully this time I'm importing from the correct folder so let me go with star and now I want to go to Red producers okay let's save it let's see okay at the moment I have react and typescript reducers looks about right and this is the case where I do suggest navigating to a readme and Basically we want to get some star code because I really don't think

that it's going to be beneficial to type this together so essentially go to 07 reducers and you're looking for this function so this is what you want to set up in your comp component not the app DSX make sure you navigate to the starter 07 and we're looking for the index one this is what you want to paste it over here and essentially this is what you'll see in the browser so we'll Have increment decrement and reset so at the moment nothing is happening we just have some console logs over here and also we have

this set status to active and inactive so basically our state is going to consider consist of two things so there's going to be some counter value and also we'll change the string value of active and inactive just to Showcase how it works and our goal essentially is to set up the US reducer hook and also set up the reducer initial State and all that cool stuff so now let's navigate back to the component we want to go with const and this is returning two things State and also a dispatch and we set it equal to

use reducer so we import that and it's going to look for counter reducer so some kind of reducer function and also initial state so first let me just provide these values please don't import them from the final one we'll just go here with counter reducer and initial state so I'll set up both of these values now of course we don't have them in this file this is why we want to go to the folder and we want to create a new one so in this case I'm going to call this reducer TS again if we

have a component file yes we go with DSX but if it's just going to be a Javascript file then we just go with TS so let's set up reducer yes and let's start with the initial state so this is something we're going to export we're going to go with initial state in A second we'll set up the type for now let's just go with count which is equal to to a zero and then status the initial value will be pending but this is where we'll change it to active and inactive so now let's set up

the type for this one so export type counter State and in here we have two values we have count which is type number and also we have a status which is equal to a string so now we just want to go here where we have the initial State and set up our type so Counter State okay awesome so we're exporting that I guess we can now go over here with import and we are looking for our initial State and this is coming from the same folder so we just look for reducer so now we just

need to set up the counter reducer and for now it's simply going to be a function and if you know the reducer so it's looking for the state as well as the action so what is the state and what are we going to do with that State and for now we're just Going to return that state so we're going to go here with export then const counter reducer so that will be the same name and we'll set it equal to our function our Arrow function as far as the parameters this is what we're looking for

the state which is actually equal to a counter State and action and for now let's just set it equal to any of course as we're working on a functionality we're going to fix that and and as far as what we Want to return from the function we're going to go with counter State and then inside we're going to go with a return and state so pretty much for now we're just going to grab the state and we'll return State as it is so then back in the index the SX not only we have initial state

but we also have the counter reducer so in the upcoming videos we can start working on the functionality and once we have setup in place I guess Let's start by displaying the value from the state so at the moment we're hardcoding the count as well as the status but keep in mind that in here we already have some initial values so let's just access those count is going to be equal to the state that we're getting back and notice how we have these two properties and in this case I'm looking for the count and the

same is going to be for the active one instead of Ive actually is going to Be equal to a state and then the status let's save it notice now we have count and also we have the pending one since that's my default value and I think I'm going to start with these ones so we want to set up few types one for increment decrement as well as the reset one and we're going to start by setting up a type and I'm going to call this update count action so that will will be my type over

here so let's set it up so type update count action and here I'm Going to go with the literal one so either it's going to be increment decrement or reset so type increment then Union we also can have decrement and also we can reset the value over here and now I'm going to create another type since there will be one for the status one but technically I mean if I would only have the count over here so if I wouldn't have functionality to change the status I can simply go to update count action and set

it equal to My action so that will be my type but since there's going to be more logic I'm going to go with type and then counter action and that one will be for now equal to update count action so now where we have the action in the counter reducer we want to go with counter action and now let's set up our logic where inside of the counter reducer instead of returning the state we're going to go switch statement and we want to go with action and type notice again We have these potential three values

and then based on the actual value we'll do some logic over here so first let's set up the default one and and let's say that by default we'll just return a state we say State over here and then as far as the cases let's go with increment first so that's going to be our first case and then we want to go with return and we want to pretty much spread out the current state so we only Want to update and then count is going to be equal to State DOT and count Plus one and prettyy

much we want to do the same thing for rest of them so the second one will be decrement case decrement as you can see we only have two options at the moment so decrement and we just want to change this around where instead of plus one we're going to go with minus one and then lastly we also have the reset case reset and if that's the case just want to grab this State and basically set the count equal to zero now in order to invoke we need to use the dispatch and we need to pass

in the correct type so instead of just logging it over here we want to go dispatch and then we need to provide what is going to be the type and as far as the increment one it's over here and we want to repeat for decrement the same same dispatch type and then decrement and then at the very end we also have the Recet one so as you can see the biggest difference is that now we have a clear control over the action type so usually this was the biggest pain points where you could provide some

random value once we use the typescript it's actually not the case anymore we clearly have a list of values that we can provide and we're not going to provide anything random so notice now I navigate over here to the browser and I have these three working buttons okay and let's also see how we Can handle the action where we have the payload so with our counter pretty much we're only handling the type correct and then based on that we control the state value but we can also pass in the payload and for starters let's set

up a type for that so we're going to go with set status and let's call this action as well in here there's also going to be a type so this property we definitely need to provide and as far as the value I'm Going to go with set status and then when it comes to payload I'm just going to go with few options and again I'm going to use my literal type so I'm going to go with active and also it's going to be equal to inactive then we want to navigate to our reducer and let's

set up the case where we're going to go with set and status and as I note before we do that actually we need to add this set status action to our counter action to our Counter action type because this is how we're checking actually in the reducer so let's go with set status action and now notice how we're going to get some nice suggestions so if I go over here with case and then set status now we just need to decide what are we going to do and in my case I'm going to return state

so that doesn't change and as note there is a error over here and now we just need to update the I believe what was The value the status one correct so in the state there is a status one and we're just going to set it equal to action and payload so we'll set it equal to one of these strings over here so now we want to navigate to index DSX and where we have the console logs to active and inactive same deal we just want to dispatch it type going to be equal to and we

want to go with set status and then we will need to provide the payload as well so in here let's go With payload and this will be equal to active one I guess that's going to be the first button and now we want to copy and based and just change these values around so instead of active we're going to go with inactive yep if I provide the correct value everything is awesome so now let's just navigate to the browser and not only we can control the counter but we can also change these values so we

can also pass the payload and at the very End let's also not forget about the type never so let me navigate back to the reducer and we can see over here that by default we return the state which technically is okay but just keep in mind we can add some kind of type over here and this is going to fail silently so for example if I'm going to add another type over here I'm going to go with something random if I'm going to dispatch it I mean it's going to go through my cases and essentially

I'll Just get back to state so the problem with this one is that it's very hard to catch this error and therefore in here where we have the default actually we want to add some logic where I'm going to go with con on handled action type remember type is never and we're going to set it equal to an action and now notice how immediately it complains because effectively there is another type the moment actually it's random one over here and unless we handle it so Unless I go over here case and then and random and

then decide what I want to do for example return and then dot dot dot State unless I do that there will be a error and what's really cool that it's actually at buil time so not at runtime so now let me remove this example over here and let's just complete by throwing a error so let me go with throw new error and let's provide some error message and once we have this one in place now we can remove it and not only We'll be able to catch the error but also if for some reason we

add type and we dispatch it there's going to be a super helpful error in the console which right away will lead back to the counter reducer all right and up next let's see how we can fetch data in react with typescript and we'll actually look at two options the good old use effect and fetch API and my current favorite one the react query with axio please keep in mind that this section Will only make sense if you watch the fetch data fundamentals part since I'm not going to repeat things like Zod setup and the actual

need for types just like in the previous examples we're going to start in the app TSX where we're looking for component and more specifically the star and then 08 fetch data and then if we take a look at the browser this is what we should see we'll also use the same URL like in fundamentals so basically will fetch the Same doors from my server and therefore I suggest just navigating to read me you're looking for 08 fetch data and just grab these two lines of code so we'll utilize these hooks in a second and then

also here's the URL we're going to use so grab it over here then we're going to navigate back and I guess let's just start setting up the state values now eventually we'll set up the tors but at the end of this video I'll show you why we're not doing that right now Why essentially we need a type first and then let's set up two more State values we're going to have one for is loading and then also set is loading so this is going to be true while we're fetching we're going to go with use

State and we can provide angle brackets here it's definitely an option or we can just type over here the default value and then typescript is going to be super smart and it's going to figure out that essentially this will be a Boolean so I Guess let's just go with that one and as far as my default value it will be set equal to false then we also want to go with is error and we're going to set it to set is error so that will be our set function and here we're going to provide the

angle brackets and there's going to be a union type so either it's going to be a string so if there's error I'm actually going to use the error message or or it will be null and null will be my default Value so I'll just provide null over here then the good old use effect and we want to set up the fetch function inside of it so let's go with our use effect let's provide the Callback function we're just going to invoke it when the component mounts and inside of it let's set up our fetch data

which will be my the same function so fetch data and let's set it equal to a sync and as far as the functionality since it's a sync we want to nicely wrap Everything in the try and catch and also we want to start by setting is loading is true so while we're fetching we'll set it equal to true and then at the end we'll set it essentially equal to false and you know what actually in here let's go with finally so here we'll just set it set is loading and equal to false so whether we're

getting the error or we're successful doesn't really matter at the end of the day we'll always set it back to false now in the tri block this is Where we want to construct our fetch which again we can right away start using because we have access to it so we're going to go here with await fetch then we provide the URL then fetch API has that Quirk where effectively we do want to catch the 404 errors as well so I'm just going to check for that okay properly so if I have some kind of error

I actually want to throw it over here so throw new error which of course will right away lead to a catch block and Then as far as the message I'm just going to say failed to fetch doers and after this condition I want to set up my raw data since eventually we'll set up Zod as well and for now let's just go to response. Json and then let's log this data so we're not going to set anything in the state and when it comes to a catch let's again construct that message so we're going to

go with message and this one is equal to error and we're going to check Whether error is the instance off and error and if that's the case then we're going to go with error and message or there was an error so something generic and we also want to go here with set is eror and we want to provide our message so that should do it we just want to invoke it over here and we want to set up three returns so at the moment we have one so basically this is our standard return and now

let's check for loading let's check for is Error and then let's see whether we actually are getting data and then we'll discuss why we want to set up the tours in the following video so let's start over here we're going to go with if and then is loading okay good and then we're going to go with heading three loading and then d da D okay good then we also want to do the same thing pretty much for error so now we're checking for this value and we're going to go with error And actually we can

display the message as well just in case there is any so I'm going to go with error and let's access the error message is error and then I'll just leave this one for now So eventually we'll iterate over that doors so now let me navigate to the browser again if everything is correct we should see those doors and I can see the array of Five Doors so that works should also have that loading for a split second and Let's say if we're going to mess with the URL if I'm going to provide the wrong URL

notice now I have actually error failed to fetch T and now again let's reiterate why do we need a type so let's try to set up do state value at the moment we don't have the type so essentially we'll just provide Mt then let's try to set it over here in the fetch data and then let's iterate over and see where the issue is going to be so for STS we want to go Over here with const tours set tours okay beautiful then we want to go with use State and remember if we're just going

to provide over here Mt aray which will be default value notice now T is actually set equal to never which means that yeah I can go over here and I can go with set tours I can provide broad a okay beautiful everything is awesome and then let's say right after the react typescript we're going to go with doors then map so we're iterating over and Then as far as the function well let's access the tour correct okay good and then we're going to go with some kind of heading two we provide hello we can even

see those hellos in the browser okay beautiful but what if we're going to try something like this let's say I want to access one of the properties I'm going to go with the name one so now if we go here and say tour and that name this is not going going to fly typescript is going to say well you cannot access the Name property on type never and this is why we do again need to set up D type and in our case since we already know how to work with Zod and since we're going

to use Zod to evaluate our data at run time anyway this is going to be our approach okay so now let's set up our type and we'll do that with the help of Zod Library since that way we can also check the data at runtime and this is totally up to you you can set up the file name utls or Something along those lines I think in my case I'm just going to go with types now as a side note also in this file we will set up a fetch function with the axio so that

is coming up so basically we'll just Jam bunch of the things normally in the bigger project you would separate them but I don't think there is any need so we're looking for Zod Library which again is already installed if you're using the star if not then just please install the Library then let's construct that door schema which will also then infer to be our door so let's export that since we also want to use that one in the inex so we'll go with export then con store and then we're looking for schema over here so

this one will be equal to Z do object so this is what we're constructing and I believe I had five properties in there so all of them were string that's for sure so we're going to go over here then let's copy and paste And I believe it's one too many by the way so let me remove this one and then we have one for name also we want to set up over here image then same deal info and at the very end we'll have the price one I'm missing comma so let me do that as

well and now let's construct our type this is something also we're going to export so let's go here with export type and then tour and that is equal to Z infer so now we just infer a type which is a generic and We're just going to go type off and then to our schema so now we have both we have our schema and we also have our type so now let's navigate back over here and we want to import both of those things we want to grab the tour as well as the tour schema so

let me set her up I think I'm going to type over here type tour just to make it more explicit what we're doing so we want to grab the scheme as well and then this one is coming from The types let's save this and now let's just start using the type and I guess right away also the tour schema so here where I have the hug state for tours I actually want to go with tour and the array so essentially I'm telling typescript that yeah this is an array but eventually it will be an array

off TOS then we're going to keep on moving and where we have the raw data same deal I'm going to go a tour and I'll set it as an array then we actually want to run Right now our tour schema remember there is an array method and again I want to save pars it so essentially I want to throw the a myself and it's going to be nicely caught over here so for now I think I can remove both of these ones over here we won't use them and essentially we want to get that result

so let's go to the result then T schema array let's invoke this and then we're going to go save bars and and we're looking for raw data and then as far as The result remember we're checking for the success property and essentially if the data is not present then we're just going to throw the error so we're going to go if and result success that's not the case then I mean you know what I can actually log it so let's go the result error and message over here and also we want to throw our own

error so Let's go throw new error and again let's do the same thing we'll go with failed to parse and tours and then at the very very end we want to go here with set tours and we want to pass in result. data so if we're successful if we bypass this condition pretty much we're good to go and I think at this point essentially we can just navigate to to our return and we can just set up the proper return so in here let's go with the heading two I'm going to add some class so

I'm going to go with margin bottom and set it equal to one then we're going to go here with doors okay and then let's iterate over so we have tours over here we want to call the map and now once I type the tour it will nicely be my object everything starting with ID all the way to a price and again this is something that doesn't stop to amaze me so we're going to go over here with return then we want to set up the paragraph again We're not going to really work on Amazing result

in the browser for now we just want to grab the T ID we want to add some classes over here so class name and let's go with another margin bottom one and then let's access the door Dot and we're looking for the name and again if everything is correct this is what we should see in the browser yep everything is awesome and if we go over here to the types and let's say I'm going to add a property I'm going to say that I'm Looking for something and that will be a string and let's invoke

that check it out first I have over here a error message in the console and we can also see that over here now million doll question do you always need to add Zod when you're fetching data and to tell honestly most likely that's not something that you're going to see that often for the most part you're just going to rely on the fact that yeah the API is supposed to return some kind of Type but it does come in handy when you definitely definitely want to check for that particular value so this is how we

can essentially Fetch with react and typescript with the good old use effect and fetch API and now let's see how we can accomplish the same thing with less lines of code and essentially no headache and we're going to do that with the help of axios and react query and if you're not familiar with either of these libraries please utilize the library Docs or some other online resource since our main focus is going to be on typescript and I actually want to start by constructing fetch tours with axios again normally you would set this up in

a separate file but in this case I'm just going to do it right here in the types where I want to install or you know what actually it's already available in the starter we simply want to import the axios from axio library which is an awesome HTTP library and Effectively we want to construct right now the fetch doors and you know what I also so I'm going to grab right away this URL and I'll actually remove it from the file since we'll set up use Query over here as a side note as always you can

find the code from previous lessons in the read me so let me go over here this is going to be my URL and essentially we want to go with export const fetch doors it will be a sync and as far as what We're returning since it's a sync function we want to go with promise and then we'll set up our tour array and then when it comes to functionality we want to use axos and we want to stick a weight in front of it so let's go with const response and that is equal to a

wait then axos doget remember this is actually a generic and therefore in here we pass in door and array so an array of doors and effectively in this response Inside of the data property we'll get back our array but it will be nicely already set as type array off doors hopefully that is clear and we actually did cover that during the tutorial part now let me double check over here it looks like I have a syntax bug yep now everything's correct so we have response beautiful then we'll do the same thing like in the previous

video where essentially I just want to check using Zod and since it's Pretty much the same code let me again just take it out and set it up over here so we still use the result to or schema in this case we're not passing a raw data we actually go with response. data again that's where the array is going to be located and then from this function we want to return and we're looking for result. data so since we have multiple libraries yes we're pretty much passing this array from one to another so first we

use Axios and again just to demonstrate that basically if we go over here with type definition you'll notice somewhere here get see over here it's a generic and essentially it has this axio response and then if you take a look at the xos response one notice this data it's a generic type correct so whatever we pass in this is what we're going to get back and once we have this function in place now let's navigate I guess actually to the main DSX because we want to wrap everything in the query client provider so we want

to install react query Library you can also install Dev tools they have as some Dev tools but in this case we're not going to do that and in here we want import the query client as well as query client provider first we want to set up a new instance like so and as a sign not something I want to mention react query is actually very Good at inferring the types so as far as types is concerned we actually don't need to do much as long as we set up a proper return type here in the

function basically what we are returning pretty much we're good to go so in here we want to go with new query client let's invoke this and then we want to wrap our app inside of the render so let me set up my query client provider we're looking for client that's the prop and we'll set it equal to a Query client then let's wrap the app and now let's navigate to index DSX and like I said I'll pretty much start everything from scratch and if you want the code from the previous lesson please just utilize the

read me in here we're looking for fetch dos a function we just set up it's actually located in the types okay and we also want to grab this hook which we get from react query called EU query again this is coming from and in this case we have this stand Stack and react query so we have both of these Imports now let's set up our our component and let's also set up the export since I know that I'm going to forget to do that let's export the component as default and for starters let's invoke use

Query so we're going to get bunch of the things back and we want to set it equal to use Query so notice we don't need to set up our loading error or any of that stuff and I'm not even talking about the use effect Essentially we just invoke the use Query and and we're good to go it's looking for two things it's looking for a query key since we'll nicely be able to invalidate those queries later something we're not going to do but just telling you it is an option so essentially you just provide some

kind of string over here so now this query we will reference with the name of doors just in case we ever want to do something with the query like for Example invalidate and also we want to set up a query function now this query function has one rule and one rule only it needs to return a promise that's it that's all we need to do now if we navigate to types what is this function doing it's a sync what does that return it returns a promise and like I said react quer is awesome at inferring

the type so if we set up properly over here that I'm going to be returning an array of Tours react query is going to figure That out so in here since I'm not not passing anything in Fetch dos any kind of argument I simply can set up the reference now what are we getting back over here we get back is pending so this is while we're loading we get back is error if there is any we also get the actual error object just in case we want to get the message and just like axios in

here we have this data one and inside of that data we'll have that array of Tours now since I want to use pretty Much the same name I'm just going to give it an alas of Tours okay good and with this in place now let's set up our return so one by one uh first we're going to go with is spending so check that one if that's the case again same deal we're going to go with heading two or heading three and we'll go with loading then we're going to go with is error so if

we have the error actually I do want to access the error message so let's go Here with error and we'll set it equal to error object and in there we have a message property and now let's iterate over the tours and same deal essentially we just want to showcase the tour name in some kind of paragraph so let me set up the return we're looking for div inside of the div we're going to go with heading two let's add a class name margin bottom set it equal to one that will be equal to tours and

then we want to iterate over So let's call map then each and every tour okay good and then we want to return from the function and I'm going to go with my paragraph let's add a class name of margin bottom one and also let's add a key and we'll set it equal to tour and then ID and then inside of it let's render the door. name and if everything is correct again the result is going to be the same but like I said way less headache way less State Values and pretty much everything is already

inferred so we only need to set up a use Query we only need to set up fetch doors and pretty much we're good to go okay and now let's cover Redux toolkit setup which is a good option if you have a global State as side note if you're not a fan of Redux toit a Nifty alternative is Library called zustand I believe that's how it's pronounced which offers pretty much the same functionality but with less Overhand and the code is also less clunky I have to admit but since at least at this point in time

you will encounter Redux to K it more often I settled on rtk as far as typescript Redux toolkit just like react query also nicely infers bunch of the things so it's actually less work than for example use reducer but I'm not going to lie the setup so the initial setup to add Redux toolkit to our application with typescript is somewhat of a pain now the Good news it's a boilerplate setup so we can take it from Project to project so most likely you'll only need to write it once and in fact we will do a

setup in the following video so for now we'll just prepare everything we'll actually create our first slice and then in the following video we'll complete the boiler plate setup for Nots we want to go to app DSX we're looking for starter rtk the component if everything is correct this is what we should see on The screen and since we're shooting for the same functionality as in use reducer I suggest navigating to read me and just grab this code so again this is just going to set up some buttons which we will use later to control

our state values so grab everything in here as far as the component is concerned you want to navigate back over here paste it and again you should have five buttons and pretty much every time You click on a button there's going to be some kind of console log and then we want to set up a slice now slice in Redux tokit essentially is just a piece of functionality so let's say in your application you're handling the user so the log out login whatever all kinds of things well you'll set that one up in a slice

let's say you have a theme you'll create a slice for that and hopefully you see where I'm going with this now in our case we'll just dump everything in One so I'll say cter slice and we're looking for TS since we're not creating a react component then we want to import two things so create slice is going to create that slice for us it's a function coming from Redux toolkit and second one will be payload action which actually is a type and this is something we're going to use towards the end of the video so

now let's go with create and Slash okay that's what we want to import over here good then let's also grab that Payload but this is actually a type so payload action and yep it's coming from Redux toket beautiful now we will set up some types in a second let's start by creating that slice so counter slice and this will be equal to create slice and second will provide some values before I forget I do right away want to export and actually we export the reducer function so we go here with default counter slice and then

dot Reducer so this is something we're going to use when we set up the store so think of store as pretty much your entire State and then the slice well this will be that one functionality again in our case pretty much that will be the only functionality but in bigger applications this is where you'll set this one thing and as far as the crate slice it's looking for a few things it needs to have the initial State and we'll also right away set up those reducers so you Know what let's just start setting everything up

if you remember when it comes to the state we have count and Status over there and then it will be our initial State and this is something that we're going to provide over here here in the create slice so let's start here const initial state for now I'm not going to set the type I'm just going to say that count is equal to zero and then status will be pending and remember we'll just Control it from active to inactive I believe then inside of the create slice we want to come up with the name and

essentially I'm going to call this counter and then also we want to go with our initial state in a second we'll set up the reducers which control it but before we do that well why don't we just knock out those types over here so first let's set up a type for the counter state so type counter and state and in here count will be equal to a number and Then when it comes to status I'll actually set up the literal type because we'll use it later to provide a proper type to payload action so we

might as well set it up separately so let's set up a status but instead of setting up as a string I'll actually create another type I'll call this counter status so this is essentially something we control when we add that payload over here now when it comes to a counter we'll press these buttons over here without the Payload and as far as the literal values well we're going to go over here with active inactive and let's also add the bending one and once I have this one in place status actually is going to be equal

to a counter status so now where I have the initial state I'm going to go with my counter State and then we want to set up those reducers so reducers are going to be functions which essentially control D State and then in order to invoke those Functions we'll need to display patch them and again remember when it comes to actual count the number the only thing we need is whether we want to increase decrease or reset but when it comes to set status this is where we actually pass in the payload now the good news

with Redux toit effectively if we're just controlling this one value we don't even need to provide D type and you'll see what I'm talking about in a second so we want to go with reducers it's an Object and then one by one let's up and pretty much I just come up with a function name so for example in this case increment I right away have access to a state and as side not yes redex to it nicely inverse all of the values that we need over here and then yes we can essentially just overwrite so

I can just go with count plus and equals to one so notice I don't need to provide my type since I'm not providing any payload that's it I only want to set up this Function over here and we will export it in a second and eventually we will dispatch it hopefully that is clear then we want to go with uh decrement I guess let's go with State same deal we want to go with State count and in this case we'll subtract and then when it comes to reset we just want to access the state okay

good and then set the state count equals to zero as then note if you're wondering why we can just modify the State like that why don't we need to return state from this function it's because under the hood essentially Redux is using a library which does that for us so that's why we can actually kind of modify the state directly in here under the hood yeah we're still getting the latest value don't worry and then we have the St status which essentially is going to have two things not only we'll need access to a state

but this is the case where we will provide Eay load so effectively when we dispatch set status we will provide that string value and the string value is actually one of these ones so either active inactive or it's going to be pending and when we use a Redux stol kit we do have this special type which we need to use so it's called payload and for some reason not using so payload action not sure why I'm not able to access that so payload action and it is a generic over Here and then inside of the

generic we want to pass in our own type so basically we need to provide over here this counter State now I do have over here a syntax error and now as you can see everything works so if you have the action yes you'll need to provide this payload action which again is a generic and then in here you'll provide the type so in this case it's somewhat straightforward we just have a string but keep in mind yes if you have let's Say an object with a bunch of properties you'll have to set up the type

and provide it over here so typescript knows what do you want to do essentially when you pass in that payload and same deal we want to go with state. status and that will be equal to action payload since that's where we have the string now it looks like I have a bug my apologies by mistake I provided the counter state it should be counter status my apologies now Everything's correct I don't have any bugs and also we want to export the increment decrement all the way to set status so we won't need to provide in

our component let's say a type when we dispatch we simply can pass in our action and we'll be good to go so we go here with export const and then we should have access to all of our functions so increment decrement reset and then set status and that one will be equal to counter slice and then we're Looking for actions this should do it for the slice setup and in the following video we'll do that somewhat annoying boiler plate setup where we'll add the Redux tokit to our application okay and now let's take a look

at that boilerplate setup where effectively we want to create two files we want to create store DS as well as the Haw DS and as a side not if you're using the starter you should have already those files now there shouldn't be any code in Them but you should have the files and store is where we set up all our slices so we create that Global store and hooks is a special one because we're using typescript and you'll see what we need to do over there in a second so first let's start with the store

we want to import configure store this is coming from Redux tokit and also we want to grab counter reducer now this one is coming from our slice the counter slice and I need to Make sure that it's coming from the start so let me go over here with the reducer from and let me look for star then the rtk and then I want to get the counter slice let me just double check yep I'm exporting so everything is correct and then back in a store we want to invoke configure store so we want to go

here with export con store since we'll wrap our entire application in the store and inside of this function we have a reducer property and essentially This is where we set up our slices so in our case again we have only one so I'm going to go with counter is equal to counter reducer since we're using typescript we need to set up two more types so export type and again in the docs they use this root State they set it equal to return type and inside of this one they go type off and then store and

get state so this is what they pass into this generic and the second type when you want to set up over here is Export type app and dis patch and this one will be equal to type off and store this patch so once we have these two types in place we want to navigate to The Hook one and essentially we want to grab use dispatch and use selector so those are the two hooks we use with Redux toit one is to access the store and second one is to dispatch an action and we want to

create our own and you'll see what that entails in a second so Let's first grab use this patch again this is coming from react Redux so this is what I was talking about the annoying boiler plate setup but again you only need to realistically do it once so then import this is actually a type and we're looking for typed use selector hook so this is coming from react Redux and also we want to grab that root State and app dispatch the types we just set up so let's go here with root and state somewhere yep

that's The one and I also want to grab the dispatch okay we have both of these so now let's set up both of those hooks so we're looking for export const use and the name is totally up to you just make sure that it starts with use that's just a rule for react talks and in this case we'll actually go with the function and we're going to go with app dispatch and we'll set it equal to use dispatch so it's going to suggest this use app dispatch that's not what you Want to use you want

to go with use dispatch which is actually the second one and then let's also set up the use app selector which also we're going to export so we go here with use app selector and in this case we just go with type selector hook we provide the root state or type that we have in a store and we'll set it equal to use selector here let's save it and now the last step is going to be in the main DSX where we Want to import the entire store from store file and and we want to

wrap it in the provider component which is coming from react Redux library now this provider component is looking for store prop and as far as the value we'll pass in our store so let's go here with provider then store set it equal to our store then let's wrap it and with this in place we have successfully added redu toit to our application and in following Video we'll complete the functionality okay so now let's navigate to 09 rtk index DSX and we want to import few things first we'll grab those hooks so instead of use dispatch

and use selector we're going to go with use app selector use app selector and we also want to grab use app dispatch and then also let's grab those actions from our slice so I'm talking about decrement increment reset and set status so let's grab also this one this is coming from the counter Slice good then we have increment then we have reset and then we also have set status all of that is coming from the counter slice now in order to access the state values we want to go with the use app selector so that's

the hook and essentially by default it right away has access to the entire state so I'm talking about this one over here more specifically we're looking for the counter so we're going to go over here And we're going to say State and as I not I do need to pass here function and then from the state we want to access the counter so this will be our tiny slice for the counter and we can nicely right away the structure two things what do we have in a state we have the count as as well as

the status so those are the two things that I want to access so now where I have the count I'll actually change it around and I'll set it equal to count and as far as the Status same deal over here now just to keep it more interesting I'll actually navigate back to my counter slice and let's say set up my initial value to be equal to 15 so now I can clearly see that I have access to the counter as well as my status one so now we just want to navigate back and we also

want to invoke the use app dispatch which is going to return a dispatch function we can invoke so let's go here with cons dispatch set it equal to use app Dispatch and then where we increment decrement and reset we'll just invoke these functions and then when it comes to set status remember we also need to pass in the payload so it's going to be a little bit more code so we want to go here with this patch and we just want to invoke the increment same deal is going to be for decrement and reset so

I'm pretty sure I can just copy and paste so we're looking for decrement over here and then lastly we have one For reset as well so let me override this one that should do it notice now we're actually changing the count value and when it comes to set status it's pretty much the same we just want to actually pass in the string value whether that's active inactive or pending so let's go here with dispatch set status and again we'll get a nice suggestion so these are the values that we can pass in so it's kind

of hard to mess up so let me copy this set it up Over here and instead of active we're going to pass in inactive so now let me navigate quickly to browser and it looks like everything is working as expected and with this in place we have successfully added Redux toolkit to our application all right and up next let's build a small tasks application before we start coding away let me just mention that if you enjoy the challenge and want to build this project independently in the readme you will find a list of steps To

build such app so if this is something you're interested in pause the video complete the steps independently and resume once you're ready to compare the results as far as the app it's actually very similar to the app we already built at the end of the fundamental section essentially we will create a form and a list of tasks and if the user provides a valid input we'll add a task to the list and with the help of the Checkbox user will be able to toggle whether the task is completed or not now we'll start just like

the other examples where we want to navigate to app DSX and we want to grab our components so in this case we're looking for folder number 10 I believe right so we're looking for starter then forward slash and tasks so let me replace whatever I have in Here let me set up the component yep I have task list so that is good and just like before since we're working with typescript one of the first things we'll do is to set up a type and since we'll use this type in multiple files it definitely makes sense

to set up types yes and in this case there's going to be only one type which will be a task so we want to go with export type task and in here we have three properties ID which will be actually a string then a Description which will also be a string and then is completed which will be a Boolean let's set it up and then we want to create two more components which will render in the index DSX so so we have a form component we set it up and also there's going to be a

list one new file and we're looking for a list and then we want to create our component and with this in place now we want to navigate back to index and we want to import use effect use State as well as form and List and also the type so one by one let's set it up so use State then let's also grab use effect and then let's grab the form one list one and at the very end let's also grab that type so import explicitly I'm going to type task and then this is coming from

the types now inside of this component essentially we want to start by setting up the state value so in here let's go with tasks set t tasks and this One will be equal to use State let's invoke this one and by default it's going to be an empty array but we do want to provide the generic over here and we'll say that it's going to be an array of tasks and when it comes to our return I think I'm going to replace the div with a section and in here let's type the form component first

and we also want to display the list let's save it over here now for some reason I don't see anything looks like there's a bug so It complains that Forum doesn't provide the import this is strange oh yeah probably because I didn't save it my bad let me try one more time if everything is correct this is what we should see in a browser and with this impl now we can start working on the form functionality okay and when it comes to form essentially we want to set up the form element inside of it there's

going to be an input and it's going to be a Controlled input so there will be a state value as well and once we submit the form we want to prevent the default we want to check whether there is a value provided in the input if not then we will trigger the alert and if everything is correct We'll add task to the list something that's coming up and also we'll set text back to empty value I guess I'm going to start by setting up two Imports over here so we're looking for use State and also

we want to grab That type because eventually we will use it not for now but let's go with type and task which is coming from our types and then let's start I guess by setting up that state value so we have text and set text and that one is equal to use State and we want to start with empty string eventually we'll set up the handle submit for now I just want to work on the return so we're going to return a form element We'll add some classes just so it looks a bit more Representable

and we're going to go with task form so again on submit is coming up let's not worry about it right now inside of the form we want to go with input type will be equal to a text class name is going to be form input and also we want to set up the value since this will be a controlled input and let's also set up the onchange I'm going to provide the inline function since I don't want to bother with the event type and we're just going To go with set text and we'll go with

event. Target and value okay good and then we also want to set up the submit button so button then type is equal to submit and class name will be equal to a button and we're going to go with add task let's save it this is what we should see in the browser so now let's just navigate back and set up that and I'll submit so first let me I guess set up the function this is going to be essentially a repetition pretty much for Stuff that we already covered during tutorial so we're going to go

here with handle submit remember we do want to access the event but we do need to provide the type ourselves in this case so we're going to go with form event and we're looking for HTML and form element this is what we want to pass in and as far as the functionality first we're going to prevent a default so prevent default let's invoke That then we'll check for text so if no text provided then we'll go with alert and let's just go with please enter a task then we're going to return so we're not going

to do anything and if everything is correct basically if we bypass this condition then we're going to go with that task and we'll go with set text and we'll set it equal to an empty string so now let's just look for the form we're looking for onsubmit and we'll set it equal to andle Submit so let's see let's see let's see I think we can just log so instead of adding the task for now let's just see what is the text value whether we are successful let me type some nonsense here and looks like everything's

correct so I get the value in the console and I also end up with an empty input now if I'll try to submit without providing any value then we'll get back the alert and with this in place now we can start working on the add task functionality All right and up next let's set up functionality to add task to the list now we can take multiple approaches essentially we can pass down set tasks to a form and let's say if the value is provided we can invoke set tasks it's definitely an option but in my

case it's just a preference to set up everything in the parent component and therefore I will create another function and I'll call this add task now this function is looking for one thing and one thing only Which is a task but remember we have a specific type for that so we want to go over here with the task now it doesn't return anything so we can just call here void and as far as the functionality inside of the function body we just want to go with set tasks we want to spread out all the existing

tasks and then we want to add the new one so we'll go over here with tasks comma and then we will add the task which was Prov divided to add task we do want to pass this down so Add task is equal to add task and if everything is correct we should get bunch of red squiggly lines somewhere in this case it's in the index DSX simply because we haven't set up form to accept any props so let's work on that we already have D type task so now let's set up our type here for

the props I'm going to call this for props and in here I'm looking for add task function same deal it's looking for this argument the task one and it's actually type task and Then when it comes to the return we're just going to go with void and then right after our condition I think I can remove that console log I don't think there's a point anymore we can just go with add task and essentially one by one let's provide those properties we have over here remember it has to be a string so I'm just going

to go with date then I'm going to invoke get time method and eventually I'm just going to turn this into a string then I still have red Squiggly line because I mean I actually haven't set up the props properly my bad what am I doing let me go here with add task and this is actually going to be equal to a form props and now we get the correct red squiggly lines where essentially we can see that few properties are missing so let's provide them we're going to go with description so this one will be

equal to a text and also let's go with is Completed which we will hardcode and set it equal to false now I don't have any red squiggly lines and once we navigate to the browser I'm actually going to open up the components just so I can see what we have as far as the state and now let me go with first task me invoke this and yep notice over here we are successfully adding this task to our list all right so we're pretty much done with the form I don't think we're going to work in

that component anymore now we Just want to render the list and also toggle the task remember it has that is completed property which is Boolean um and just like in the fundamentals project we just want to display some checkbox and then every time we will click on that checkbox then we'll toggle that value and actually before we render the list I do want to right away set up this function since we'll pass it down to a list component the functionality is super Straightforward where we want to go toggle task now this function is looking for

the ID so so therefore let's right away set up the inline type annotation and let's say that ID is actually going to be type string now as far as the actual functionality we want to go with set tasks and then remember when we invoke map we get back a new array so now I just want to iterate over the array and if the ID matches the task ID I want to set the task is completed to The opposite value now if it's not the case if they don't match then we just return task as it

is so let's go with tasks map and yes as a sign not there are Million Ways How we can write this functionality I just went with this approach so we're going to go here with task then we'll check if task ID is equal to ID we're passing in then we want to return this task with a new is completed value so we want to spread out the Existing task and we want to go is completed and set it equal to the opposite so we're going to look for task and then is completed now if it's

not the case then we'll simply return the task and with this in place now we can pass this toggle task down as well as our entire tasks list so first prop will be tasks and the second one actually is going to be toggle task now we haven't set up of course anything in the list so all of that is coming up let me just Pass this down we're looking for toggle task then let's navigate to our list and first let's grab our task we will need our type so import type task and that is coming

from my types yep that's the one and let's set up right away the list props so type list props and in here we have tasks which is actually an array of tasks and also we want to set up that toggle task so toggle task same deal it's going to have the ID and actually that ID will be a string but Notice how essentially we're providing an object correct so make sure you have the same syntax okay good and in here we want to the structure both of them so tasks and toggle task and we'll set

it equal to list props beautiful and now we want to iterate over the list display all the items and also let's right away set up the toggle task functionality so we're going to go over here with Anor list let's add a class name of list then inside of the unor list let's go with Tasks. map let's invoke this and over here we're going to have a task and then for every task we want to set up the return it's going to be a list item and also we'll provide a key that's a must so we're

going to go here with task ID Also let's set up the paragraph This is where we'll display the task description as far as the classes we're looking for task and text and over here let's set up task and description so we have access to that and now let's set up Our input so at the very end over here we're going to go with input now it's not going to be a text actually we'll go with checkbox we're going to go with checked so it has this prop and we're going to set it equal to task

and then dot is completed so if it's true then the checkbox is going to be checked if not then it's not going to be the case and we'll right away add this onchange I will pass over here the inline function we don't need actually the event I Simply want to go with title task and then I want to provide the object with the ID property where I'm looking for TAS ID now before you ask can you essentially set up this ID as a straight up argument so essentially without that object yes absolutely it's just my

preference to set it up as an object in this case and with this in place we're done with the list as well as toggle task functionality so if I add a second one I Can nicely toggle over here this value as well now if I'm going to refresh the page of course I'm going to lose all of the values since we haven't set up the local storage yet and in fact this is something we're going to do in the following video okay so now let's just add local storage to our application and I want to

start by navigating to the browser to the application and I want to remove the previous ones I believe I still have values from the fundamental Section then we want to create two functions one is going to be load tasks so we want to load the tasks when the application starts up and we'll also have one to update the storage and since it's a react project we can use use effect and then pretty much every time there's going to be some change in a tasks list we will invoke the update storage let's start with the load

tasks function so this function is going to return an array of tasks as far As the functionality we want to go with stored tasks so that is equal to local storage then we're looking for get item that tasks something we don't have yet and then we want to return and then based on what we have in the local storage either we're going to return those tasks or we're going to return an empty array so let's set up turning operator we're going to go with Json parse and we'll pass in stored tasks that's not the case

we'll return Empty array and then in here I'm just going to provide a function and then I'm going to invoke load tasks and then like I said we also want to set up one to update storage so every time we'll change something about the list be it add the task to the list or toggle D is completed we'll update the storage so update storage now this one is looking for the tasks and actually it's going to be an array of task now it's not going to return anything so we're just going To go with void

and then we want to go with local storage then dot we're looking for set item the name is going to be tasks and we're going to go Json stringify since we can only store strings over there and we'll provide the tasks so this is how we're going to create those items and then when the project loads this is how we're going to access them like I mentioned since this is a react project We can go with use effect and then pretty much every time there's going to be some change in our dependency array which contains

the tasks we will also invoke the update storage and we'll grab the tasks value so now let me navigate back to the browser or it's over here everything is empty I have no tasks but I can go with first task okay good second task task notice how they are actually saved in local storage I can also toggle the is completed and then Once I refresh I still preserve the values that should do it for typescript with react section hopefully everyone enjoyed it and up next we're going to start working on a big typescript project where

we're going to implement most of the things that we have learned in fundamentals and react with typescript sections