- In this video, I'll be showing you
how to use Vite to initialize a TypeScript project,
which is a bundler that makes it a lot easier
to handle some of the most common things
you're going to do in TypeScript.
Now, Vite is not the only bundler out there.
It just happens to be the most popular one
at the time that I'm recording this video.
So if in the future a different bundle is more popular,
just make sure you use that one instead,
or you can follow along with Vite.
They all pretty much work exactly the same.
Now for Vite, what we need to do is we need
to run npm create Vite at latest.
Make sure you just put a period or the actual file name
you want to install this in.
In my case, I want to install in the current folder,
so I'm gonna be using a period here.
If I click enter, it's going to ask me what type
of project I want to create.
Let me just expand this a little bit.
You can see I have a vanilla project, which is just gonna be
like a normal JavaScript TypeScript project.
And then I have all these different frameworks.
In our case, we're not gonna be messing with any frameworks,
so we'll choose vanilla.
And as you can see, we can choose TypeScript or JavaScript.
Obviously, we'll be using TypeScript.
So you can see that generates a bunch
of different files for me.
Namely, you can see that I have this TypeScript config,
which a bunch of different settings inside of it
already configured for me, which is great.
It has a lot of the most common things
you'll want to configure.
And it also has inside of here
some different TypeScript files
that are just like placeholder code.
What I can do is I can run npm I.
That's going to install all of my dependencies,
and then I can actually run this
as a dev server by typing npm run dev.
That's just going to start up my server,
and if I open this up, I'll just drag this over,
zoom it out a little bit.
As you can see here,
I just have some really simple code
running in Vite with TypeScript.
And you'll notice the really nice thing about this
is all of the compiling of my TypeScript code to JavaScript
and all the handling of that is all done behind the scenes.
As you can see in my source here,
I just have some TypeScript code,
and everything else is handled behind the scenes for me
so I don't have to worry about it at all.
As you can see, all this different code is inside of here,
and it's all using TypeScript.
Now, if you want to be able to do something
with this code by removing all the boilerplate stuff,
what you can do is inside this public folder,
we don't need this Vite SVG, so we can remove that.
We can remove this counter file.
Inside the main here,
we can just essentially get rid of everything.
We don't need anything inside of here.
We can get rid of all of our styles,
this TypeScript SVG,
but we do need to keep this Vite env file,
and just make sure that you have a specific type setup
for stuff related specifically to Vite
that you most likely won't really need to use.
Then inside of here, we got rid of that Vite SVG,
so we can remove that there,
and that's all we need to remove to actually have this work.
And if I just come in here
and I just say that I want a console dot log, hi,
and I give that a quick save,
and I open up this page again,
and I just inspect the console.
So let me just open up the console.
You can see that at the very top,
it has logged out the text, hi, for me.
Now, from here when you're using Vite,
you don't really have to worry about anything at all.
Inside the packaged JSON,
you'll notice we have a few different things.
For example, we have this build command,
and that essentially will compile all of our TypeScript code
and build it up for us.
So if we run that npm run build command,
give it a quick second,
you'll notice it's going to pop up
a new distribution folder here, and inside of here,
it's just going to be all of my different code.
So if I go in the assets,
you'll essentially see a bunch of JavaScript code.
And the main thing that's going to happen
inside of here is I have my console log
and some other stuff going on.
Same thing inside of here.
And if I wanted to see what that code looks like,
I can type npm run preview,
and this pulls up essentially a production version.
It just runs the code directly from this folder.
And if I open that up and pull it over,
you can see I have a blank page.
And if I inspect it and go over to my console,
you can see it prints out "Hi."
So it's the exact same code.
it's just compiled for production specifically.
Now, again, depending on what bundler you decide to use,
you may have slightly different things
in your packaged JSON for the commands that you run
to get things started, and so on.
But overall, it's going to be a very similar process,
where there's gonna be some way to run it in development,
some way to build it, and some way to either preview it
or look at the actual production version of your code.
And all of the other TypeScript confusing stuff
for you is taken care of.
And any configuration you need to do
is going to be directly inside of this file right here.