- Now in order to create an actual TypeScript project
there's going to be two main ways that you'll do this.
One is going to be manually doing it
with the TypeScript interface for the command line
and the second way is going to be
using some type of bundler.
In this video, I'm gonna be talking all about
how you can do it using the TSC TypeScript command line tool
and then in the next video I'll cover
how to do it with a bundler.
So what you wanna do
is you want to create a project with npm.
So we can just initialize a project real quickly
by saying npm init, and we pass in -y.
That'll just give us all the default values
for our package JSON, which is perfectly fine.
Then what we're going to want to do is actually
install the TypeScript compiler
and we only want to install this as a dev dependency
since it's not actually something we run in production.
We compile our code in development
and then we push that to production.
So we can install as a dev dependency TypeScript.
That's all we need to do, just like that.
You can install this globally if you really want
and I need to make sure I spell TypeScript properly.
There we go.
Now you can install that as a global dependency as you want
but I generally recommend installing it
directly into your project.
That way you can actually have it version stamped.
Right here as you can see,
it's specifically this exact version,
which makes it easier to work with.
Then let's say that we have a file, we'll call it script.js,
and let's just say cost a =1
and then we'll create a function that's summing two numbers.
We'll say (a, b,) and we'll call this like num1, num2.
And then we'll just say return a + b.
There we go, so we just have some random JavaScript code
and let's actually change this to a TypeScript file
so we have this as TypeScript code.
Now you notice we're not getting any types of errors
or any type of other auto complete stuff
being helped out for us,
'cause TypeScript doesn't really know
what any of these types are.
So in order to initialize a config for us
all we need to do is run npx.
That allows us to run that TypeScript compiler
we just installed locally, and we type in tsc,
that's the name of the TypeScript command line tool
that we just installed, and we want to pass in --init.
That's going to allow us to create
an initialization config file.
Now you can see immediately we have this tsconfig file
which if we just scroll through this real quick
you can see it has a bunch of comments explaining
all of the different options as well as some really basic
options automatically configured for you.
As you can see, this is a quite large file
with a lot of different things that you can configure.
We'll talk about this later in the course,
but it's not super important to understand
what everything inside of here does.
But you can obviously change this as you want.
We'll just leave it as is
and immediately you can see we're now getting errors
'cause we don't have these things typed.
I'm gonna just type these as numbers real quick.
Again, it's not important you understand
how this typing works,
it's purely for demonstration purposes
just to get rid of the errors that we have.
Now, what we can do if we want to compile this file,
is we can type in tsc again,
but make sure we do npx at the start,
and then we just type in the name of our file
which in our case is script.ts.
What this is going to do is it's going to take
our script.ts file, convert it into JavaScript
by removing all of the TypeScript stuff.
So you can see we now have this script.js.
As you can see, it's removed every single thing
related to TypeScript from this file,
and it also took things that are maybe
not available in your browser,
for example, the const keyword and converted it to var.
And based on your ts config,
you can determine what you wanna do.
For example, here our target is es2016
which is quite an old version of JavaScript
but that's why it's converting our const into var
just to make sure that that is available
inside of the version of JavaScript
that you are specifically targeting.
And you can change this to whatever you want.
Now, let's say for example our code actually had an error.
For example, we try to call this sum function
by just passing it one number instead of two.
You can see we obviously have an error.
If we try to compile our code like this,
you'll notice that we're going to get a console error
being printed out essentially saying,
hey, it cannot run this code
because there's this error in the code.
But if we go and look at our output
you'll notice it actually changed our output.
You can see it's calling that function with one argument.
If you don't want this to happen
one thing that you can do when you run your command
is you can also pass at the noEmitOnError flag
and essentially what that's going to do
is if there's an error,
it won't actually output a JavaScript file.
So we can delete that file and we're gonna run this again
and you'll notice it's not going to output
that JavaScript file until we remove our error, for example,
by passing this two different numbers.
Now, when we run this, it's going to be correct code
so it'll actually output that JavaScript file.
If that's the behavior you want,
make sure you have that option
either enabled in your config file here,
if we just search for noEmitOnError,
you can see that we have this option right here
that we can enable, or make sure you pass it
in to the command line directly.
Now, this is the most basic way
of using the command line to actually compile
your TypeScript code, but in 99% of use cases,
you're not going to be setting this up manually.
Instead, you're going to be using some type of bundler
or framework that does all of this work for you.
And in the next video I'm gonna show you exactly
how to do that using Vite.