the worst part about typescript are
probably the error messages which can
sometimes drive you insane so let's look
how we can read typescript errors and
approaches to solving those types of
errors so here i have an example that
we've seen previously let me just change
this to let because there is going to be
the same so for example if you open your
terminal you can get a much better view
of the problems in your project so you
can use your terminal here and then you
can go to the error message in your
project but i'm going to close this so
we can talk about the problem so now
when you hover over the error you get it
in project for example and first it
dumps this first wall of text write this
infer type and you're like okay i'm
already not feeling well
and then here is the best part element
implicitly has an any type because
expression of type string can be used to
index type and then you start
scrolling and you're thinking what the
heck
so the best part when you're starting
with thai script errors do not get
overwhelmed always scroll to the bottom
and start with the bottom one because
it's going to be the most specific one
what happened so you can read thai
script errors that element implicitly
hasn't any type because expression of
type string and then you go to this part
because no index signature with a type a
parameter of type string was found and
etc typescript errors are like messages
with because between them so of course
you might not know how to fix this
problem and the first thing you do is
like okay now i'm hovering over this
error message and it's saying no index
signature with parameter of type string
and you're like
well i learned about object index
properties so of course this might want
me to make a key that's a string so you
can go interface
pokemon maybe and then you can say index
you say it's a string and it should be
an object of all these keys right so you
can say id
number
hp number
attack is also going to be a number and
let's make defense an upper and then we
can assign it that type so it's not the
inferred one
and this fixes our problem and at least
we think that fixes our problem because
we hover over pokemon we can see okay
this is it but this isn't really what we
want instead of passing the string
bulbasaur to access the key bulbasaur or
whatever else pokemon we want we really
want to pass the literal version so we
want to change this to const so we get
the literal type right and this type
isn't correct anymore so we can remove
this for example
if you type it this way and now our
error is going to be a bit more readable
because we created an interface so we
don't get the wall of text but even in
this form it's super unclear so if we go
to the last one so remember element
implicitly hasn't any type because
expression of thai bulbasaur can be used
to index type pokemon because property
bulbasaur does not exist on type pokemon
so only care about the last message
property bulbasaur does not exist on
type pokemon and this error is really
cryptic right and you wouldn't know what
the solution is unless you understood
all of these other things so you really
don't need to create a type or anything
for this to work right
which you might thought was the original
solution and now everything is fine we
get the proper infer type if we hover
our pokemon it can do whatever we don't
really need to add this pokemon by hand
and yeah that's it another thing to help
you debug typescript errors when you're
starting out is using the tyscript error
translator so for example if you go here
to the extension you just install this
extension and it's going to give you a
more human readable version of that
error so for example let me just go to
my extensions
here i have the typescript error
translator i'm just going to enable it
let me just close the sidebar close this
and then let's for example create
cons pokemon we can say string i'm going
to pick a true and then let's try doing
something stupid we can say as an array
of string and now if we hover over the
error
we can see the original typescript error
might be confusing to you conversion
type string to type string blah blah
maybe a mistake because neither type
sufficiently overlaps to the other but
here you get a more human readable
translation from the extension you can't
use s to convert string into string of
array they don't share enough in common
and you can even go to the website the
typescript error translator
or the playground and here it has a
similar message and you can copy your
message over here if you're not using
the extension
and when you submit the error it really
gives you a more friendly and human
readable version again the same thing we
saw here and it even has an explanation
here looks like you're trying to use as
to cast one type into another your first
type string doesn't match up with etc
and this is really an awesome way to
learn if you enjoy that another thing i
want to mention again is that sometimes
you might get weird errors because the
typescript server might be acting up or
whatever so just remember you don't have
to restart your editor you can restart
the typescript server so inside your
editor you can press f1 or the command
palette for me it's control p
and then you can search for files but if
you type the pointy boy you can get into
command mode and then just start typing
restart and you can find the command
typescript restart tyscape server and if
that doesn't work as a last resort
restart your editor another advice i
have is if you can debug something you
should open the typestream playground
create the example that's reproducible
right and you can share it with your
friends or whatever a great community is
a thai script community discord server
where you can go and ask questions and
they're really awesome there and they're
going to help you out all right so i
hope you have more confidence now how to
debug thai script errors and catch you
in the next one