Primitive Types in Flow
We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.
[00:00] So I have a project set up here called flow annotation, and inside of this project I actually have a script inside of my package.json file, and it's called typecheck. Typecheck is just a script that uses the flow bin package, and it calls the checkCommand on our source directory. Let's go and actually create a file under our source directory, and here I'm just going to call it primitive-types.js. Now that it's created I'll open it up and add the @flow pragma at the top of the file.
[00:41] Let's go and open up a new tab now in our terminal, and just for an npm run typecheck just to make sure everything is working the way we think it will. Here we have zero errors, so it looks like we're good to go to actually start writing out some primitive types in flow.
[00:58] Switching back into our file now, we can start talking about the built-in types that flow actually provides. At a high level we have some primitive types that we're going to be using, mainly string, number, and also Boolean. We can annotate our variables using these primitive types by just doing the following notation. Say we had a variable called someNumber, and we'll give it a value of a number, we can annotate this with our type by doing colon and the number. Here we're telling flow that the variable someNumber has the type number, and the value of it can only be some kind of number.
[01:45] Let's say we actually changed our variable someNumber to be a let declaration, and imagine later down the road in our project we actually changed the value of someNumber to be equal to the string foo. If we went and actually ran this through our type checker, if we did npm run typecheck, we'll see that we actually get an error from flow that's going to say that we have a type mismatch error.
[02:14] So flow is just giving us an error because we're assigning the value foo to the variable someNumber, and flow is picking up that the foo value here is of type string, and it's just letting us know, or flow is letting us know, that this type is actually incompatible with the type number, which is what we used to annotate our someNumber variable at the beginning of our file.
[02:40] We can actually use string and number type annotations in a similar way, so here we'll go and define a variable called someString, give it the type string, and its value is going to be the string foo. We can do the same thing for a variable called someBoolean, we'll give it the type annotation of Boolean, and in this case it's going to be true.
[03:05] Now the same principles hold as what we demonstrated in someNumber, if I went and said someString is now equal to a number, or if we did someBoolean is now equal to some kind of string, we went and ran npm run typecheck again, flow is going to complain that we have some type mismatch errors where we're assigning a variable, or the variable someString with a value of type number where we're expecting a string. The same thing happens for the Boolean, where we're giving it a value of type string but it's expecting the type Boolean.