- Now this project, instead of writing out your own code,
we're gonna be taking an existing project
that's written in JavaScript.
As you can see, it's a Minesweeper game over here.
If you left click, it's going to reveal a tile,
while right clicking it will mark it in this yellow color
to represent a mine.
So a pretty simple Minesweeper implementation.
And what we're gonna do is we're gonna convert it
from JavaScript to TypeScript.
I'm gonna be talking about a lot of different things
you should focus on when you're converting
from JavaScript to TypeScript.
Now in this introduction video,
before I let you loose on this project,
I'll mention two different ways
that you can convert something
from JavaScript to TypeScript.
The first way that you convert something
from JavaScript to TypeScript is with the top-down approach.
This is really great if you're only converting parts
of your application over to TypeScript at a time.
Like, maybe you want to convert the most important parts
of your application to TypeScript first,
and you're gonna leave some
of the less important parts 'til later.
So a top-down approach means you're going to focus
on the top level, such as a feature,
like I'm gonna be focusing on checkout,
and you're gonna change everything in your checkout code
to make it work in TypeScript.
And then you're just going to trickle that down
until you get all of the code all the way down
to the smallest functions that are used
in that checkout code, all typed with everything you need.
So you're working from the top level feature
and going down, adding types to all
of the different smaller things that that depends on.
The other approach is the bottom-up approach
where you're focusing on the smallest pieces
of your entire code base,
so like individual functions that have very few things
that depend on them.
In this particular example, if I scroll down
to the bottom of the file,
you can see there are certain functions here
that have no dependencies, and they're very simple.
So you would be starting
with these particular functions first
and working your way up,
adding more and more types as you go.
Now there's pros and cons to both.
The pro of the top-down approach
is that you're able to get one particular part
of your application, like one feature,
typed relatively quickly,
since you're only focusing on that one thing.
The con to it is that it can become a mess very quickly
because, as you start to change one thing,
it depends on 10 other things, which you all need to change.
And those 10 things all depend on six other things.
So now you have 60 different things that you need to change,
and it quickly spirals out of control.
There's a lot of extra things you need to change
in the top-down approach, but with the bottom up approach,
everything is incredibly small.
And as you start moving up to the things
that depend on other things,
you're gonna notice it's much easier to type those
because you've already typed most of the things
that they depend on.
The other thing to note before I let you loose
on this project is if you're taking a JavaScript project
and converting it over to TypeScript,
there's a few different things to look at.
The first is going to be what type of bundler situation
do you have?
In this particular project,
we are using Vite as the bundler.
So what I would do, in this case, is I would go
to the Vite documentation and look
at how TypeScript works within Vite,
'cause there may be specific things you need to know.
Another thing you can do is to create a project
from scratch using this bundler, such as Vite,
and they have a TypeScript option.
So if your bundler has an option for TypeScript built in,
create a project from scratch,
look at how they have their code configured there,
and you can use that configuration directly
into your code as well.
So that's kind of like two different ways
you can solve this problem.
Now, if you're not using a bundler in your project,
what you pretty much need to do is consider, okay,
do I want to move all my code over to a bundler?
Which the answer is probably yes.
Or do I wanna manually write
all of my TypeScript code myself?
You kind of have to look at that case by case,
but, generally, you're using some type of bundler,
and if you are, you can look at the documentation
to figure out how to implement TypeScript into that bundler.
So that's what I would recommend doing on this project
when you're trying to implement this in Vite.
Just look at how Vite does TypeScript
and try to move that into this project as well.