Are you struggling to type React components correctly? This TypeScript React tutorial walks you through using TypeScript in real React projects from typing Ustate to building reusable typed components with hands-on challenges throughout. Hey there, my name is Rachel and I'll be taking you through this React specific section of the Learn TypeScript course. We're going to be working with a very familiar project from the Learn React course called Assembly Endgame. If you took the React course, you'll probably recognize this. If you're not familiar, it's a hangman style game where with every incorrect letter guest, a programming language gets snapped out of existence until only assembly remains. You can actually pause the scrim right now and have a play if you so wish. Now, just a heads up, we're not going to be spending a lot of time tweaking or extending the game itself because the gameplay is already working very nicely. What we are going to do is reworking this project with TypeScript. So, here's what's coming up. First, we're going to do a quick refresher on vanilla TypeScript, just enough to get our heads back in the game, and then we'll shift into some React specific stuff, starting with typing use state and functional components. After that, we'll look at typing component props using both inline types and custom types and even importing prop types from other files. And finally, we'll tackle one of the most common patterns in React, typing function props. And of course, I will be throwing challenges at you every step of the way to keep your fingers busy. By the end of this section, you'll have a foundational understanding of how Typescript fits into a React workflow, and you'll be able to start typing your own React components with confidence. So, let's dive in. All right, it's time to get our hands dirty. In this scrim, we're going to create a brand new React project using Vit and we'll be setting it up with TypeScript right from the start. Now, you can install TypeScript into an existing React project manually, but trust me, there's a lot of config involved to get everything working smoothly. You'd need to install all the TypeScript packages, configure your config files, rename your files, set up type declarations. It's it's really just a lot. So instead, we're going to go with the cleanest and safest route and we're going to let Vit handle all of that for us. We're going to create a new project using Vit by coming down here to the terminal and typing npm create vit. We'll press Y to install create V. And for the project name, we're just going to scaffold it into this folder. So I'm going to put a dot. For the framework, we want React. And of course, the variant is TypeScript. Now we just have to install everything with npm install. We're not going to run it just yet because we'll only get a V starter project anyway. While it's doing that, let's have a quick look at the configuration files that we didn't have to handle ourselves. So first in package.json, it has all the React and V dependencies as well as some new TypeScript ones. There's TypeScript itself, TypeScript eslint, types React, and types React DOM. all which work together to make sure we have a breezy experience with Typescript. And then we have tsconfig.json. And this actually refers out to two other config files. There's tsconfig.app.json and tsconfig.node.json. And if we peek into either one, there's a lot of configuration happening here to make sure that Typescript runs smoothly with this install of React. Let's check out the install. And we're done. So now we are Typescript ready. I'm now going to do some extra housekeeping here to get our new project set up to accommodate our original Reactonly project. So, first thing I'm going to do is upload the original assembly endgame React project from the learn React course. It's going to live up here inside of the AE original folder. Inside of it, we're going to open up index.css and grab all of its content. And then we're going to come down to our new project and open up index.css CSS and replace all of the content in here. Back in the original project, if we open up package.json, you'll see two packages, clsx and react confetti that we'll need to manually install into our new TypeScript project. So, we're going to do that in one fell swoop. In the terminal, we will npm install clsx and react confetti. And I'll let that do its job. And one last thing, I'm going to come into our source folder here and delete anything from the boiler plate that we won't be needing. So that is app.tcss and the entire assets folder. And now the stage is set. We have the original React project up here to draw from. We have the new TypeScript ready react project to populate. And we've made sure to bring over the CSS and installed any required packages. Let's get typing with TypeScript from the next scrim. There are a few things that we can type right off the bat using what we learned in just the last section. We're going to start simple and have a look at the original words.js file. This file contains and exports an array of words or for our purposes an array of strings. Let's copy all of the content and then close the original and the folder. And in our source folder, we're going to create a new file and call it words.ts. Now, we're giving this the file extension of.ts ts instead of js because we're going to be using typescript here. And I'll paste the contents from the original. Now, let's throw you straight into a challenge. Using what you learned in the first section of learn Typescript, can you type this words array? Remember that you can hover over variables to see what TypeScript implies to be the type. I'm hovering over this words right now, but you're going to need to hover over it yourself if you want to see the IntelliSense pop up. or you can try to imply the type yourself. I'll see you in a little bit. Welcome back. This one should be pretty straightforward. We can clearly see that this is an array of strings. And if you did hover over the words variable, it would say the same thing. So, we'll start the type annotation with a colon and then add string and the array. And now this is fully typed. Next, we're going to have a look and handle this languages.js file. Before we start analyzing it too much, let's create its TypeScript counterpart in our app. So, we'll copy all of the content here and then close it as well as the original folder. And in our source folder, we'll create a new file and call it languages.ts again.ts instead of.js here because we're going to be using TypeScript. And we'll paste the contents. This one is similar to words.ts. It contains and exports an array of data, but here we have an array of objects. And each object contains three properties. A name string, a background color string, and a color string. And here comes another challenge for you. Type this languages array. And just know that there are two valid ways that you can do this. And remember, you can hover over things to get a popup of what TypeScript thinks the type should be. Like we said before, there are two ways to go about typing this languages array. First, we can use an inline object directly as the type annotation. So, we'll start with a colon and then we're going to open an object inside. We're going to start typing the properties right away. So, name is supposed to be a string. Background color is also a string and color is yet another string. And since this is an array of objects, we'll make sure to add the square brackets to the end of the object here. Now, this is just one way. We can also use a custom type, which is actually the recommended method. So up here, I'm going to create a new type and call it language. As its value, we're going to grab the object that we just wrote and we're going to put it up here instead. And now to type languages, we just have to refer to the type language that we just created up here. And this will work just as well. In fact, the way that we've done it now will actually come in handy a little bit later. So stay tuned for that. That was your quick refresher on basic and custom types. And we've already started refactoring and adding TypeScript to our original assembly endgame project. In the next Grim, we're going to have a look and start typing some functions. So, I'll see you there. Hello again. Here I have open the utils.js file in the original assembly endgame project. Let's grab everything and close the original. And over here in our source folder, we're going to create a new file and call it utils.ts. And we're going to paste everything. There are two functions here that we can work on. There's get random word and get farewell text. Get random word generates a random index based on the length of the words array, which we're importing up here at the top. It then uses that random index to return a random string from the words array. Time to recall what you've learned about typing functions from the last section for a few challenges. First, type the return value of get random word and then type the random index variable over here. So, give it a go and I'll catch you in a bit. Now, we know from looking at the code and the name of the function and hovering over the function that get random word returns a single word in the form of a string. So we can type the functions return value accordingly with colon string. And as for random index looking at both the name of the variable and the code itself as well as hovering over the variable we know that it will return a random index which is a number. So we can type that pretty easily as well with colon number. And just with these two little additions our get random word function is now fully typed. Now also in the utils.ts ts file we have the get farewell text function. Now this one takes a programming language name as a string and returns yet another string down here saying goodbye to that language as it gets snapped out of existence. We can already see up here that TypeScript is throwing a tantrum for the language parameter. If you hover over it, we can see that it's implying an any type which we know is a no-go. But this isn't the only instance that we can type in this function. So here are your challenges for the get farewell text function. First type the parameter, then type the return value. Then type the options array. And finally the random index variable down here. So go for it and I'll see you on the other side. Let's first handle the parameter of language since that's the one that TypeScript is all up in arms about. We know that the language being passed in is a string. So let's do colon string to type that right away. And now we can type the return value of the function which we know is also a string. And inside of the function we're presented with an array of options that this function can choose from to farewell the language. This is and you'll be very familiar with this by now an array of strings. So we'll type it with colon string and then an empty array. And then moving down to the bottom where it says random index. We know that index is a number. So, we'll just have to type this with colon number. And if you're getting a little bit of deja vu with this line right here, you're not the only one. We've definitely done this exact same thing before up here in get random word. I think we're doing a bit of repeating here. So, we're going to do a spot of refactoring and extra typing in the next scrim. So, I'll see you there. In the last scrim here in utils.ts, TS, we realize that we have two of the exact same line in both the get random word function and the get farewell text function. They both return a random index based on the length of an array, which is something we might do a lot in a game setting. So, we're going to refactor this into its own function and then type what we've refactored. And by we, I mean you. Your challenge is to dip into your JavaScript knowledge banks to refactor our code. So, we have a get random index function that both of our other functions can use. I'll start us off with function get random index and I'm going to let you finish the rest. First, complete the get random index function and then add type annotations where relevant and then finally use the get random index function in get random word and get farewell text. Have a go and I'll see you on the other side. This is what I did. First, I completed the function. I know that it's going to take a parameter and it's going to be an array. So, I'll call it R. And then inside of it, I'm going to return math floor math random times array length. And you'll see that this is exactly the same thing as we've done before. Then I added type annotations in a few places. First, it's this array parameter that TypeScript is already flagging. That's easy. It's an array of strings. So string and then an empty array. And then we'll type the function's return value which we know should be an index. And therefore the type is a number. So colon number. Now we can use it. First in get random word. We can remove the random index line completely. And in the return statement we're going to call get random index. And we're going to pass in the words array. And then we can do exactly the same thing for get farewell text. We'll cut the random index line completely and then in the return statement we'll call get random index. And this time we'll feed in the options array. And that's all the TypeScript that we can do here in utils.ts. Now that we've handled a lot of the TypeScript in our regular JS or TS files. Now let's finally look at the React component itself in the next scrim. The one and only React component we have in play here is this app.jsx in the original folder. Let's copy all the content and we'll close the file and the folder and come down here to our app.tsx and replace all the content. Since a lot of this file hinges on the two states that are being defined at the top of the function, we're going to make sure we type these first. By default, the use state hook will use the initial value to infer its type. If we hover over current word, we can see that it's already inferring a string type because of the get random word function. And if we try to break it with set current word and we'll set it to a boolean like true, we can see that it's already throwing an error. Come here and hover over true and you'll see that it says argument of type boolean is not assignable to parameter of type set state action string. So this works pretty well on its own, but it's only great if there is an initial value. If you come over here and hover over guest letters, you can see that it is typed as an array, but it's an array of any. And that's because the initial value over here is just an array. Guest letters should actually be an array of strings. So, it's best to explicitly type our states just to make sure that we are as foolproof as possible. So, to explicitly type a state value, we actually need to pass the generic type argument into use state itself using these angled brackets. Remember generics from the end of the first section? In this case, use state is set up to receive a generic type and we'll use that to type the current and new states. Under the hood, we can think of use state defined like this. It'll take whatever type we provide inside of the angle brackets and set both the getter and the setter types accordingly. In fact, if you come up here and hover over the use state import statement, you can see an abstract of how it's set up. And we can see the generic in action right here. So because it's set up this way, we can simply pass string as the generic argument here. By doing this, we're essentially telling React, hey, I want to create this state and it should hold a string type. Make sure that any current or new state values conform to the string type as well. Now, since we've already told Typescript that the state is of a string type, it should actually expect the get random word function to return a string. But if we want to be super explicit and get into the mindset of thinking in Typescript, we can also type the return value of this anonymous function right here. It does look a little bit different cuz it is using the arrow syntax, but it's actually really easy to type its return value. We just have to tack it on after this empty parameters parenthesis with colon string. Okay, now it is your turn. Type the guest letters state. We know that it's an array, but it's an array of what? Give it a go and I'll see you on the other side. We know that this is an array that would store a bunch of strings containing the guest letters of our game. So the state value should be a string array. So in our generic argument angle brackets, we'll simply have to provide string and then the array. And now when we hover over guest letters, and you should come here and do that too, we can see that it's properly typed even though the initial value was just an array. So with these two states typed up, we're ready to move down the file. And we'll start doing that in the next scrim. Hello again. Directly under the state values that we have just typed, we have a bunch of derived values. at the moment because we only have the one component. These are considered local derived constants. So, we don't actually need to explicitly type these because TypeScript will infer most of them correctly. You can actually hover over each of these to see that inference in action. But I do also really want you to get as much keyboard time as possible typing stuff. So, we're going to spend some time soothing types and typing these variables. There are also a few call back arrow functions here with some parameters and return values that we can explicitly type as well. So with that said, here is your challenge for this scrim. Take your time and I'll see you on the other side. Welcome back. Let's go through them all. And I'm first going to type the variables themselves. First off, we have numbum guesses left, which is a number. Wrong guess count is also a number. Then we have is game one which is a boolean and so is is game lost and is game over. Last guessed letter is a string and is last guess incorrect is a boolean. Now for the arrow functions we'll start with the first one. Letter is a string. So we can type it as string. But you'll notice that you'll probably get an error right now. And that's because we need to wrap these in parenthesis. And now the return value is a boolean. This second function here is actually exactly the same. So first we'll wrap the letter in parenthesis and type it as a string and the return value will be a boolean. Realistically we don't always have to type everything even though this particular scrim was good practice. TypeScript is pretty good at inferring types by itself. In fact we're going to leave this static alphabet const alone to show that we don't have to type everything. This one actually does very well on its own. come and hover over alphabet and you'll see that it's inferred as a literal type. It's not even just a string type, it's this exact string type. So nice going. We're going to keep traversing down this file in the next scrimm and we're going to tackle these two functions. We've typed the state values and the derived values in app.tsx and now it's time to handle the two functions that we have down here. Add guest letter and start new game. We're going to start with an easier one as a warm-up. So, here is your warm-up challenge. Fully type the start new game function. There is only one opportunity to add a type annotation here. So, look for it and go for it. Did you find it? So, start new game takes no parameters and returns nothing. All it's doing is setting some state. So for clarity, we can type the return value with a colon void just to cover our bases. Again, it's not strictly required, but it is good practice so that the intent of the function is clear to anyone reading the code and it helps catch accidental returns or unexpected values if the function is modified later. Okay, it's time for the bigger challenge. Fully type the add guest letter function. There are four places that we can add type annotations. Now, the first one is a must. In fact, TypeScript's already screaming about it over here. But the other three are less important, especially after handling the first one. In fact, TypeScript has already implicitly typed two of them correctly. But let's get into the habit of typing. So, have at it. See if you can find all four type annotations and I'll see you on the other side. Did you find all four opportunities? Let's have a look. The first is this letter parameter which is currently of an any type and TypeScript really doesn't like that but this is easily remedied by giving it the type of string. Then we have the return type of the add guest letter function. All this function does is set stuff and doesn't return anything. If you hover over add guest letter, we can see that TypeScript has already implied the type for itself. But to be specific, we're going to add it ourselves as well with colon void. Now there are two places left. The first is the previous letters parameter and then it's the return value of this entire call back function. Set guest letters is a state setter function and those take either a new value directly or it takes a callback function that receives the previous state by default. The latter is what's happening here. So, TypeScript can easily infer that both previous letters and the return value should be a string array thanks to our typing earlier in the states. You can actually see this if you hover over the arrow here. Previous letters is a string array and so is the return value of the function. So, realistically, typing this parameter and return value isn't necessary, but for learning reasons, we're going to do it anyway. So, we'll wrap previous letters in parenthesis and we'll type it as a string array. And we'll also type the return value as a string array. And there we have it. Both of our functions in app.tsx have been typed with TypeScript. And everything is a bit more specific and foolproof. We're off to a great start, but we've really only just scratched the surface in terms of React related typing. In fact, we've only touched on use state. In the next Grim onwards, we're going to be looking at React components and props. So, I hope you're ready to dive into something new and exciting. So far, we've only typed one aspect of React, which is use state. Most of what we've done has been typing plain JavaScript stuff like functions, variables, and that kind of thing. There are more React specific typing that we can do, but that's more doable if our app is split into components. And that's what I've done to our project here. So, let me just run the app with npm install and mpm rundev. So, we can match up some components to the visuals. So everything that we once saw in the app.tsx file, all the functions that determined how things were rendered have been pulled into components in our components folder. All of these components have been imported and they're being used in the JSX down here. All the components but one take a bunch of props in order to render the elements the same way that the previous iteration did. So from top to bottom here, we've got confetti container which renders the endgame confetti. We've got the header component, which renders this static content right here. We've got game status, which if we click on an incorrect letter, takes care of the status bar that pops up to say goodbye to the languages. Next up, we've got language chips, which renders these languages and handles the death of them. And then we have word letters, which handles the empty or revealed character spaces for the word that we're trying to guess. Next, we have Arya Live status, which controls the visually hidden status updates designed for just screen readers. And then we've got keyboard, which is pretty self-explanatory. This component handles the onscreen keyboard that users use to guess the word. And finally, new game button. Now, this is the button that pops up at the end of a game. So, if we try and complete this, which I don't think I will correctly, we have the new game button right here. So, this scrim was just to introduce the new setup. But since you're here, feel free to pause the scrim and have a look around the refactored React project to check it out. We'll start we'll dive into typing React components in the next scrim. Something React related that we can explicitly type with TypeScript are React components themselves, especially if we're using a functional component. Now, our assembly endgame project does use functional components, so it's the perfect candidate for us to type. I've got open here header.tsx to explore this since it's a pretty static component and doesn't take any props at all. It just renders the h1 and the p tags that we see at the top of the app. Just as it is right now, hypescript will infer the type of the header component by itself. We can see this in action by hovering over header where we can see that it's of the type react JSX element. And this is exactly what this function is returning right here, a ReactJSX element. And if we try to change the return statement to something like true and now hover over header, we'll see that TypeScript has now inferred the return value to be a boolean, which is technically true, but we won't do that. So, as long as we're returning a JSX element like we would for most functional components, we won't need to type a React component, but we could if we wanted to, like if we're working with a large codebase, or we want to make sure we don't accidentally return anything but a JSX element. To do that, we're going to need to import the JSX type from React and then use it to type this element. So, we're going to import the type of JSX from React and then we'll use it to type the return value. So, jsx.element. Now, some React programmers do this and some don't. It's really up to you and how tightly you want to type things. But since we are learning about TypeScript right now, we will keep doing this throughout all of our components as we get to them just to form that type scripting habit. Now, here's a quick note. If you are looking at React projects out there that are using TypeScript, you might also see components defined and typed like this. Now, here we can see React.fc. This is a generic type that can also take a generic argument of props. It automatically types the return value as a JSX element which is great. But the slight downside is that it does include children in props by default even if it's not used. That last point along with a few others like default props and child typing is why TypeScript users are now defining components with JSX element instead. So we will be sticking with the version up here for the rest of this TypeScript section. So now we have our very first component typed. It was super straightforward, but it's only going to get more exciting from here. Starting from the next scrim. Hello again. In this scrim, we're going to be looking at this confetti container component. It's pretty simple and it does its one job very, very well. It imports a confetti component from the React confetti mpm package and then it returns the component over here if the game has been won. If not, it will return null instead. So, this is going to be a very quick scrim, but here is a challenge for you. Explicitly type the confetti container components return value. Now, if you need a reference, remember that you can hop back into the header component, but I am going to warn you that it's not as straightforward as the last one. Be sure to carefully check what this function might return. I'll see you in a bit. Welcome back. Now, of course, we will probably be returning this JSX element right here. So, let's import the JSX type from React with import type JSX from React. And just like the other component, we're going to type this one to return a JSX element. But if we stop here, we might run into some issues later. Because of this if else statement, there is a chance that this component will return null rather than this JSX element. So, what do we do here? Remember unions from the first section of this TypeScript course? This is where we can use it. This function will return either a JSX element or it will return a null and that will safely handle either case. Now we can safely move on to typing this is game one prop but in the next scrim. I'll see you there. Welcome back to the confetti container component. In the last scrim, we typed this functional component with the JSX element or null, which covers both of the cases. Now, we're going to handle the component prop. Come over here and hover over is game one. We can see that it's of an any type, which we know by now is not what we want in Typescript. When we're passing data between components, which we often do in React, it's very handy to be able to check data types to make sure we're passing through the right kind of data. As you'll probably know as a React developer, React component props are defined between these curly brackets. And all we have to do to type them is to type the entire set of props. The syntax starts as we expect with the colon to provide a type annotation. And now we have to provide an object that contains the props and the matching types because we only have one which is is game one. This will be very short for us. So the prop is is game one and the expected type is the boolean. And that's literally it. If you come and hover over is game one now, we can see that it's of a boolean type instead. But what if we had multiple props? That's super easy as well. We just have to keep chaining it on. So we might have a second prop called prop 2 with a type of type. But of course, that's not the case for us. So let's get rid of those. And here we have a fully typed component. The component itself and the prop. Now there's not much left to type in the confetti container component. So, we're going to hop on over here to the game status component. We can see that it is a functional component and it will definitely return a JSX element. So, we'll keep that in mind. Up here, we can see that there are five component props this time. Although we've only worked with a component with one prop, I have showed you how to chain on multiple prop types. So, here is the challenge for the rest of the scrim. First, explicitly type the game status components return value and then type all of the props of game status. And if you're unsure of the types, make sure to check app.tsx. So, give it a go and I'll see you in a bit. Welcome back. This is how to go about it. First, we're going to explicitly type the game status component itself. We know that it will only ever return a JSX element. So, this is easy. We're going to first import the type of JSX from React and then we're going to type game status itself. So over here after the parenthesis we'll add JSXelement. Now we can handle the props. So first we're going to start with the colon and then we're going to open the object literal. And because there's so many I will put one on each line. Now all five of these are just derived values from app.tsx. So even if we can't remember what types they are or infer from the name, we can always go and check. So is game one is a boolean. Is game lost is also a boolean. Is game over is yet again a boolean. Is last guess incorrect is you guessed it, boolean. And finally, wrong guess count is a number. And there you go. All nicely typed. Well, nicely is a strong word. It's actually starting to get a little bit messy to be honest. So, in the next scrim, we're going to tidy this up a little bit. In the last scrim, we went through these five props and we typed them all in line down here, which does work, but it's definitely starting to get a little bit messy. And you can imagine how much messier it will be if we had even more props. So, we're going to use what we learned back in the first section and make use of custom types after our import statements, but before the function, we're going to create a new type and call it game status props. Now, this naming convention of component name plus the word props is pretty standard, so you'll see it across our app as we move along. And for the value, we're going to grab the entire object that contains the props and their types, and we're going to pop it up here instead. And I'll very quickly fix the indentation here. And now that we have the custom type of game status props, we can use it down here to type all of our props in one go. Game status props. And that's it. It's now much cleaner and easier to look at, and it still works. Now, you will have a chance to create and use custom types like we did here in the next scrim. But since we're already here in the game status component, let's do a quick vanilla TypeScript challenge. Down here after the function declaration, we have a game status class variable which uses the clsxmppm package. If you're unfamiliar with this package, all you have to know is that it conditionally constructs and returns a class name. What type do you reckon that would return? Give this challenge a go and I'll see you on the other side. So, this one should be pretty straightforward. A class name is traditionally a string. So, we'll type this as a string. And that's done. Now, our game status component is very tightly typed. Let's move on to something else in the next scrim. In this scrim, we're going to have a look at Arya live status. This is a component that will definitely return a JSX element. It's got four props and all of them have types that we can work out just by looking at the app component. In the return statement itself, we also have a TypeScript warning here for letter. Although this code is inside of the return statement, the typing works the same way. Now, you actually already know enough Typescript and React to be able to fully type this component. So, here is your challenge. First, explicitly type the area life status components return value. Then, type the components props using a custom type and then finally type any variables in the functional component itself. Give it a go and I'll catch you on the other side. Welcome back. Let's work through these challenges. First, we'll explicitly type the components return value. We're going to import JSX. import type JSX from React. And then we're going to use it directly here to type the return value of area live status. So, JSXelement. Then we'll handle these four props. We're going to create a new custom type right under the import statement. And we're going to call it Arya live status props. as its value will have an object literal that targets each one of these props and assigns each of them a type. So current word is a string. Last guest letter is a string. Guest letters is an array, but it's a string array. And num guesses left is a number. And now that we have our custom type, we can use it down here to type all of our props. Arya live status props. Now that we've done that, some eagle-eyed students may have noticed that the warning that we had under letter has disappeared. And that's because current word is now explicitly typed. It was an any type before, which means that this letter was also an any, which we know that TypeScript doesn't like. And since there's no harm in explicitly typing this letter, let's do that as well. So letter itself is a string and this callback function will return a string type. And now our Arya live status component is strongly and fully typed. Let's move right along and type our next component in the next scrim. I'll see you there. There are only a few components left to handle. And next up is this language chips component. We're going to first type the functions return value. And since you're very used to this by now, let's do this as a very very quick challenge. So, as you've done many many times before, we'll import the type of JSX from React. And then over here, we'll type the functions return value with JSX.element. Okay, moving on. What I want us to focus on in this scrim are the props, especially this languages prop. You may remember from the beginning of the section that we worked on this languages.ts file. This entire array of languages is what will be passed into that languages prop. We've got a custom language type set up up here which we're going to need to access over here in language chips in order to type the languages prop. And this is where I'm going to hand it over to you for a challenge. You're going to have to pull together everything you already know about JavaScript and TypeScript to get this type over here to this component in order to type this prop. and then type the rest of the props. Good luck and I'll see you on the other side. Welcome back. The main part of this challenge is to get the language type over here to the language chips component and we can do that with a vanilla JavaScript export. So over here in languages.ts, we're going to add the export keyword so that we can access this type elsewhere. And then back in language chips.tsx, we're going to import that. So import type language from languages. And now we can use this language type. So let's type our two props here. We'll create a new type called language chips props to follow the naming convention. And then we'll target our two props. So languages should be an array of languages where the language is this type. And then wrong guess count is a number. And then we'll use this entire new type to type our props. Language chips props. And there we go. Now that the props are nicely typed, we're going to move on to typing some variables in the component itself. But we're going to do that in the next scrim. Welcome back to the language chips component where we've just typed our two props. Now we're going to move into the component and type any variables that we find. There are three pretty straightforward ones right here. There's is language lost, there's styles, and there's class name. We're going to start off the scrim with a quick challenge to type all three of them. And hint, you may have to use TypeScript's emit utility type. Give it a go and I'll catch you in a bit. Now, two of these are pretty straightforward. Is language lost is a boolean and class name is a string. But styles might have been a bit trickier. We can see that it's an object that contains a background color string and a color string and those should ring a bell. If we come over here to our languages file and check out the custom language type, you can see that background color and color are two out of three properties in this language type. So, we should definitely take advantage of that. So, back in language chips, we're going to type styles this way. We're going to use the emit utility type and we're going to say that we'll use everything from language except for the property name. And that's how we do that. So with that out of the way, we're going to hit the actual challenge of the script. We're going to be typing the call back arrow function inside of this map method as well as language elements itself. I'm going to throw you in the deep end now with a challenge. First, type the parameters of the callback function. Then type the return value of the callback function itself. And then finally type language elements. Remember that you can hover over each of the parameters, the arrow or language elements itself to check out what TypeScript is inferring. But I do want to encourage you to try it on your own first. So good luck and I'll see you on the other side. Welcome back. I hope that was a good challenge and really stretched your brain. A little challenge is a good thing when learning new concepts. Let's start with lang and index. Lang is a single language type. An index is a number. Next, let's tackle the return value of the callback function. We can see from the return statement here that we get a single JSX element every time. So, we'll get to use that JSX import again. Over here after the parenthesis, we'll type the return value as JSX element. And since what's being returned in each loop of the map method is a JSX element and map returns an array containing the value of each loop. Language elements should be an array of JSX elements. And we can do that with JSX element and then an array. And there we have it, a fully typed language chips component. That was a slightly longer scrim. So feel free to take a break before you join me in the next one where I'm going to challenge you to fully type one of our components using everything that you've learned so far. Here I have open the word letters component that needs a bit of typing. Now you already know more than enough to fully type this one. We've got a component that definitely returns a JSX element. It's got three props, a map method, and a handful of variables that we can type explicitly. So with that introduction, here is your challenge. First, explicitly type word letter components return value. Then type the components props using a custom type. And then finally, explicitly type any variables in the component itself. I'll catch you on the other side. Welcome back. Let's tackle this together. First, let's type the return value of the word letters component itself. Now, we know that it returns a single JSX element. So let's import the type of JSX from React and then we'll type it right here with JSX.element. Next up are these component props. So first the custom type which we'll call word letters props to satisfy the naming convention and then inside of it let's target all three. Current word should be a string. Guest letters should be an array of strings and is game lost is a boolean. And now that we have that type, we can use it to type all of our props in one go with word letters props. And now any TypeScript warnings that you may or may not have seen down here have disappeared. But we can always benefit from some explicit typing. And there are a few things that we can add type annotations to down here. First, we're going to type the two parameters of the map method. So letter is a string and index is a number. And as for the return value of this callback function, we can see that it is returning a JSX element. And we can also see this if we hover over the arrow right here. So we'll just use JSX element to type this function. Inside of the function, we also have the should reveal letter variable as well as the letter class name variable. Looking at the code for should reveal letter, we can tell that this will be a boolean because of the or right here. So we'll type this as a boolean. And as for letter class name, we've seen clsx in action before, so we know that this should return a string. And there we have it. Another component done. And this time it was 100% all you. We're getting very close to fully typing the entire React project now. And in the next scrim, we're going to have a look at how to type a component prop that's also a function. I'll see you there. If you've been keeping track of what components we've worked on, you'll know that there are only two left. In this scrim, we're going to tackle the new game button component. We can see from the code that it looks relatively simple. It takes two parameters and it returns either null or a JSX element. It looks really easy, right? There's not much here. But don't be deceived. One of these props is not like the other. Now, is game over is a derived variable from app.tsx. But start new game is more than that. Let's hop on over to app.tsx and have a look. Start new game is a function that we typed near the beginning of this section. This function is what gets passed into the new game button component all the way down here as a prop. So how do we type that? Back in the new game button component, I'm going to very quickly type the components return value. So import type JSX from React. And this will return either a JSX element or a null. Okay, let's start handling these props. First, we'll create the new type and we'll call it new game button props. And we'll make sure to include the first prop here. Is game over? We know is a boolean. But now we have to think about start new game, which is a function prop that returns void. So, I'm going to throw you in the deep end now with some syntax to try and give this a go. The syntax you'll have to use is the prop name and then the parameters parentheses and then the arrow and then the return type. Give it a go. Welcome back. How did you go? This is how we would type a function prop. So first we'll specify the prop name like any other prop. Start new game. And then according to the syntax we're going to need to provide an arrow syntax function. For parameters, we'll just need to list the parameters and their types. But this function doesn't take any parameters. So then we have the arrow and then the return type, which we know is void. And this is literally it. This is how you type a function prop that takes no parameters and returns nothing. If the function did have parameters, maybe a string, and then it returned a number, it might look like this instead. So let's say it had a name prop that was a string and then it returned a number. This is how we would type it. But ours takes nothing and returns nothing. So we will revert this back. And now we have our new game button props to use over here. New game button props. And all is well. And that's how we type any functions that are being passed in as props. All right. Now you know there's only one component left to type. And in the next Grim, you're going to tackle it in its entirety. I'll see you there. Welcome to your final challenge. In this scrim, you're going to be fully typing our final React component here in keyboard.tsx. It's got almost everything that we've learned so far from vanilla TypeScript to more Reactspecific typing. So, here is your final challenge. Fully type the keyboard component. You'll have to handle the return value of keyboard. You'll have to handle the props. And you'll have to explicitly type all variables inside of the keyboard component. Remember that you can always refer to the other components in the editor to check out how we've done certain things before. Good luck on your final challenge for this section and I'll see you on the other side. Welcome back. I hope you enjoyed your final challenge. Let's walk through it together. First, we're going to type the components return value. And we can see that it's definitely going to return a JSX element. So, first we'll have to import the type of JSX from React like we've done so many times before. And then we'll type the return value over here with JSX.element. Next, we'll handle the five props. And just like we've done so many times before, we'll create a new type and we'll call it keyboard props to adhere to the naming conventions. And then we'll specify all five of these inside of it. So, alphabet will be a string. Guest letters is an array of strings. Current word is a string. Is game over is a boolean and add guest letter is a function. So we'll have to provide the arrow syntax. Now it returns nothing. So we'll put void here. And it does take one parameter called letter which we know is a string. And now that we have this, we can use it to type our props by tacking it onto the end here with a colon and keyboard props. And now we can move down and tackle any and all variables inside of the component itself. We're going to work backwards. So I'm going to start with the smallest pieces first and then work out to this map function and then the variable that contains it. So first I'm going to do class name. We've seen clsx before. So we know this is going to be a string. Then is wrong is a boolean and so is is correct and also is guessed. Moving up, we have this letter parameter which we know is a string. So we'll wrap it in parenthesis and type it string. Then the return value of this arrow function is this entire JSX element. So the type would be a JSX element. And finally keyboard elements. Just like other maps that we saw in other components, this would be an array of JSX elements. So JSX element and then the array. And with that, the final React component of our assembly endgame project has been typed. Well done. And would you look at that? We've taken our beloved assembly endgame app from Learn React and leveled it up with TypeScript. Functionally, the app still works the exact same way, but now it's fully typed, which means better readability, fewer bugs, and a smoother developer experience. Same app, but stronger and just a little bit fancier. Here's a quick recap of what we've covered in this TypeScript plus React section. We started with a refresher on vanilla TypeScript. Then we looked at how to type use state properly depending on what we're storing. We then went over typing React components using the imported JSX element type. And from there we looked into typing component props both the inline way and the cleaner approach using custom prop types. We also touched on importer types so we can keep things modular and clean. And finally, we covered typing function props, which is super common in React when you're passing callbacks around. So there you go. Same app, new superpowers, less guesswork, fewer bugs, and way more peace of mind. So thank you so much for coming along with me on this TypeScript and React journey. Until we meet again, I've been your teacher, Rachel Johnson, and I'll see you next time.
Generated algorithmically for Search Engine
Indexing.