Learn TypeScript: From Beginner to Advanced Coding Techniques

1. Intro: You may have heard of it, but do you know why and how to use typescript instead of Javascript? Typescript is a type safe superset of Javascript that allows for all the same features and capabilities of Javascript while preventing careless mistakes from going live in your web app. Today we're going to walk through everything you need to know to learn and use typescript. Hi, my name's Zoe. I'm a software engineer and former professor who loves helping others get started with coding. I've created tons of websites and web apps using React CSS, HTML and more. Today we're going to be going over Typescript and how you can use it to improve your development time and experience substantially. To do this, we'll be building this project in typescript. We'll talk about what types are, how to use them and why they're useful. Then we'll dive right into our tutorial. The tutorial will be broken up into three parts. First, we'll initialize our new Typescript project. Then we'll get it up and running on our browsers. And finally, we'll build our website using Typescript. This course is for anyone who's interested in learning typescript, although having a general understanding of Javascript will be essential if you do need to learn Javascript, I have a full class on that link down below. However, if you're already familiar with Javascript and just need to brush up on it, I've included a few lessons here to make sure that we're all on the same page. By the end of this course, you should be able to build an entirely typescript web app for yourself. Let's get started. 2. Class Project: Class project. Our project for this class will be to build a simple web app using typescript. For this class, it will be essential to have access to a computer that you can run visual studio code or another code editor of your choice. You'll also want to have a browser like Google Chrome up and running as we'll be using it to display our web page. Finally, having a general understanding of Javascript will be essential. If you're familiar with Javascript, we just need a refresher. Don't worry, I've included that over the next few lessons. I'll leave any links to any assets and resources you'll need in the project and resources tab below. 3. JavaScript Intro: Javascript intro. There are two places where Javascript can be written in HTML files or in its own dedicated Javascript file. If we want to write Javascript in an HTML file, it's as simple as adding the script tag to the head section of the document. This script tag is reserved for any scripting languages, which are languages you can execute commands with, and is where our Javascript could theoretically live. Anything you write between these tags will be compiled and interpreted as Javascript. While this is fine for really small applications, this might get a bit more complicated once we start to build more and more complex websites. In this case, we can use the second place that Javascript can be written in its own file and just utilize the script tag as a reference. We'll make a separate Javascript file apps and connect the two. And voila, we've added Javascript to our project. Let's dive into the ins and outs of Javascript and programming languages in general. 4. JavaScript & Other Programming Languages: Javascript and other programming languages. As we've discussed already, Javascript is a scripting language that allows you to introduce logic and functionality to your web pages. But how does it do this? As we've also mentioned, Javascript is a programming language. There are several things that most, if not all, programming languages have in common. Just like other types of computer based languages, programming languages are in their simplest form, just a way for us humans to talk to the computer. Javascript, in particular, allows us as programmers, to interact with the web browser through the Dom, or the Document Object Model. The Dom is the programming interface for web documents and acts as a representation of that page so that it can be interacted with, updated, and modified based on user input and interaction. Javascript, in particular, is the language that we use to interact with the Dom, and 98% of all websites use Javascript on the client side. Programming languages also all have their own unique syntax. Just like in other languages such as English and French, there is syntax which defines and explains the ways in which words come together to form sentences, paragraphs, et cetera. Programming languages in the same way, each have their own syntax to determine what constitutes a complete line of code. For instance, programming languages all have their own unique case and purpose. You might have heard of other programming languages such as Python, Ruby, Java, and others. Depending on what types of applications they're looking to build, one of these programming languages might be better suited for the task than others, as the goal of this course is to learn how to interact with and build applications for the web. The best programming language we can learn is Javascript, or in this case, Typescript. Let's dive into it. 5. What is TypeScript?: What is typescript? Typescript is simply a superset of Javascript. That means it has all the same capabilities of Javascript with some additional features that benefit the developer. One of the primary features of Typescript is using types, which ensure that the value that is being accessed is of the correct type. But let's back up. What are types? 6. Types: Types. There are many different types accessible in typescript. So let's start by talking about the most common ones that you're likely to come across in your day to day work. A few of these common types you may already be familiar with from Javascript such as string number and Boolean. A string is any value that can be put and read within quotes. A number is a regular numeric value such as 1234, et cetera, and a Boolean can be one of two values, true or false. There are also arrays which just like in Javascript, are ordered list that can contain multiple data types. However type script has a special type called any. Any is a type that can be used when you either don't want to type check a particular value or aren't quite sure what type to use yet. In the second case, you could also use Unknown, but any will do fine for now. 7. Errors: Errors you might find. As you start using Typescript, you'll start seeing a lot more errors at first. But this is a good thing because it will help you learn it that much quicker. Not only does type script throw errors for mismatched types, but it will throw errors for a variety of scenarios that you want to prevent. Like when you call a function, but forget to provide all of the required arguments in Javascript, an error like this would be considered an uncuht error that passes silently. However, this is something you don't want because if those additional arguments in that function are essential, your function probably won't work as you expected. But that's enough theoretical type script, let's dive into writing it for ourselves. 8. How to Install TypeScript: All right, so to get started with type script, we can do it one of two ways. We can install the typescript compiler and work on just a plain typescript file, or we can incorporate it into our create, react app set. I'm going to go the ladder route, but I'll show you how to quickly install it on your computer globally if you'd like to. So if you want to install a typescript globally, it's pretty easy. You just need to install the compiler. Typescript, as you mentioned, is a superset of Javascript. But the browser doesn't actually read typescript, it only reads Javascript. The way that we're able to use Typescript on the browser is through it being compiled back down to Javascript. You'll remember this process of compiling from one language to another, from CSS and CSS. Scss was compiled down to CSS. The same is true for Typescript and Javascript. If you wanted to use Typescript globally on your computer, all you have to do is install it. Install the Typescript compiler. So you go NPM I, and it is for the global. And then you'd type in Typescript. And then once you did that, you'd have installed the typescript compiler globally and it should work on your computer. After you did that, you just checked to see if you had done that correctly. Tscv and I've already done this, so it comes up with version 4.2 0.8 And so after you've installed Typescript globally, we can now go ahead and create a react project with it. 9. TypeScript & React: What I'm going to do is copy a line of code I have here which will basically, it's saying I'm going to create a react app and we're going to call it learn type script. It's going to use this very special flag here called template. We might have seen it once or twice before. The template, this time rather than red is going to be typescript, so it's going to give us a type script template so we don't have to worry about trying to figure out how to set up the app properly using Typescript. We'll just run that and once that's ready, we'll get started. All right, so we have our learned type script folder all set and ready to go. So let's go ahead and NPM start it and take a look at what we have on the browser. So as you can see here, it's pretty much the same app except for one key difference. It said edit source app TSX instead of JSX to save and reload. Pretty much it. That's the only difference we have here with our type script. So what we're going to do now is we're going to go into our public folder. We say everything's the same. Let's go into our source folder and check out what's going on here. As you can see, we have a couple of different files within these two folders. Within our larger directory and within the app and within our source folder. Let's check out this TS config file. So this is a new file that we didn't have last time. This file basically tells the type script compiler how we want it to compile the code. So there are different versions of Javascript that are currently available on the web. Now when we're compiling type script to Javascript, we want to basically compile it to the oldest version that is still perfectly usable. Because we want to make sure that it's as compatible as possible with as many machines as possible. If we only compiled it to the latest version of Javascript, some older machines might not have access to a lot of the functionality that it implements. And then we would make our websites more inaccessible. So in this case we've compiled it down to ES five, which is a slightly older version of Java script. I think Ron seven or eight by now. And then there are a couple other options that you'll notice. This is all in Jon Json object as well. It says it'll allow you to put Javascript because all Javascript files are valid typescript file. So you can actually write Javascript in a typescript project might not make much sense, but you can do that if you want. And then is it strict? So it's going to enforce strict type checking. You may or when you're learning, you might want to leave this on. But it may or may not create some difficult rules later on in your project. It depends on what works for you and then a few other values that they've just sort of put in for us automatically. As we work with type script. More and more we'll see when and when we don't need to interact with these files. But for now we'll leave it as is. Next thing we're going to go into our TSX file and our index TSX file and see what those have there. The index TSS file, TSX file looks pretty much the same. Nothing really different there. When we go into our TSX file, pretty much it's the same thing, to be honest. And as you can see already, Typescript and Javascript are pretty much the same thing. There's not a lot that is very different, but there are a few key pieces that will make some difference. Let's go ahead and create a little bit of an app to work with those. So I've gone ahead and created a component called Counter, just like our previous counter. This counter could do things like counting up by one or counting down. Right now it doesn't do anything, it's just an empty component. But let's go ahead and try and pass it some props so that we can add some functionality to it. So what we're going to do within our app, let's create a couple of variables here. Let's say title and we'll give the title, a value of my counter. So this could be the title for our counter. We'll say const button text and we could say this could be plus one. So we'll just give it some basic basic variables. This is all just to show how type script works. We'll see that's giving us a little yellow underlines which it has done from before. Because the variables have been declared but they're not red, they're not used yet. Don't worry, we'll get to that. What we'll do now is we'll pass these to counter. We'll say title equals title and button. Equals button text. Cool, we're still getting that error because, but now it's actually a type error. So it says type title type of string and button text type of string is not assignable to type intrinsic attribute. Property title does not exist on intrinsic attributes. So what does that mean? So basically, typescript allows for this very special thing called typing. And typing allows us to make sure that the values that we pass are of a certain type, right? We're, you know, in a title where we want it to be text, we want it to be a string. We're not passing an object, for instance, we're just passing a string. So type script allows us to check for this before we actually get to the compiling stage and realize that our app is just broken for no reason. So if we go to our counter, we can actually bring in these variables like we've done before of title and button text and we can save that. But we're getting some errors here. So we're getting all destructuredr elements are unused. Binding element title implicitly has any type. All right, so we're getting two errors. We're getting an error because we haven't used them yet. Fine. But we're also getting the second error that we haven't seen before. Binding element title implicitly has any type. Now the types and typescript are just like the different data types we've talked about before. We have string Boolean number object, but there's this thing in type script called an and it's not actually a good type. Any is literally saying like this could be of any type and it defeats the purpose of using type script. If you ever try and type something with the type of any, it'll actually give you an error. So there are a couple of ways that we can get around this error. All right, the way that we're going to get around these errors first, let's go ahead and implement them in our project. So let's just put an H one and we'll give it a title. We'll give it the property of whatever title is. We'll save that and then we'll create a button. We'll give it the property of whatever button text is. Cool. We'll go ahead and save that. Now we've at least gotten rid of that first error, but we still have the Eddy type error. What we need to do in type script is actually create something called an interface. An interface is basically just a set of rules that tells the component what to do with the variables that have been passed, what to do with the properties that have been passed through it. The way you create an interface is you go outside of your component right above it might maybe where you'd import something just right between those two spaces. You go ahead and you say interface, and then you just give it a name. Typically people just call it props, but you could call it anything you want. You could call it counter props or app props to be specific to your component. But you can call it anything you'd like because we only have one component that's taking props. We'll just call it props, but it does need to be capital. Whatever the name you choose, make sure the first letter is capital Interfaces and it's an object. So we'll just create our object there. It's not equal to it, it just uses the curly braces. Then what we want to do is for every prop that we have that is being sent to counter to, we want to tell the interface what that type should be. If I type title here, I can use a colon to then assign it a type. So I'll say title is of type string and save it. And we have one done. The next one is button text, which is also of type string. And we'll put string here and then save it and work good. Now we're getting this other error here and we're still getting these errors here. That's because these two have not been connected yet. They exist in the same file. But the component, the component needs to be told to actually use that props. The way you do this with SX is you actually just put a little colon here, right next to those squiggly brackets, and you type in the name of whatever your interface is. So in our case, props and save. And once you do that, you'll see that all of our errors have gone away. And now we have initialized our values with some sort of some sort of type. Now if we were actually, and if you check out your page, we'll have my counter with a number, right? Pretty simple. There are also different types available. Say you want to pass down a function, right? So say we'll create an onclick function on click equals M console dot log clicked, right? So you just want to create a really simple onclick function. And we pass that as well as a prop. As usual, we'll notice that it turns yellow because it is a function. And we have to add it to our props here on click. Let's add it to the click of our button. Say that. But the problem is, one, it's not yellow here because it doesn't know what type it is, right? Because we haven't put it on our actual props here. So let's go ahead and actually put it on our props. So we'll say on click. But the different thing here is it's a function. And if you remember your Javascript, a function isn't like a type in Java script, right? It's just like a thing we use, right? I mean, functions I guess are objects but like you wouldn't want it just they're of a different class, they're of a different type. So in type script, they actually have something for functions where you would say whether or not it returns something. So the syntax for this is actually just your regular parentheses. Then you would type the arrow and then you would type void if it does not return anything. If it does return something, you could maybe say string or whatever it does return. And if it takes arguments, you could pass them in here, like it takes art one of type string if that were true. This is not true for our function here. But for the most part, most of the functions are going to be passing down just our simple argument, less functions that go to void and the reason they go to void is because they don't actually return anything, right? If a function returns something, then that would be meaningful data to store in a variable or something else. But for the most part, when you're passing down a function, it's going to just trigger something within the other application. So if we had, for instance, if we took button and made our own button component like we had before with the ad in the subtract button, we could just pass the click as a void and leave all of the logic in the counter function. That's one option we could have. So now that we've put the parentheses void just like an arrow function, you know, parentheses, and then it's going to return nothing. We've added it here to our props and we've added it to our function. When we go and click plus one, we'll notice in our actual, and let me clear this and if we go and check in our actual console here, we'll notice that it says click. And every time we click it, it just adds one to the pile so we know that it's working properly. Type script. It does take a little bit getting used to, but once you are used to it, it's much easier to work with. I find personally one of the more challenging things to work with when you're working with type script is when you have larger objects, right? So say we had an object of maybe we have an object called house again, right? And this is an object, this is an object that has a value of name of my house. And then maybe it has rooms, which is a number. And then maybe it has appliances, which is an array of Yeah, and it has appliance. So let's even at that and say we pass house to our counter function. We probably should rename this component, but say we pass house to our counter. There are a couple of ways we could handle this. If we import house, let's just console log it for now. To get rid of that first error, we want to add it to our props. So we'll add house to our props. But what type do we give it, right? We could give it, I guess to the object type, but in theory, like when you think about it, everything in Javascript is an object. So giving it the object type might not be the best idea. I mean, it works. But it might not be the best way to check if it's working properly, right? Like, I mean, we console logged it. It's fine, it works. But in, and in an ideal world we'd actually have a bit more specific typing, a bit more strict typing so that we know whether or not we've gotten the right shape of our object. You know, house with the name and the appliances and the rooms. You know, we want to make sure that that is actually the right object. So one way you can do this is actually starting in app, you can create a type for house, so we'll say interface and you can also have multiple interfaces. You don't need to just have one, but you can say Interface House. Then you can basically use the shape of this house to create that type. You can say the name is going to be a string, the rooms is going to be a number, the appliances is going to be o an array of strings. The way you'd write this is you type in string and then you'd put the array symbol next to it. It's telling us that it actually is an array of those strings. If it was an array of numbers, you could, you could actually just type in array and number, but in our case it's going to be strings. So then what you're going to want to do, you're going to make sure you export this export interface house and then you want to import the interface into the counter. So remember how I said you can name the interfaces, anything you know. Just make sure that it's like relevant to what the thing is. And you could also type house. You can put your colons here and then give house the type of house so that way the compiler knows on both sides like, okay, this house matches this house. They're both the same type. So if we go over to our counter, we can go ahead to the top of our file where all of our import statements should live and we should house from dot slash app. And then we will go to our house object here. And then just give it passes the type of house. And now it doesn't actually change anything in our app, but we now know that it's more accurately typed, right? We now know that for sure these two things match for sure know that house is of type house and the other one is of type house as well. And so if we actually had the wrong type of interface, right, say I created another interface here and I called it home and I had name and it was just a number and that was it. And I tried to pass that to this type home. It should call an error. And you'll see in our Abs it's already turned red. So you'll see here that it'll tell us that type house is not assignable to type home because the properties of name are incompatible. String you cannot assign to type number. This is where type script shows its real strength. We might have two very similar types like house and home. That they're almost the same thing and they both have the name property. But however, the name property itself is not of the same type. I know this kind of might be a little tricky and a little bit confusing, but as you work on typescript a little bit more, it'll become a lot clearer as to what makes sense and what doesn't. But for now, you can see that, you know, basically, as long as you type things in the same way, typescript will do the checking for you and make sure that you don't make any careless mistakes. Personally, I find typescript really essential. I prefer to write with it when I'm creating apps. Just because it does all of that. Checking for my silly little errors before I get to the actual production stage and then I can't figure out what's wrong with the app. So that was just a quick intro into typescript, and we'll go ahead and work with it some more a little bit later. If you ever have any questions about what things you can and cannot do with typescript, I'll leave a link to the website that has the typescript documentation so that you can access all of the information that you might need or look up all the information you might need if you're not sure about how to write something in Typescript. 10. TypeScript & Next.js (Styling): All right, so let's go ahead and get started building out our type script application. If you take a look at the design file here, this is what we're going to be building out. It's a simple tip calculator app that involves a few different types that we can work with and see that our project is working correctly and learn types script. So let's dive into it. First things first, I'm going to go ahead and start at my repository here. Now I've already used this starter app here. It's on my Github, It's called Muck app. What that does is combine a few quick things to get up and running faster using material Y next S, and type script. Most of these are just related to styling and spinning up a quick app. So feel free to use it if you'd like. But you don't have, you can just start up a regular application using react and type script. So we have three or four sections here. We have the bill amount, the tip percentage, the number of people, and then to the tip amount per person. This is the calculated piece and the reset piece. Okay, so pretty straightforward. What I'm going to do, I'm assuming with this app you'll want to be able to enter the bill amount. So you'll want to use some sort of input. Then once you input that, you'd then want to add, put on the tip amount to that number and then add the number of people like all the left side are your inputs and then the right side is your output, essentially results from all of that. In order to do that, I think what I'm going to do is I'm going to create a tip input and a tip output. Maybe I'm going to create a new file to say, let's say Bill or Cost input. And I'll put that in here and then we'll say A again. You can name these anything you want. Just the first thing that came to my mind. Output. All right, awesome. So you have the input and the output. Now thing to think about, especially when you're working with reactor type script or any sort of technology like this, you want to think about where the initial state of your application is living. Is it in each component, and then do we have some larger global state manager? Does it live in a higher component? What is the way that your data is flowing? Essentially, for this, I think it's a fairly simple application, so I wouldn't want to use a more complex, I'm thinking like red data situation. I think what I want to do is try and just hold it within the local state. Maybe put it into Z stand, but let's see how much we can do without really pushing it around too much. All right, first things first, let's finish building this out. We want bill tip, percentage and number of people in our cost input. We're going to have a few different elements we'll add in our box. We're going to say a little is typography to say bill S T percent number. Oh, awesome. Okay, cool. And then we're going to have some sort of text input. Oh, just give me the same error here, because I need to do direct input. Direct imports, I should say n inputs. All right, let's import box and let's import timpography. All right, awesome. Now I input has a text field component, that's what it is. So we're just going to borrow this. We're going to borrow the outline basic text field component for our bill and for our number of people. I'll just go ahead and import that there. Cool, awesome. Then for these now it's going to be more of like a select based on a button with an input at the end. It's a little bit more complex in that sense, what I'm actually going to do is wrap these in boxes just so we don't mix up which one is which. All right, so this is for the bill. This box is going to be the tip percentage. I'll add some more in this box. Add on the buttons, and then this box is going to be for the number of people. Awesome. Just to really structure things a little bit more clearly because I think it's going to get a little unwieldly. All right, cool. So we have that now the thing with these inputs, right? Like we could have it so that the value, whatever the user types in the value. And also I should change the color here so that we can actually see color. Okay, cool. So yeah, I could just set it so that the, so that when I put in the amount in the cost input, it just lives within this component. But because we need to access the amount 142 so we can get the tip amount in the total per person. In terms of the way I'm thinking about the state, I think I want to raise the state, or lift the state and have it live in the tip calculator itself. So what does that look like? Well, for me it looks like creating a few elements, a few state elements. We'd end up creating a total price at zero and then passing that through our apps. We'll do that in just a second. Let's finish up with the styling. So we're going to give this background color. Background colors, All right? And as I said, feel free to use whatever styling you'd like. This, it's totally up to you. I'm just using Maly, right? Because it's a little bit faster for me. Okay. And then oh, you know, that's the other issue, I need to make this a flex box. All right? Awesome. Okay, so then now within these, let's go ahead and finish this sky line will be what's the width on that 379? I don't add that. The lower one as well. These two are kind of gonna have mirroring styles. I wonder if there was like any maybe comment that out. There we go. I was wondering why that wasn't taking effect the global style. There's like a global reset that I put in here, which is useful but it was overriding my margin and Paddy, I took that out. All right, so there we go. All right, so it has a label here and it's going to say people, then this one, it's going to be, the bill label is going to just be $1 sign these two IDs because they're not useful to us right now. You can change them when they do become useful then I'm also going to set color to be this color for both of them, so we can see the text inside. I'll fix the cup in a second. Our next piece here take consider that. Okay, so let's add in these five buttons and one input. One is going to be one of these inputs without the width. Then I'm going to do something quick. I'm going to say cost tip per percentages, and I'm going to set that to be a array of numbers. I'm going to say 5% I guess. 5% 10% 50% 20% and 25. Is it 25% Oh no, sorry. 50% 25% And 50% 25% and 50% All right. Cool. So those are the tip percentages. Now in the bottom here, I'm just going to map over those. I'm going to say tip percentages Map each percent. I then want to go ahead and return a button with the percent percent as, as the button and it might also be given here. Let me get rid of that. Can't say that I should return it, but altos Key, sold key is the percent, because those are going to be unique. All right, cool. So now we have our buttons. Awesome. Let's change the background color to be this cool. And then we're going to set the width of each to be 117, I believe. 48. Perfect. Awesome. Then this, you know what, I have a flex column. I do want it to be flex column, but I think I want to wrap these in the box. I'm wrapping the buttons in the text field in a box. There we go. And then I'm going to say display flex wrap is going to be, then I'm going to say width. Let's say. The 353? Yeah, three in a row. So let's say width is 450. Awesome. Just going to copy these styles to this text feel and save that and maybe add a little bit of margin. We're looking pretty good at that here. Awesome. That looks pretty good to me. I think I'm pretty content with that in terms of just the general style. What I'm going to do now with these boxes, I'm going to add some margin to the top and the bottom for each of these like outer boxes, we have some good spacing there. I could also do with a flex box, which actually would probably be better. Let's make this outer box a flex box. I will say space. Now there's space evenly from top to bottom. All right, cool. That's looking pretty good. Now let's see, what else do we need to do? Oh yeah, we need to do the other side. Let's think about the bill output for a little bit here. Bill output, we have this dark green box. Let's start by that. Let's grab this color still again. Let's say earlier. And then we'll give it a width, 413 by 41714. Just 413 by 413, but it doesn't really matter. 417, Say that Co O I need I need to add to the tip calculator. It's not here. This is to go up here. Margin zero O for the tip calculator itself, I need to align the items to the center, all right? Perfect. Cool, cool, cool. Looking good. All right, so the next thing I want to do now, I want to go ahead and add in these pieces we want, Tip them out and total and a reset button. Let's create a couple of typography elements. We'll say just fix that error in the top here. I'll say tip amount amount per person, and then that's going to be an amount. We're going to fix this in 2 seconds. Can wrap that in a box. And then we're going to do it again, but we're going to say total per person. Then at the bottom here, we're going to have a button that says resets. Same button. Okay, reset button, We'll make it. This came. Okay? Okay, awesome. So apply this stuff in the next box as well. Cool. Perfect. Then we're going to wrap these two in a box. And the reason for that, those two in a box, is that when I say they justify content space between the buttons at the bottom and the price amounts are at the top. Awesome Per cool. There we go. Pretty basic. I'm just gonna touch up a few more styles and then we will go ahead and work with our ty script. All right, You know, I think I need to target. I'm just trying to target the color here so we can see it. I think I need to target. Let me input base. Can pull, Yes. All right, perfect. That's what I want to do. All right, so I'll just grab, actually take out that color. Take out that color, can take out that color, you're not doing anything. And just grab this graph there. All right, cool. So only type in things here, we can now see them. Any other little adjustments. This side looking pretty good. Now I think the right side here, maybe we could just change this color, the tip amount color to white and give it a little bit more spacing. And then we should be good to go ahead and move onto our type script space between. 11. TypeScript & Next.js (Types): All right, so now that we have all of this built out, let's go ahead and build in the type script functionality, the purpose of this lesson and see how it's a little bit different from using regular Javascript or JSX. We have our style all pretty much done out. But one thing to observe and notice that I talked about before with state. We want to think about where the state is living within this application because we have three or four different pieces. Here we have the input section, where the user might select the tip and put the number of people or put the total bill amount. Then we have the output, which will give us the tip amount and the total cost per person, Tip amount per person, cost per person. Then we have a reset button here. Now in order for all of this to work, the state needs to be somewhat, well, not quite globalized necessarily, but available at a higher level to be passed between these two components. I'm going to try doing this using just regular react state. If that doesn't seem to be a suitable solution, we'll transition to something like stand. What I'm trying to do is avoid using reduct because there's just so much boilerplate involved and it's a fairly straightforward apps. Let's see if we can do it just using some simple solutions. In my mind, I need to pass the total bill, the tip percentage, and the number of people from the left side to the right side. I think it needs to live in the upper component of tip calculator here. Let's go ahead and make that happen in tip calculator here. What I'm going to do is I'm going to start by defining a few variables. I'm going to say, let's say total bill. I'm going to say set total bill equals state, which will import from react. We're going to initialize it at zero. Now one thing with type script here, we can actually go ahead and add in a type and specify that this needs to be a number type. Now because you also put in zero, it infers that it needs to be a number type. We're getting an error here because we haven't used client here because that's just the next GS error. Not to do with type script, but we can specify the type that this bill needs to be of a number type. The amount needs to be a number so we can actually do calculations on. That's one of the points at which we start to use typescript. And you'll see how this trickles down to our, so we have the bill. Let's do the same thing for let's set tip percentage, percentage percentage. That's also going to be a number. Yeah, it's going to be a number and then number of people. We'll do one more. I'll say number of people, set number of people. And again, you state and number going to initialize it to zero just so we start with a clean slip. All right, so now that we've initialized these variables, let's go ahead and utilize them in our app for my cost input. I want to now pass these parameters of total bill and set to bill, total percentage, set total percentage number of people, set number of people to the cost input. Because this is going to have implications in terms of what happens. Now actually there are two ways we can do this. We could pass both of these down or we could define the functions into calculator. Let me start by just passing the initial variable. Let's say total bill. Total bill, tip per percentage, percentage equals tip per percentage, and number of people equals number of people. You see, I'm already getting an error here because type script is telling us that we don't actually have the property on the component itself. So this is one of the benefits of type script. You can't just pass random things around and expect it to work. You need to actually utilize type script. You have to specify, I should say, which types you're expecting. If I happen to cost input here and I import the total bill, I'll take in tip percentage and also take in number of people. Again, if this is a regular react application, you could just bring these in like that. But as it's not a regular react, it's not just a Javascript, I should say, React application. You'll see that it's actually getting an error here. We'll say binding element number of people, for instance, implicitly has any type. And as you remember earlier, we talked about any, we don't necessarily want to just have a generic type. What we want to do is go ahead and specifically type these variables. Let me show you how we're going to do that. The way we're going to do this is creating something called an interface. An interface is basically a way for type script, for us to tell type script. Hey, I'm expecting these variables to come in these properties and I want them to be of certain types and these are the types that I'm expecting. Anything other than that, please declare an error. I'm going to create it, I'm going to call it props. You can call it whatever you want. And I'm going to outline these different properties. I'm going to say total bill. It's going to be a number. I'm going to say tip percentage. It's going to be a number as a number of people. It's going to be, then I'm going to tell type script that all of these you can use this map, this interface to get the type of crops. And you'll see here I no longer have there, things are working so far. Final thing we need to do now is hook this up to the actual locations in our app. In for the Textfield property, I believe there is a value that we can use. I believe it's called value. Let me check. Let's go to the API. I'm pretty sure it's just like a regular input, but I want to make sure so we don't get some erroneous errors. All right, Yeah, I think we just put in value. Let's try that bill. We're going to say value equals total bill. We'll say that check out here. Awesome. So we're getting $0 Perfect. We'll just do that for all three percentage tip. Percentage is going to be a little bit different, but for the last one text field, we're going to say value equals the number of. There we have a number of people set to zero. Perfect. We're good to go. In that sense, the next thing I want to do is create some set, right? When the value in these inputs change, we want to trigger some function. Let's go ahead and we'll write out that function. And we can actually write that function in tip calculator or we can write it in cost. Doesn't matter, just depends on what is for us. If I go ahead and I write it in cost input, I can say I need to pass in the set. I want to pass the setter. Do want to pass you just random function? We'll pass the setter because I think I'll be cleaner u. Okay, and then as she is giving us a similar set of errors. Yes, we're just going to drop these in here, and then I'll drop these in here. Then the difference here is we're actually going to pass, it's going to be parentheses equals void. And that's how you tell Typescript that it's a function that we're passing through. Essentially, if the function took something like it took an R, that was all the type number for instance, then we could specify that as well. Totally fine to leave it as blank for now. But we could definitely specify the type if necessary. And see we're already getting an error here. It actually not able to set its type void, we have to set it to this type. It's actually good. It gives us the exact type that it wants us to use. If it was a regular function, we could use type void. But because these are set state actions, we need to use the very specific types that they're giving us. That's fine, we just import those types and then we should be good to go. Awesome, Great thing about typescript. It will tell you which types import. All right, now we want to say, for our text field, we want to say on change, we want to On change, we want to set the total bill to be the value. Let me actually create a function here says constant update bill we're going to pass in, which is going to be the event. I say set bill is going to be Targetvalue. That's going to be the way we're going to be able to grab or actually do. We actually don't need to do all of that. Sorry. We can just sit on change set bill, we'll just pass in Sarge value. And it should be able to just grab them. It should be able to just grab the value from E, which is like the event that's being, it's listening for argument type of strain, not assignable to parameter type of numbers. Tell me that the value I'll get back is actually a string, not a number. But what I can do is actually just cast it to be a number. Tell it that it's going to be a number that will fix that type of error. Sometimes a little bit annoying. You do have to change a lot of little things in order to make sure that you're not getting type errors. But I think it is worth it because it works out in the end type in 57, then the number in the state, I mean, we can't see it here, but the number in the state would be 57, which is great. So that's good to go. All right, so we've got that set up. Let's do the same for here. Instead of total bill, we're going to say set set number of people to the same thing, target value. When that value changes, we change the number of people. I wonder if you changes to default value if that makes any difference. All right, we'll just do it a value play for now. All right, so we have those two set. The last one I want to handle is the percentage we need to handle it in two ways. Basically, when either a user changes like types in something in the custom text field here. And I'll actually give it, does it have a label? I think it needs value or a default value equals custom per percentage. Now a bit percentage, 1,000% Yeah. When a user either types in here or clicks a button here, we need to make sure that the percent percentage gets updated to match that. What I want to do is say either on click, well, it doesn't really matter, it's, we're listing for both. But one is clicked, the value changes when something is added to this number that changes, whichever happens last is the one that changes. On click, I'm going to create an on click function. We're going to say on click we're going to say sets to percentage to be percent. And it's giving us that same error, but this time it's correct to give us that same error because we've said it to be a string. What I'm actually going to do is I'm going to turn these into objects. I'm going to say percent, and then the actual multiplication amount that we'd use is 0.05 And that's how we're going to solve this issue. We have our string and then we also have our actual number that we can use. That should be a fairly straightforward fix. I will say that. And then the key now have to be percent. Oh, Ash. Actually, that was not the right way to do this percent title. That percent, that's what I should have done. All right. Sorry. Let me just fix this up really quick. All right. Awesome. So say percent title is the key, then percent value is the amount and then percent title is what shows in the butt fixed that issue there. Now we have set all of those things. Last one need to set is the text file. We're just going to borrow the change functionality here, percentage base, All we get from target value. Yeah, we should be good in that sense. I'll go back to Tip calculator and we can test, actually to see if this works, we can say console dot log. Let's say total bill tip percentage and number of people console log each of these and inspected in our console. Right now they're all zero, which makes sense because we've set them to default to zero. Then if I say the total bill is 100, you'll see the first number changes. The I just select ten, it gets the 0.1 which is what we expect to happen if I add in five people, the last one changes, so we know that it's actually working correctly. Good to go. In that sense, I'll remove this console log for now as great. So we know that the information is being passed to the tip calculator correct correctly, so that things are actually happening correctly. Now the reason I didn't want to clobber tip calculator earlier with all these little piece of functionalities, because you're now going to create a few functions within tip calculator, we need to calculate what the tip amount per person should be and what the total per person should be. In order to do that, we need to create two functions. We say constant get tip per person and then we'll create another one. Get total per person. We can do this here or we can do it in cost input. It doesn't really matter. But if we do it here, then we don't need to drill an additional set of props into the bill output, I should say. If I get tier or maybe we do want to drill it into Yeah, maybe we do want to do it, actually, sorry. Let's do it in bill output just to keep things clean. All right, so we're going to create these two here, but what we do need to do is pass in three props to bill output. Just like how we had an interface in cost input. I'm going to create an interface in bill output. Just copy and paste that from the, grab these from here, there. Then now in the function here, I'm going to say get tip per person. We're the tip per person would be the total bill times the tip percentage divided by the number of people divided by the number of people. That will be the tip person. We can say that this amount or actually we don't need to create a whole function, we'll just say constant tip per person, person equals, there we go. And then we'll say this is the tip per person, that's tip person. Yeah, we've just said the tip per person is a total bill times the tip percentage divided by the number of people currently. It's not a number because we don't have those numbers. But we'll fix that in just 1 second. All right, next thing we're going to do is total per person. Total per person is going to be the tip per person, The total bill divided by the number of people plus the tip per person. That way we can actually use that for our second function. We'll say this is going to be our total per person, per person. That makes sense. Total Bill by the number of people plus the tip person. Awesome. Right now we're getting a number. I'm wondering if it's no, they should be coming in as numbers can be specified that. Wonder if they're not coming in as a number for some reason. Let's see what happens if I change the number here. Or, you know, it might just be, I think I know where the issue is. We're not actually passing the variables, so that would probably create a pretty, pretty big issue there. All right, awesome. So we've already hooked it up. So yeah, if you can see here with setting the tip to 10% the tip amount would end up being $2 per person. And then the total per person would then be $22 which makes sense. $100 divided by five people would be $20 per person plus $102 tip $22 We can do a little bit of form adding up here just to make it look a little cleaner. We can just add $1 sign here. Add $1 sign up here. You can change it up. See if when I hit the button it changes, changes the amounts there. Last thing we could probably do is just hook up our reset button. Just reset everything to zero. So yeah, as you can see, Typescript is not that different from Javascript. It's pretty similar in the way that you would operate in a react application or in just a plain Javascript typescript web app. The only difference is being able to see the errors before they occur. So like for here, the error was that we hadn't even passed the, if this was a Javascript application, we might have spent like ten, 50 minutes trying to debug the issue and figure out what the problem is. The great thing about type script is that it does just allow you, hey, this is where the issue is. That quick error handling before you go ahead and launch your application and things aren't working, you don't know. Yeah, that's how to set up a type script, react application, hopefully that was useful. 12. Conclusion: Conclusion we talked about a lot in this video. From the basics of typescript to building out your own typescript web app. Going forward, you should be able to start building your own websites from scratch using typescript. Just remember to look up something when you're unsure of it. I'd love to see how your website turn out, so please leave a link to your code, a screenshot, or the hosted site in the Project and resources tab below, so that I can see all the hard work that you've done. I do read every comment, every review, and look at every project submission. So if you do have any questions, please feel free to leave a comment in the review section below or to reach out to me directly. Check out my profile page for more information about that. If you'd like to learn more about coding, check out the other videos I have on my profile page. I also have videos on Next GS and React available on my Youtube channel and website. I'll link those below and on my profile if you're interested in learning those as well, and I'll see in the next one.