Now we've got our project all set up and ready to go, we can start to actually write out some code.
So to get started, I'm going to create a new file inside of my project directory called Index Dots.
Notice the file extension on here is it's a start for as you might guess, TypeScript, we're always
going to place all of our typescript code into DOT files.
So now inside this file, we can start to actually write out some code to implement our program.
And just as a quick reminder, our goal here is to fetch some JSON data and print the results for this
first program.
We're going to speed through the implementation very quickly.
It's not going to have a lot of typescript specific syntax in it just yet.
Remember, the goal of this first application is not to learn a bunch of different types of syntax.
Instead, I just want to show you why TypeScript is handy.
So to get started, we're going to first import that axios module that we just installed at the top
of the file.
I will write out import axios from Axios like so.
After that, I'm going to flip back over to my browser, go to that JSON placeholder and point right
here and copy of The Wall that's going to give me just the first to do.
So a copy that you URL and go back over to my editor, I'm going to create a variable called URL in
a sign that URL to it like so.
So now we've got the URL in here, we can use Axios to make a network request to this URL to do so,
I'll write out Axios Douget and then I'll pass in that URL.
So it's going to make a http get request to that URL and attempt to fetch that JSON data.
That entire operation is async, so by calling Axios Moorgate, we're going to receive a promise in
return.
So to get a notification on when the request is complete, we can change on a then statement that will
be called.
With the response once we get a response from that API.
So then inside of here, remember, the goal here was to just console, log out the JSON data we get
back.
So I'm going to console log response data, which should be the actual to do that we received back from
that API.
All right, so let's save this, that's the entire program right here.
We are going to make a couple of changes to it in just a moment, but let's try to figure out how to
run this code.
Now, remember, we cannot run tight script code directly inside the browser or with no Ge'ez.
We have to first compile this file into plain JavaScript and then we can execute the resulting JavaScript
code.
So to compile this file right here, we will flip back over to our terminal.
Inside of my terminal, I'm going to use the typescript compiler that we just installed two videos ago,
we can access that compiler by writing out TSC remember, that stands for typescript compiler and then
I'll feed in the name of the file that I want to compile.
I'll run that command and I'll get kicked back over to my terminal almost instantly.
So it seems like nothing happened, but the compilation did occur.
If you flip back over your code editor and look at the file explorer on the left hand side, you'll
see that we've got a new file inside of here called Indexed JS.
So that is the compiled version of our typescript code.
You can open up that file and you'll see what TypeScript did to our code base.
All right, so now to run this, we can use the node command line tool and we'll run node index logs
and that will execute the compile JavaScript file that we just created.
So back at my terminal, I'll run node index dot James.
Notice the extension on here.
We are running the JavaScript file.
So if I run that command, I'll then see the to do printed out on the screen.
Perfect.
All right, so as you might guess, having to always run TSC Index and then compile or something and
then run that resulting file gets really old really quickly.
So to combine these two commands into just one.
We also installed a little module two videos ago called TEUs dash node.
Dash node is going to combine these two commands into one.
So it's going to automatically compile a given file and then automatically execute the resulting JavaScript.
So it's just saving us from having to run that one extra command.
So we can run, download, and then the name of the typescript file that we want to execute, so inducts.
So then run that command.
And then I should see my JSON printed out up there we go, a little bit of a pause there, I guess my
Internet connection is a little bit spotty right now, but I saw the printout right there.
So in one step, we compiled and then executed the resulting JavaScript.
OK, so that's how we put together a very basic type of program and then execute it at the terminal,
but I still haven't really shown you anything around.
You know why TypeScript is handy here.
So let's take a quick pause.
And when we come back in the next video, we're going to start making a couple of changes to this program
and we'll very quickly see why making use of typescript is really, really handy.
It's a quick pause, and I'll see you in just a minute.