So to start off, I'd like to use this boilerplate called create react app typescript.

It's very similar to create react up, but it is using typescript.

So link this inscription below.

So I'm gonna be using this as a starter for today.

And here is what?

The color it looks like I haven't touched anything.

But by default they give you a nice T s config with some good defaults.

And then we can go in here and changing of these if we want to.

And then also they have a T s flint um, which is nice as well, which is silence your typescript code.

So you have both of those by default.

You don't have to worry about them.

So let's just dig into some of the things that are different.

So, first off, how you actually import react?

So look at the top up here.

I have import star as react react on.

The reason you have to do that is because react is not export anything by default scenario, import, all react like that.

And also when you're installing other third party libraries, you might have to do the same thing as well.

Uh, it really it'll tell you when you're doing it, what you need to do, it'll have, like, little red lines.

Like if I get there, that's gonna be like, Hey, this has no default export.

This is what the air looks like.

And that's how you know you need to switch over to this.

All right?

The next thing is, how do you add basically types to your react components?

So to demo this, I'm gonna create a new thing.

I'm gonna call it form dot t X T s X, and you'll notice your file names are different.

That's another thing.

So instead of Js exits TSX and I'm gonna copy these to make this faster and don't eat those.

So this is going to be a formed component and wouldn't be this out.

All right, so first off, this guy might have props.

So what I like to do is create an interface called props and then here specify all the things that you can pass to this component.

So maybe this component has some text, which is a strength.

And then maybe It also has a age.

I don't know.

This is just a random value, which is a member, and maybe that is optional.

So the way you tell your component is you do angle brackets at the end, you and then you pass in props like that.

Um, and now and, uh, I'm not sure what it's mad at.

Oh, this is, uh, likes to start with I the beginning of the interface.

This is a tea.

Excellent thing.

So we could do it like that if you wanted to.

I usually turn that rule off, though.

Okay, so we have the props here, So right off the bat will get some nice auto completion if we try, like de structuring our props.

So if I want to get, like text, I can now render a div with text.

So now we know we're gonna get this problem.

The other thing is state.

So I might have, for example, name which will set of people value just empty string.

And we'll also have an e mail, which is a string of Well, so you'll notice it's already not liking stuff.

Oh, it's sorting.

It doesn't like this because it looks like we haven't label that public, private or protected.

I don't really usually mess with this stuff.

We can label it private, I guess because we don't want anyone else to use our state.

Usually that rule, I'll turn off in T s lint as well, and then let me show you guys I'm talking about.

So what I'll usually do is when I don't like some of these rules that just kind of annoying, and they don't really help me.

All copy.

Um, so remember, access singing prince sees come over here, t excellent and rules you paste it.

And then you put a zero for you don't want to follow it, and then it will no longer bug you over here about it anymore.

And I think I just do false.

So now we no longer are bugged about that, and that's you just turn him off like that.

Okay, so the state, we also need to have a type four.

So again, I like to create interface called I state.

So here we have an email, which is a string and a name, which is the string.

And that is the second thing you add to the angle brackets, comma high stake.

And if you don't have props, um, what you can do is you can just put an empty object and in this state, And then if you do not have a state, you can just leave it like this and not worry about it.

And we can also set her state here like that.

So there we got I state and we specifically saying what it is.

And then we couldn't again.

We have now that's a nice auto completion for ST.

And they'll tell me the two properties, some name, and maybe I'm showing the name.

And the nice thing about specifying the props on your component is now if I'm over here, I try importing that.

So get rid of this junk.

If I were to do our form and it doesn't look like it, I wanted it just auto import this guy for me.

Maybe it's because they didn't call it for him.

No, I did that sad.

We'll just import it ourselves and only those two.

Okay, so immediately we get red lines because we specified that we need to have at least the prop text.

So that's how we know and we can say hello.

And then the red lines go away.

If we try added, adding any other type of property like maybe a is gonna be five.

It's not gonna like it, but I can't add, for example, age, which is optional.

So that's the nice thing about specifying the props on your, uh, component.

Um, the other thing here is just a common scenario is you'll have, like, an input helmet, and I would say that's my name, and value is going to be named and on changes people to this stock handle change.

So this is if you want to do a form and react.

So here, we're getting the this guy right here.

So this is an event.

So we have to specify what the heck is the type for this event, right?

Well, it's gonna be reactive form of it, and then you have to specify the element.

So this is ht male input.

