In the last video, we did a little bit of environment set up, and now we're ready to start working
on our first project, so let's talk about what we're going to make.
All right.
So we're going to start off with a very simple first little application.
We're going to make a little tiny application that's just going to make a network request to some outside
API.
That's some data.
And we're going to try to print that data inside of our terminal.
And that's it.
Now, with this first application, I'm not trying to teach you any specific syntax or anything like
that.
I just want to show you why we use typescript in general.
So as we write this program, we're going to accidentally, quote unquote, you know, kind of accidentally
introduce one or two bugs into our application.
And then we're going to very quickly see that typescript has the ability to help us catch those bugs
while we are writing our code as opposed to when we execute our code.
So, again, the point on this application is just to show you the typical workflow of typescript.
That's it.
All right, so with that in mind, let's talk about the flow that we're going to go through to actually
build this application.
So step one, we're going to take a look at the API that we're going to use to fetch some data.
After that, we're going to create a new project directory.
We're going to create a package JSON file inside there and then install AXIOS as an NPM module.
Saxbe Axios is a little module that we're going to use just to make a network request if you've never
worked with this module before.
Totally fine.
Axios doesn't really have anything to do with TypeScript.
We're just going to use it to make a network request.
That's it.
So once we do all that set up, then we'll start to write out some code.
All right, so on to step number one, let's take a look at the API that we're going to use to fetch
some data.
So here's a link to the AP right here on the screen, and this is a fake AP.
In other words, it serves up fake data that we can use just for like testing or learning purposes.
In other words, it's perfect for what we are trying to do right now.
So I'm going to pull up that documentation inside of a new tab and then scroll on down to a section
called Resources.
All right, so here's resources right here.
So these are all the different types of records, so we can make a request or attempt to fetch from
this API.
We're going to attempt to fetch this list of to DOS right here.
So I'm going to click on that to news link as soon as I do.
So you're going to see a ton of information up here on the screen.
You'll notice that on my screen it appears to be very nicely formatted.
If it looks like a big blob of text on your screen, that's totally fine.
I've got a little chrome extension to automatically format JSON data for me.
So if we make a network request to this, you are right here, we're going to get back a big list of
fake to do items.
Now, we don't really need this whole list, I just want to try to fetch like one individual item,
so to fetch just this first item off the list or the to do with an idea of one, we can modify the URL
up here slightly.
So at the very end of the URL, I'll add on one like so.
Once I visit that link, I'll then see a single to do appear on the screen.
So this is the exact data that we want to fetch.
I want to fetch this data inside of our application and then just try to print out some information
from this to do to our terminal.
Like I said, that's it.
All right, so now that we understand the API we're going to work with will now flip on over to our
terminal and create a new project directory.
It's over inside of my terminal, I'm inside of a workspace directory of sorts, you can place this
folder anywhere on your machine that you want to.
I'll make a new project folder inside of here, and I'm going to call it that, Jason.
All that changed into that directory and then I'm going to generate a new package, JSON file inside
of here, remember package dot Jason files are used to record all the different dependencies that we
install into a project.
Normally that's the case for JavaScript projects, but does the same thing for TypeScript as well.
We record dependencies inside of a package that stays on file.
So to generate that file, I'll run NPM in it, Dashi.
That's going to generate that file and now I can safely install that axios module.
Remember, Axios is going to be used just to make that network request.
So to do so, I'll run and install Axios like so.
Now, Axios is really small, so this should install rather quickly.
Once it's all done, well, then open up my code editor inside this folder and we'll start to work on
our project.
All right, so here we go.
I should see inside of here the packages on file and the node modules directory, which has that axios
project or module that we just installed.
So now we've got everything set up, let's take a quick pause right here and we'll start to write some
code in the next video.