Now that we've gotten through some administrative stuff, we're now going to dive into our first technical
topic and start to discuss exactly what typescript is.
So what is TypeScript, you know, what are we doing here?
Well, at the end of the day, I want you to imagine that when we write typescript code, we are really
just writing JavaScript.
That's what's really happening here.
We're still writing JavaScript.
All the knowledge you have around JavaScript like arrays, objects, functions and even E 2015 syntax
like restructuring and error functions and classes.
All that knowledge still applies to the world of TypeScript as well.
The only thing that we're really doing with TypeScript is adding in a little bit additional syntax to
our code to handle something called the type system.
This is what TypeScript is all about, as you might guess, and it's what we're going to spend the vast
majority of this course learning about.
So let's get a quick overview on the type system and understand what's going on with it.
The goal of the type system is to help us catch errors during development.
In other words, when we're actually writing our code in our code editor, think about how we catch
errors right now with JavaScript code.
Let's imagine that you're writing out some amount of JavaScript inside of your editor and maybe there's
a bug inside of it.
How would you find that bug?
Well, really, with JavaScript, the only way to do that is to actually execute your code and see that
air up here, and that's not super efficient.
So as an improvement to the development workflow, we use the type system to help us catch errors during
development while you and I are writing our code, typescript is going to be constantly analyzing it
and looking for bugs.
If it finds any possible bug, it's then going to pop open an error message inside of your code editor
and tell you, hey, something might be wrong here.
And that's going to essentially be a signal to you as a developer that you might need to fix up your
code.
Not to do this, er checking the typescript compiler is going to use something called type annotations
to analyze our code base, you and I are going to be responsible for adding in these type annotations.
You can kind of think of these type annotations as being like little comments to describe the purpose
of our code or the information that is flowing through our program.
The type system is only active during development, so in other words, once we go to deploy our application
or even run it inside of our browser in a development environment, the entire type system falls away.
Your browser has no idea what typescript is.
And Narges likewise, no, JSC has no idea what typescript is either.
So all this extra syntax are going to add into our code.
Never makes it into the browser.
It never makes it into Noguez.
We're going to first compile our typescript and we're going to get some JavaScript out of that.
And that JavaScript is what we're going to actually execute.
Finally, this is something I want to point out, just because it's a little bit different than other
languages that are strongly typed, the typescript compiler does not do any performance optimization
whatsoever.
Now, this is very different than many other languages.
In many other languages, the type system can be used to optimize some code that you write using the
compiler.
But that is not the case here with TypeScript.
All right, so that kind of help you understand this process here, let's run through the common scenario
of how we're going to actually write some code and run it inside the browser or with Narges.
So you and I are going to write some type code inside of our editor and remember, we can think of TypeScript
as really just being plain JavaScript, but with these type annotation things added in.
Then once we want to actually run our code, we're going to feed that code into the typescript compiler.
This is a command line tool that's going to read our code, check it for any possible errors, and then
convert it into plain JavaScript.
You and I are then going to take that JavaScript code and feed it into the browser or into Noguez and
finally execute it.
So, again, we do not execute, typescript, we always are executing JavaScript, and so when I say
that you and I are still writing technically JavaScript code here, it is, because the code we're writing,
it is going to end up as JavaScript.
Just it has these extra little type annotation things in it.
All right, so to give you a really practical example of this, I want to show you a quick little Web
page here.
This is a in browser type script compiler.
It's going to open up this link inside of a new browser tab.
Now, on the left hand side, you're going to see a little bit of typescript code, and I know this
is kind of cut off right there, but I just want to give you the impression that this tight script right
here has a bunch of additional syntax in it.
Right.
Just take a look at this code.
We don't need to understand what it does.
You can tell at just a glance that there's a lot of extra stuff in here and it does not look like normal
JavaScript.
So on the left hand side, we've got the typescript, this page is going to compile that code and then
print out the equivalent JavaScript on the right hand side.
So this is the output from the typescript compiler.
And looking at that, yep, it sure looks like plain JavaScript.
So I can't say it enough, like I said, I'm going to repeat it many times throughout this course,
we're still writing JavaScript code.
We're just adding in little extra pieces of syntax here and there.
And these extra pieces of syntax are meant to help the typescript compiler understand what we're trying
to do with our code base so it can help us catch errors.
That's it.
That's the entire typescript world.
All right, let's do a quick wrap up on what we learned in this video.
So first off, when we write TypeScript, we're still writing JavaScript.
We're just adding in these extra little type annotation things.
Secondly, typescript has no effect on how our code actually gets executed, in other words, there
is no performance optimization or anything like that.
Now, finally, the best way to think of TypeScript, in my opinion or kind of an effective analogy,
is to think of TypeScript as being like a friend who is sitting behind you while you are writing code.
And maybe that friend is looking at every line of code you're writing and helping you catch errors.
That's what TypeScript is really doing for us.
It is a helper to help us catch errors.
It doesn't actually have any impact on the final code that we output or the actual code that we run
inside the browser.
It's just there during development.
OK, so now we've got a better idea of TypeScript.
Let's take a quick pause right here and we're going to do a little bit of environment set up in the
next video.