So this is a little bit weird, but this kind of stuff you can just Google whenever that comes up, I'd use this one a lot, so I haven't memorized.

But, uh, you expect this function here to give you And I guess it just pops up now because we added it here.

But it's gonna give us a form event.

And this is coming from an input element and the reason why I put input element here because this is called input.

If this was like, for example, text area, I would put a shingle text area element.

And then from that I can say const target and then what I usually like to do, which is get the name in value and then update the state with those, um, and with this one, it doesn't pick up on the types for whatever reason, and that's what it's complaining about here.

So what I usually do is I just say any, um so don't worry about typing those.

If I wanted Thio, I could say name is a string and values the screen.

Either way works well, I guess, uh, name.

So Okay, here's a little well, uh, cute thing.

So now that we have set the interface of state here, it knows that we can only have the keys, email and name, So we can't just have a generic name value here.

And what I mean by that is it protects us.

So, for example, right?

And what is it not like here?

Oh, it's just not assign able, uh, already, But we don't worry about that part for now.

So it's see outside have said stay here.

We have name as one of the keys, and that's good.

But if I were to say name, too, it knows that name, too, is not in my interface or in my state.

So I could not actually at it.

So it protects you there and checks the type for that.

But anyway, yeah, that's why I just like to use any Is that really easily, Just, like, fixes all the types?

Because I know I know what I'm using is correct.

The other way you can get around that is like, um, you can get, like, the key of this interface.

This is a trick I use sometimes.

So its name.

And we're gonna say it's a Kiev high state.

So and values strength.

Um, okay, it didn't like it, but this is a little trick where Kiev is now a, uh, one of these things.

It's either, uh, email or name, but it doesn't like it.

I'm just gonna keep it back, Thio any.

But that's a little trick you can use in other cases where you're working with objects anyway.

So that's how you do handle change if you're doing forms and typescript.

Um, the other thing I wanted to talk about was importing libraries.

So a lot of times you'll be important libraries that air, not typescript libraries, for example.

I might wanna have blowed ash.

So let's say I just yarn ad load ash here.

Oh, and I messed up my note insulation, so I need to just add this real quick.

Um, and we're on this again.

So when that is done, we can now import something from load ash.

Right, Um, load at and maybe only used the omit a guy the MIT function in.

First off, it doesn't like that I haven't ordered in the wrong way again.

This is another rule.

I like to just turn off, come over here and say falls.

All right.

So I'm just going to say, omit from the props, the name, not name.

So it's just me using, um, it just to be silly, but the point at all and show you is Look at this little air we get could not find declaration file.

So we don't have any types for this load, Ash right now and because it's written in job script, so we don't know what the types of any of that is.

So one way you can do is just say all of them are anything and the way you do that as by declaring the module.

So here is images that d dot t s.

This is in this folder.

You can see they already declaring a module for some of these things.

We could declare module load, ash and now it doesn't have any problems.

So now this is gonna be typescript.

Thinks load Ashkan be the type of anything.

You can also specify specifically what the types of all the load ashes things are.

And by the way, you can create other like I can create my types.

All that matters is you have the dot dot t s at the end of it, and so I could move that over here as well, and you could declare your type in there.

Um, the other thing is, what's nice is that it's not very nice toe.

Have, um no types for your libraries and other people will need the types as well.

So there's something called definitely typed that adds types for all these things.

So you don't have to go and do this so we can just leave that.

So the way you do it is you say you are an ad.

It's actually another package.

So at types slash load, ash.

So this is a, uh uh at the beginning at types slash and in the name of the library.

Now, they don't always have all the libraries, but they have a lot of them.

In this case, they have low dash.

So now we have the types for low dash, and it'll actually and we can hover over.

And we can see actually what the type of this emit function is s So that's super nice.

Um, and I think that's about it.

When working with react and typescript.

Now, you'll probably run into some things where you're using, like higher order components, and it could be really hard to type them with that stuff.

I recommend just Google and go to stack overflow for that stuff.

It can get really complete or just using that any type with that sort of thing.

Um and then Ah, yeah, That's pretty much it.

With libraries, you might have to be importing like this, like with react, and then also remember to install your types.

So here's my package.

Which a salon here.

The types and you can see they already install some types for you.

Like react.

And what these are is just type declarations for typescript that someone really just went through and added all the types for, like, low dash.

Yep, that's it for the CEO.

Guys, Thanks for watching.