Now of course in bigger react applications you work with more than just use ref and use state to understand
how you use typescript there.
It's really always helpful to simply hover over the functions you're calling.
So the other hooks you're working with.
For example if you would needs to use effect here in the new to do component for whatever reason then
you can call it and simply hover over it thereafter to understand with which types it works for example
that the first argument is an effect callback which is a special function where types will warn you
if you set it up incorrectly that the second argument is either nothing or an array of anything.
Things like that.
This will always help you you also learn that use effect doesn't return anything for example and on
use state where I mentioned that you always get back in array with exactly two elements while you also
see that here use state returns an array.
That's what we see here opening and closing bracket where the first element is of your generic type.
So list off to do this because that is your state snapshot.
And the second element is a react dispatch function here in the end.
That's what's happening here.
So that can be useful.
Maybe you're also working with redux.
Well thankfully if you dive into their documentation you also will find instructions about using redux
with typescript here under recipes you find usage with TypeScript and there you can learn how you can
add types to your actions and to your reducer is into your state management with redux.
It's really straightforward not complex at all.
And it as a lot of type safety there maybe you're also using the react router package.
This package here there you don't find specific typescript notations there.
Well of course you can install this into your project as well with npm install dash dash save react
dash router dash Dom which is the command you would typically use to install this package into a react
project.
So this will add direct router Dom package but this package has no special pipe instructions on its
page here you don't find anything typescript specific there at least at the point of time I'm recording
this nonetheless of course we can use as it and type could project as well and we can get good type
support there now with it installed you will notice that if I import from react router Dom I don't really
have great type support there.
For example if I tried to import something here I already get a warning.
Dad could not find a declaration for module react ruder Dom so that it didn't find any type information
here to fix that of course we can do something we did before NPM installed dash dash save dash death
at types slash react as router dash Dom so we can simply add such types here and we're good again this
is a trick you already learn about early and of course and of course there's no need to forget about
it just because we have a project where a lot already works with typescript out of the box if we don't
add something which does not work with typescript like this one we can add like this and now it's aware
of root it's aware of all the other features from this package as well.
So this is how easy you can add support for this as well and that's how you should generally approach
this.
Have a look at the official docs check if you see instructions about usage with typescript there if
not to install it and see if it has built in type support so that you at least get good order completion
and compilation support and if that also does not exist installer types package as we did it here and
that really is a four does module and this is how you can utilize TypeScript and all its amazing features
in a react app.
And of course everything you'll learn from this course applies to a reactive as well you can use all
the times good features you'll learn about from this course in a react project.