- Now that you understand what TypeScript is,
I want to explain why you would want to use TypeScript.
'Cause one thing if you've heard of TypeScript before
that you may have heard people say
is that it makes it more difficult and time-consuming
to write code because now you have to add in
all these additional types as well.
But that couldn't be further from the truth.
In my opinion,
TypeScript actually makes writing code much quicker,
especially on larger projects because it makes it
so you can detect bugs,
and you have really good auto-complete inside your code.
Let me show you a quick example.
Here, I just have a normal JavaScript file.
And let's say that I wanted to create a button
and add a click event listener to it.
So I can say that this button is going to be equal to
document., I wanna do a create here,
so I'll say createElement.
And we're gonna create a button.
And you notice throughout that entire process,
I had really good auto-complete.
For example, as I start to type in create,
you can see that I have, you know,
all these different things.
For example, createElement.
When I type in here, I can see that I have auto-complete
for all the different things that I could possibly create.
That's a very good experience.
Now let's go ahead and we're gonna add an event listener.
Again, super good auto complete.
I have auto complete here.
Let's say that the event, I'll just call it e,
and I'm just gonna console.log the target.
Again, super good auto-complete.
All of that had incredibly good auto-complete,
and my code was really quick and easy to write.
And this isn't just plain JavaScript.
The reason that my code was able to auto-complete so well
is because actually VS Code looks at your JavaScript Code
and essentially tries to infer all the different types
based on different TypeScript stuff.
It would know since I'm creating an element
of the type button, that my button will have
this HTML button element type.
It just knows that based on the different things I've done.
Since I'm adding a click event listener,
it knows my event is technically called a MouseEvent.
I hover over that,
you can see it is a MouseEvent.
VS Code is smart enough to look at your JavaScript Code
and essentially interpret it in a TypeScript style way.
But this breaks down
as soon as you start to do anything slightly complicated.
For example, instead of just writing my function right here,
what if I wanted to pass it a function such as handleClick?
And then I wanted to define this function down here,
handleClick, pass it in an event,
and now you'll notice that my auto-complete is gone.
When I say e., I have no more auto-complete.
There's nothing in here at all.
So if I, for example, have a typo, for example,
I just do target incorrectly spelled,
and let's just say that we'll do something
that's not even target.
We'll say, like, anyTarget, there we go.
You can see I've spelled something wrong.
There's nothing on this event actually called anyTarget.
But when I run my code,
I'm not actually going to get any errors.
And that's because this event is an object,
and it doesn't have an anyTarget property.
So when you access a property on an object
that doesn't exist, this will just return undefined.
So technically, this will just log out
undefined in the console.
So my code actually won't throw any errors,
even though obviously I made a mistake
'cause I intended to actually log the target,
and I typed in something incorrect.
You'll also notice when I hover over any of these objects,
they don't have any type information.
It just says it could be anything.
It doesn't know what it is.
This is where the beauty of TypeScript comes in,
because now I can get all that
super powerful auto-complete stuff
that I showed you at the beginning,
but I can make sure it's applicable everywhere in my code.
And it'll also detect any types of bugs that I have,
for example, when I mistype something
or use a variable that doesn't exist.
But what I can do is I can create this script.ts file.
I'll come into here.
It's a completely blank file.
And I'll write out the exact same code
to show you what I'm talking about.
We have our button.
It's going to be equal to document.createElement,
and we wanna create a button element.
All this auto-complete is super great.
And you'll notice I'm getting an error right here
essentially saying that I'm trying to
redeclare this variable.
Let's just comment out this code, there we go.
That'll get rid of that error for us,
just so we don't have two files of the same name
and the same code in them.
And what I can do is I can add that event listener.
I'm gonna do the exact same thing.
You'll see here I have really good auto-complete.
I'm gonna pass it in that custom handleClick function.
So now I'm going to define that function.
So we'll say function handleClick, just like that.
It's taking in that e object just like that.
And I'm gonna console.log e.,
and let's just say I make the exact same typo.
Now, by doing this,
you'll notice I still don't technically get any errors.
That's 'cause I don't really have any
TypeScript config set up.
But if I just create a simple TypeScript config,
which again, I'm going to cover in just a couple videos
how to do this, and how to understand everything,
you'll notice when I go back into here,
I'm now getting errors.
And the error here is essentially saying
that I don't have a type on this e object.
Now, I'll define a type here.
It's not important you understand what this code does,
but you can see just by defining this as a MouseEvent,
you'll now see I get another error that's saying,
"Hey, there's no anyTarget on this Mouse Event."
Instead, I should have spelled it as target.
And you'll also notice, look, I have the full auto-complete
that I had before where I can just come in here
and do target.
Or maybe I wanna get the current target.
I have all that super great auto-complete power
that I had before,
which makes writing code incredibly quick.
But I also get that error protection
by having TypeScript in my code base.
You'll also notice to get all of this power,
I had to add one word to my code.
So it's really small the amount of TypeScript
you actually need to add to your code
to get all these different superpowers.
And the superpowers you get make you code so much faster,
and give you the ability to detect errors
that are impossible to detect in normal JavaScript.
Now, even if this isn't enough to convince you
that TypeScript is amazing,
and that you should be using it in your projects,
knowing that most companies out there are using TypeScript
or converting over to TypeScript
because it's constantly increasing in popularity
is another huge reason to use TypeScript.
Because as the years go on,
more and more companies are going to require
that you actually know TypeScript,
instead of just having it as a recommendation.