In this video, Emmanuel Henri installs and sets up Flow for type checking. Then he adds a quick type check on the feeditem.js file so you can see it in action.
- [Emmanuel] There are two ways to do type-checking with React. One is to install the PropTypes library and the other one is using Flow, we'll do the latter. So, let's go ahead and install Flow and start using it. So, the first thing I want you to do is, first, get the integrated terminal open. So, I'll click on Integrated Terminal or use Ctrl+` and let's stop the servers with Ctrl+C. So, we'll install a flow-bin, so let's do an nmp i or install - -save and I may have mentioned this in this course, I know I've mentioned this all the time, if you are using a latest version of nmp, you don't have to do --save, but I do it just in case you're using an old version and we need to install flow-bin, like so.
Okay, so let it install. Okay, so, flow-bin has been installed, now we'll do just a little bit of cleaning here in the package.json file, so let's open it. And flow-bin has been installed, so we're good. Now, I want to remove all those dependencies here and the reason being, we're not using grunt anymore, so we actually removed it from our Legacy application, so we don't need it anymore, so let's go ahead and remove all these.
These are all grunt-related and let's remove it, save our package.json, and I think the right thing to do at this point is to delete our entire node_modules folder and just reinstall all the libraries, just to make sure that we have our dependencies installed properly in a clean application. So, let's go back into our terminal, so let's click on View, Integrated Terminal, and let's reinstall by doing nmp i or install.
Okay, so, all of our dependencies are now installed, so let's do a little script inside of our package.json here. And you want to go on line 50 and then, just do a comma here and then enter, and then, we'll enter flow and call flow. So, whenever we do nmp flow or nmp run flow, we are going to call flow. Let's save that and then, we'll initialize the Flow configuration file that we need, so we'll do an nmp run flow init.
And we got our initial Flow config file. So, that's the needed, even though it's empty right now, we don't have any configurations. So, these are advanced configurations and I'm actually going through some of them in my Testing and Debugging course, but for the time being, let's just say that these are all options that you can enter for Flow. So, before we start our application, we'll actually go and set up our types and then do a flow-checking with Flow.
So, let's go inside of our source folder, components, and then, in our feedItem. And this is where we're going to use Flow. So, the first thing to do when you want to use Flow is, you insert a comment at the top, like so, so @flow. So, that means that this file needs to be checked for type-checking. So, let me give you a quick introduction to what type-checking is with Flow. So, what type-checking allows us to do is to predefine and declare exactly what the values or the types of values we are expecting in this particular component.
So, right now, we have three values. We have a link, we have a title, and we have a description that are passed from our props here. So, let's do a type-checking and the way you define a type is, basically, by doing type and then, the name of your type, this is an Item and make sure you have a capital I, and then, you define what the Item is passing. So, right now, the reason why I'm using Item is because from feed here, is what I'm passing here, so I'm passing an item to each feedItem and here is the item that I'm passing.
So, here, the props is the item and we'll change that to item, actually. So when the item comes in, inside of the item, there is a feed, so we need to define the feed and the feed is an object that has a title, it has a description, and it has a link. And for each of those, we need to define what the type is. So, for example, for title, we need to define it as a string.
So, we're expecting a string for the title here. For the description, same thing. So, if we were expecting a number, then you would do a number. If you were expecting a true or false value, then this would be a Boolean, and so on, so fourth. So, again, if you need more details about type-checking, check my Testing and Debugging course. And finally, we are expecting also a string from link. Don't worry about this warning here, item is defined, but never used.
I will use that in a second, but what we'll get in a second as a warning from JS is that we can only use a .ts file, which is TypeScript, this is another library to do type-checking, and because TypeScript comes from Microsoft, VS Code comes from Microsoft, they're kind of sided towards TypeScript. It's not a bad warning, let's just say that. So here, as opposed to do props, we're going to do item. And it's fine because the prop itself is called items, so if you remember, from feed we are passing item.
So passing item here is fine. Let's make sure that if you pass item here, you are passing item across the board here. So, let's change the props, and do Option+Click to all those, and make sure now it's item, otherwise, your application is going to break. And the way to check that this item has these values is by doing colon and passing the type, like so. So, right now, if we are running Flow, it's going to check that link, title, and description are of type string and if that's the case, then we are good.
So, again, like I said, the warning that we get here is from the fact that we're not using a .ts file for type-checking and that's fine. So, let's save this and open up your terminal, so View, Integrated Terminal, and then simply run Flow, so nmp run flow and it's going to do type-checking. So, right now, it's initializing the Flow server and it has returned no errors.
That means that it has checked that file. So, it looked at all the files that has this mention at the top and then checked, okay, so, there's a type that's defined, Item, and then it checked the item prop that it's being passed to this particular function, needs to be check with the Item type and link, title, and description are of string, then yes, we are good. So now, you have type-checking within this particular file. There is more than meets the eye on type-checking, but if you want to learn more about it, check out my Testing and Debugging course.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking