TypeScript for React Native

[00:00:00]
>> All right so this course isn't about TypeScript I know I'm talking about TypeScript right now, but I'll just tell you a little bit in order for you to be able to follow along. So I'll do a quick intro to what you need to know for this workshop and we just open our code Okay, so, this is the projects that we've created.

[00:00:24]
And then at the rear directory, you'll see a Ts config dot Jason, and this is basically all the options for the type grid you can acquire that. And you can choose here whether to use strict mode or not, whether to allow implicit anys like how strict you want to do in your type checking.

[00:00:41]
Also whether you should ignore some parts, you can set up module aliases, or that kind of stuff. So this is the main conflict file All right, main things you need to know about TypeScript, how to declare types. So, suppose you had a user object that looks like this.

[00:01:03]
So, we've got a user and the user's name, age and hobbies. So, to declare a type for this object, we can use a type command. So, I'm going to do type user, so types are usually uppercase like soft then uppercase. So we're gonna do type capital user, equals and then we do name which is a string age number and then hobbies which is a string array.

[00:01:28]
So to denote an array, you can do the type and an array in the end, or you can wrap the whole thing in array. I prefer this notation. And then we can explicitly set the type of the object to be user. So here we say that user colon is of type user.

[00:01:48]
So here, for example, if I added additional fields that didn't exist in my user type, I would get type kinda error. So this actually quite handy to check using the TypeScript playground. So if I open this TypeScript playground can I actually show you this to you. Cool so right now it's happy but see I removed these hobbies array and you can see that this is going to error.

[00:02:33]
And similarly, if I added another field, like pets, which should also be a string array, then the user will error because it's saying that is missing my pets type. We can also have optional types. So this means that the argument is either typed or undefined so say that we added hobbies aside pets here, as a string array.

[00:03:05]
And it's saying, no user doesn't have pets, but then I can make it optional by adding a question mark after the pets. And now it's fine because you can have pets or you might not. So we can have another user if we did use a two and also make this off type user and say name, Paul, age 30, hobbies.

[00:03:30]
Let's make hobbies an empty array. This is also valid because an empty string array is still a string array. And then pets, let's say that Paul has a rabbit. And that is fine. So both of these users are valid user types. Then we have an or type. So you can use enums for this, but I prefer not to because It's less boilerplate if you don't, you can use this symbol which acts as an or between the options.

[00:04:02]
So for example, we can add a nationality. So we can have a nationality that's British, or American, or Estonian. So if I copy this Now it's saying I know both of these users are invalid because you don't have nationality. And I can do nationality British And here let's do nationality Estonian.

[00:04:25]
Now both of these are valid but we can only choose from these three options. So let's do German and it's actually going to say that German is not assignable to these three types because this I can do an or type
>> Can you declare a mixed array like strings and numbers in the array for example?

[00:04:51]
>> Yes, yeah, you can. So for example if hobbies was a string or a number you would do brackets and do string or number and then here, I could put numbers here. But I wouldn't be able to probe sample do an object. So this is going to say, it's not a string array number And lastly so when typing functions the word void is used to denote the lack of a return type.

[00:05:22]
So for example for this function, which is a logger, where it takes a message and returns nothing cuz we're just logging out this message, we would say that this return type is void. Now typing React Components. So here is a simple component that just imports react imports, text and return a greeting.

[00:05:43]
This component in TypeScript is exactly the same. The only thing that's different is notice that after the title of name of the component, we add react.fc. So FC stands for functional components. Now, the reason that we do that in this case, it knows that you should return a function you should return you should return something from it.

[00:06:05]
So for example, if you return no. It's fine but if you return nothing for example you forgot your return keyword which can happen to the best of us this is going to give you a warning it's going to say I think you meant to return something. The other thing you get for free is you get the children property, so if your function has children like children is typed by default you don't have to worry about them.

[00:06:29]
And to actually type the properties so here we have another user we've got react, text and we just take the first name and last name and add them together. In TypeScript we basically, we create a type for the user props the same way that we did before here, and we define all the props so you can use optional parameters or also whatever you want And then we pass it into React FC.

[00:06:55]
So basically this component is a component without any props if you add props you just add them here.