1
00:00:01,190 --> 00:00:05,450
Now we've got our project all set up and ready to go we can start to actually write out some code so

2
00:00:05,520 --> 00:00:06,380
to get started.

3
00:00:06,380 --> 00:00:11,230
I'm gonna create a new file inside my project directory called index dot T.S..

4
00:00:11,390 --> 00:00:17,210
Notice the file extension on here is dot t yes a start for as you might guess typescript we're always

5
00:00:17,210 --> 00:00:21,190
going to place all of our typescript code into dot t us files.

6
00:00:21,280 --> 00:00:25,760
So now inside this file we can start to actually write out some code to implement our program and just

7
00:00:25,760 --> 00:00:31,620
as a quick reminder Our goal here is to fetch some Jason data and print the results for this first program.

8
00:00:31,640 --> 00:00:34,070
We're going to speed through the implementation very quickly.

9
00:00:34,070 --> 00:00:37,790
It's not going to have a lot of typescript specific syntax in it just yet.

10
00:00:37,790 --> 00:00:42,810
Remember the goal of this first application is not to learn a bunch of different typescript syntax.

11
00:00:42,830 --> 00:00:47,260
Instead I just want to show you why typescript is handy so to get started.

12
00:00:47,270 --> 00:00:51,890
We're going to first import that axiom module that we just installed at the top of the file.

13
00:00:51,890 --> 00:00:59,760
I will write out import axioms from axioms like so after that I'm going to put back over to my browser

14
00:01:00,390 --> 00:01:05,820
go to that Jason Place holder end point right here and copy of you are the URL that's going to give

15
00:01:05,820 --> 00:01:08,830
me just the first to do so.

16
00:01:08,850 --> 00:01:12,590
Copy that your URL and go back over to my editor.

17
00:01:12,750 --> 00:01:17,880
I'm going to create a variable called You Are L in a sign that you are L to it like so

18
00:01:21,310 --> 00:01:27,450
now we've got the URL in here we can use axioms to make a network request to this you are L to do so

19
00:01:27,490 --> 00:01:35,130
I'll write out axioms dot get and then I'll pass in that you are L that's gonna make a h TTP get request

20
00:01:35,130 --> 00:01:41,000
to that your l an attempt to fetch that Jason data that entire operation is async.

21
00:01:41,000 --> 00:01:44,960
So by calling axiom dot gets we're going to receive a promise in return.

22
00:01:45,510 --> 00:01:50,960
So to get a notification on when the request is complete we can chain on a dot then statement that will

23
00:01:50,960 --> 00:01:53,800
be called with the response.

24
00:01:53,820 --> 00:01:55,640
Once we get a response from that API

25
00:01:58,390 --> 00:01:59,530
so then inside of here.

26
00:01:59,590 --> 00:02:04,330
Remember the goal here was to just console log out the Jason data we get back so going to console log

27
00:02:04,420 --> 00:02:11,120
response dot data which should be the actual to do that we receive back from that API.

28
00:02:11,170 --> 00:02:13,060
All right so let's save this.

29
00:02:13,060 --> 00:02:14,460
That's the entire program right here.

30
00:02:14,470 --> 00:02:18,400
We are gonna make a couple of changes to it in just a moment but lets us try to figure out how to run

31
00:02:18,400 --> 00:02:19,420
this code now.

32
00:02:19,690 --> 00:02:25,960
Remember we can not run typescript code directly inside the browser or with no J Yes we have to first

33
00:02:25,960 --> 00:02:32,380
compile this file into plain javascript and then we can execute the resulting javascript code so to

34
00:02:32,380 --> 00:02:39,440
compile this file right here we will flip back over to our terminal inside of my terminal I'm going

35
00:02:39,440 --> 00:02:43,170
to use the typescript compiler that we just installed two videos ago.

36
00:02:43,430 --> 00:02:46,550
We can access that compiler by writing out TSC.

37
00:02:46,550 --> 00:02:51,140
Remember that stands for a typescript compiler and then I'll feed in the name of the file that I want

38
00:02:51,140 --> 00:02:57,710
to compile or run that command and I'll get kicked back over to my terminal almost instantly.

39
00:02:57,710 --> 00:03:01,580
So it seems like nothing happened but the compilation did occur.

40
00:03:01,760 --> 00:03:06,950
If you flip back over to your code editor and look at the file explorer on the left hand side you'll

41
00:03:06,950 --> 00:03:12,410
see that we've got a new file inside of here called index dot J.S. so that is the compiled version of

42
00:03:12,410 --> 00:03:14,060
our typescript code.

43
00:03:14,150 --> 00:03:20,670
You can open up that file and you'll see what typescript did to our code base all right.

44
00:03:20,670 --> 00:03:26,460
So now to run this we can use the node command line tool and we'll run node index dot J us and that

45
00:03:26,460 --> 00:03:30,200
will execute the compile JavaScript file that we just created.

46
00:03:30,210 --> 00:03:33,350
So back at my terminal I'll run node index dot J.S..

47
00:03:33,360 --> 00:03:34,540
Notice the extension on here.

48
00:03:34,560 --> 00:03:41,070
We are running the javascript file so if I run that command I'll then see the to do printed out on the

49
00:03:41,070 --> 00:03:42,260
screen.

50
00:03:42,300 --> 00:03:44,520
Perfect all right.

51
00:03:44,520 --> 00:03:50,130
So as you might guess having to always run TSC index dot to us and then compile or something and then

52
00:03:50,130 --> 00:03:53,740
run that resulting file gets really old really quickly.

53
00:03:53,940 --> 00:03:56,590
So to combine these two commands into just one.

54
00:03:56,670 --> 00:04:04,200
We also installed a little module two videos ago called T S dash node just a dash node is going to combine

55
00:04:04,230 --> 00:04:10,290
these two commands into one so it's going to automatically compile a given file and then automatically

56
00:04:10,320 --> 00:04:12,370
execute the resulting javascript.

57
00:04:12,450 --> 00:04:18,910
So it's just saving us from having to run that one extra command so we can run T S dash node and then

58
00:04:18,910 --> 00:04:22,340
the name of the typescript file that we want to execute.

59
00:04:22,480 --> 00:04:26,940
So index Dot T S so then run that command.

60
00:04:28,610 --> 00:04:30,680
And then I should see my Jason printed out.

61
00:04:30,680 --> 00:04:31,500
Yep there we go.

62
00:04:31,520 --> 00:04:35,330
A little bit of a pause there I guess my internet connection is a little bit spotty right now but I

63
00:04:35,330 --> 00:04:36,560
saw the printout right there.

64
00:04:36,560 --> 00:04:41,320
So in one step we compiled and then executed the resulting javascript OK.

65
00:04:41,350 --> 00:04:46,630
So that's how we put together a very basic types good program and then execute it at the terminal.

66
00:04:46,630 --> 00:04:51,040
But I still haven't really shown you anything around you know why typescript is handy here.

67
00:04:51,040 --> 00:04:54,730
So let's take a quick pause and when we come back the next video we're gonna start making a couple of

68
00:04:54,730 --> 00:05:00,680
changes to this program and we'll very quickly see why making use of typescript is really really handy.

69
00:05:00,680 --> 00:05:02,610
So quick pause and I'll see you in just a minute.