hey guys i want to go over some of the
differences when doing typescript and
react so to start off i like to use this
boilerplate called create react app
typescript it's very similar to create
react app but it is using typescript so
i'll link this in description below so
i'm going to be using this as the
starter for today and here is what the
code looks like
i haven't touched anything but by
default they give you a nice ts config
with some good defaults and then we can
go in here and change any of these if we
want to
and then also they have a ts flint
which is nice as well which just lens
your
typescript code so you have both of
those by default you don't even 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 from react
and the reason you have to do that is
because react does not export anything
by default
so now you'll 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
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 rid of that it's going to 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
it 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 going to create a
new thing i'm going to call it form dot
tx
tsx and you'll notice uh your file names
are different that's another thing so
instead of jsx it's tsx
um and i'm just gonna copy these
to make this faster
and don't need those so this is going to
be a form component
and we'll empty 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
um component so maybe this component has
some text
which is a string
and then maybe it also has
a
age i don't know this is just a random
value which is a number and maybe that
is optional
so the way you tell your component is
you do angle brackets at the end here
and then you pass in props like that
and now
and i'm not sure what it's mad at
oh this is
it likes to start with
i at the beginning of the interface this
is a tslent thing
so we could do it like that if we wanted
to i usually turn that rule off though
okay so we have the props here so right
off the bat we'll get some nice auto
completion if we try like destructuring
our props so
if i want to get like text i can now
render a div
with text
so now we know we're going to get this
prop
the other thing is state so
i might have for example a name
which
we'll set as a default value just an
empty string
and we'll also have an email which is a
string as well
so you'll you'll notice it's already not
liking stuff
oh it's
sorting it doesn't like this
because
looks like we haven't labeled it 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 tslint as
well and then let me show you guys what
i'm talking about so what i'll usually
do is when i don't like some of these
rules they're just kind of annoying and
they don't really help me
i'll copy them so member access this
thing in parentheses come over here to
tslint
and rules
you paste it and then you put a zero for
you don't want to follow it
and then it'll no longer bug you over
here about it anymore
and
i think i just need to do false
there we go so now we no longer are uh
bugged about that and that's you can
just turn them off like that
okay so the state we also need to have a
type four so again i like to create an
interface called i state
um so here we have an email which is a
string and a name which is a string
and then that is the second thing you
add to the angle brackets so comma i
state
and if you don't have props
what you can do is you can just put an
empty object and then the 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 our state here like
that
so there we go i state and we
specifically saying what it is
and then we can again
we have now some nice auto completion
for our state
um and it'll tell me the two properties
so 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 um our form
and it doesn't look like it it i wanted
to just auto
import this guy for me maybe it's
because i didn't call it form
no i did that's sad we'll just import it
ourselves
and we don't need those two okay
so immediately we get red lines because
we have 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 and if we
try added adding any other type of
property like maybe a is going to be 5
it's not going to 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
component
the other thing here's just a common
scenario is you'll have like an input
element
and let's say that's my name
and value is going to be name
and on change is equal to this dot
handle change
so this is if you want to do a form and
react
so here we're getting the uh
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 going to be react dot form of
it
and then you have to specify uh the
element so this is going to be an html
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
you expect this function here
to give you and i guess it just pops up
now because we added it here
but it's going to give us a form event
and this is coming from an input element
and the reason why i put input element
here is because this is called an input
if this was like for example a text area
i would put html 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 and the value
and then update the state
with those um
and uh 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
so i don't have to worry about typing
those if i wanted to i could say
name is a string and value is a string
either way works well i guess
name so okay here's a little
cute thing so now that we have set the
interface
of
the state here it knows that we can only
have the keys email a 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 assignable
uh we don't worry but we won't worry
about that part for now so let's see how
it say of set state here we have name as
one of the keys and that's good but if i
were to say name two
it knows that name two is not in my
interface
or my state so i could not actually
um add it so it protects you there and
checks the type for that
but anyway yeah that's why i just like
to use any
um because that uh 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 let's
name and we're going to say it's a key
of
i state
so and value is a string
um okay it didn't like it
but this is a little trick where kiev is
now
a
one of these things it's either
email or name
but doesn't like it i'm just going to
keep it back to 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
the other thing i wanted to talk about
was importing libraries
so a lot of times you'll be importing
libraries
that are not typescript libraries for
example i might want to add blow dash
so let's say i just do yarn add load ash
here
oh and
i messed up my
node installation so i need to just add
this real quick
um and we'll run this again
so when that is done we can now import
something from load ash right um low
dash
and maybe i want to use the omit
uh guy the mid function
um and first off it doesn't like that i
have it ordered in the wrong way
again this is another rule i like to
just turn off let's come over here
and say false
all right so
i'm just going to say
omit
from the props
the name
not name age
so this is just me using omit just to be
silly but the point i want to show you
is look at this little error we could
could not find declaration file
so we don't have any types for this load
ash right now
and because it's written in javascript
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
is by declaring the module so here is
images.d.t.s so this is in
this folder
you can see they're already declaring a
module for some of these things we could
declare module lodash
and now it doesn't have any problems so
now this is going to be typescript
thinks lowdash can be the type of
anything you can also specify
specifically what the types of all the
low dash things are
and by the way you can create other like
i could create
my types
all that matters is you have the dot dot
ts at the end of it
and so i could move that over here as
well
and you could declare your type in there
the other thing is
what's nice is
this it's not very nice to have
note types for your libraries and other
people 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 delete that
so the way you do it is you say you are
an ad and it's actually another package
so at types slash low dash
so this is
a
at the beginning at types slash and then
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
so that's super nice
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 can be
really hard to type them
with that stuff i recommend just
googling go to stack overflow for that
stuff um it can get really complicated
or just using the any type with that
sort of thing um
and then uh 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
that json
here are 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
already just went through and added all
the types for like lowdash
but yeah that's it for this video guys
thanks for watching