Whenever you and I write typescript code, we're going to rely upon type inference quite heavily.
This is where TypeScript is going to figure out the different types that are flowing around our application
for us.
However, there are three different scenarios that we're going to look at, where we're going to have
to add in type annotations manually.
Instead, remember, these type annotations are going to help TypeScript along.
The first example we're going to look at is whenever we have a function that returns the any type and
we need to clarify it and we haven't really discussed the any type just yet.
So we're going to write out first just a little bit of code, then we'll review what the any type really
means and then we'll get a better idea of why we need to use a type annotation in this case.
So let's get to it.
I'm going to flip back over to my code editor and I'm going to go down to the very bottom of the file
down here.
We're going to add in our three different examples on type annotations so I can put in a little comment
that says, when do you use annotations?
So case number one is when we have a function.
That returns.
The any type.
OK, so for this example, I want to define a little snippet of Jason as a string.
No, just going to try to pass that, Jason.
So I'm going to define a new variable called lowercase Jason, and I'm going to assign it a JSON string.
So I'll put down a string.
And then inside of here, we're going to write out just a little bit of JSON.
So let's say curly brace.
I'll put down X and double quotes, a colon and then 10.
Then why, in double quotes, a colon and 20, and then I'll close off the curly brace like so.
So now I could use that string with the JSON, parse function and turn the string into an actual object,
so I'm going to create a new variable called How about coordinates?
In a sign that the result of Jason that pass with that Jason variable, so in theory, if we now ran
this code and console logged out coordinates, we would see something like X is 10 and Y is 20 like
so.
Now, there's just one little gotcha inside of here, if you mouse over it coordinates, you'll notice
that it has a type connotation of any.
So this means that TypeScript thinks that coordinates is of type any.
In addition, if we mouseover pass right here, you'll notice a lot of nasty syntax up here, but at
the very end of it is something that says Colon, any that means that the JSON parts function returns
the any type.
So clearly, this anything is something pretty important.
Let's have a quick pause, a little aside here and discuss what the any type means and then we'll understand,
based on that discussion, why we would need to add in a type annotation here, even though it looks
like there's no airs or warnings with our code.
All right.
So quick aside here.
So the first thing I want to review is how the adjacent parts function works in this diagram.
I've got some different values on the left hand side, and then we're going to imagine that we feed
each of these different values into JSON pass and we'll take a guess at what the different types are
that will come out of the function.
Now, in reality, this diagram is just a little bit misleading right here.
In reality, any time we call Jason Pass, we get back a value of the any type.
So this column over here on the right hand side, I'm just saying this is what the like maybe the type
would be, right?
This is like we know that the type of false ones we pass, it would be a boolean.
That's not what we get with TypeScript.
This is just like the ideal world.
So if we fed in a string of falls to Jason Pass, we get back a billion again, that's not what really
happens.
We get back any but hey, we're just saying we get back a billion.
If we pass in a string of four, we would get back a number.
If we pass in something that looks like an object with value and then five, we would get back a type
that is an object with value.
That is a number.
And likewise, if we have a object with name that is pointing out a string, we would get back an object
with a name, property that is a string.
And you can see each of these examples very easily.
If you open up a JavaScript console really quickly and you call, say, JSON pass with a string of like
five, we get back a number.
Right.
Makes sense.
Now, the kind of common theme here is that we can clearly pass in very different strings into this
function and we can possibly get back very, very different value types.
In some cases, we might get a boolean, in other cases we might get a number.
And then in some other cases we might get these really complicated objects.
So the goal, this diagram right here is just to help you understand that any time we call Jason Pass,
we get back possibly some very, very different value types.
Now, the problem here is that TypeScript cannot predict these different types.
TypeScript doesn't know what we're going to get out of Jason Pass because it depends entirely on the
string that we put into that function.
So when you and I are writing code inside of our code editor and we call Jason Pass typescript, just
plain can't predict what we get back from the function because it will be entirely different based upon
the string that we put in.
And TypeScript is not going to try to like read the string and figure out what it would return if we
call Jason parts.
So as a shortcut, typescript instead decides to simply say, you know what, I can't guess all these
different types, that's too complicated.
So I'm going to say, if you ever call Jason Pass, you're going to get back something called the any
type.
The any type essentially means that typescript has no idea what type of value is being returned from
JSON parts, has no clue at all, and that's what we see inside of our code editor.
So right here, when we mouseover coordinates, TypeScript is saying this is the any type, that means
that TypeScript has no idea what type coordinates is.
So that's what the any type indicates now, a couple more notes here on the any type.
So any is a type, just as string or boolean are, any time we have to write out a type of a variable
like, for example, in a type annotation, we could in theory put in any just as easily.
Any time we see something that is marked with any type, that means that TypeScript has no idea what's
going on and in general, that is a very bad thing to have inside of application.
Remember the entire idea behind TypeScript and all these types and all this kind of stuff is that we're
using TypeScript to catch errors inside of our code editor.
And we able to do that because of these types like types like string and number and boolean and whatnot.
If TypeScript knows the different types inside of application, it can take a look at any time we say
a function on an object or reference a property on an object in typescript can figure out whether or
not we are referencing a property that actually exists or if it's one that we just made a typo on.
So any time we have a value, that is the any type typescript cannot do any er checking whatsoever around
that value.
So for example, right now if I go back over to my code editor.
I can write out coordinates, dot, blah, blah, blah, blah, blah, like, so this is clearly a property
that does not exist, but you'll see that TypeScript does nothing to help me out and tell me that I
might have a mistake right here.
However, if I go back up to any of these other examples where I'm working with variables that have
known type like let's say how about speed right here?
If I reference speed, blah, blah, blah, TypeScript is going to jump in very quickly and say, hey,
that's not a property that exists.
It's only going to allow me to call properties that actually exist like, let's say to upper case like.
So that's fine.
And it's only fine because TypeScript knows that speed is a string.
So, again, any time we have a variable of type, any, it is generally a bad thing because TypeScript
can't do its job.
All right, so I think that we've gone into enough detail on this any type, so let's have another quick
pause right here.
We're going to come back to the next video and understand how we can use a type annotation to fix this
thing up right here.
So quick pause and I'll see you in just a minute.