1 00:00:01,020 --> 00:00:04,710 In the last video, we did a little bit of environment set up, and now we're ready to start working 2 00:00:04,710 --> 00:00:07,450 on our first project, so let's talk about what we're going to make. 3 00:00:08,160 --> 00:00:08,610 All right. 4 00:00:08,610 --> 00:00:11,430 So we're going to start off with a very simple first little application. 5 00:00:11,700 --> 00:00:16,020 We're going to make a little tiny application that's just going to make a network request to some outside 6 00:00:16,020 --> 00:00:16,560 API. 7 00:00:16,950 --> 00:00:17,790 That's some data. 8 00:00:17,970 --> 00:00:21,030 And we're going to try to print that data inside of our terminal. 9 00:00:21,240 --> 00:00:21,890 And that's it. 10 00:00:22,770 --> 00:00:27,270 Now, with this first application, I'm not trying to teach you any specific syntax or anything like 11 00:00:27,270 --> 00:00:27,600 that. 12 00:00:27,870 --> 00:00:30,780 I just want to show you why we use typescript in general. 13 00:00:31,110 --> 00:00:36,330 So as we write this program, we're going to accidentally, quote unquote, you know, kind of accidentally 14 00:00:36,480 --> 00:00:39,270 introduce one or two bugs into our application. 15 00:00:39,690 --> 00:00:44,100 And then we're going to very quickly see that typescript has the ability to help us catch those bugs 16 00:00:44,250 --> 00:00:48,180 while we are writing our code as opposed to when we execute our code. 17 00:00:48,690 --> 00:00:53,340 So, again, the point on this application is just to show you the typical workflow of typescript. 18 00:00:53,460 --> 00:00:54,060 That's it. 19 00:00:55,070 --> 00:00:58,040 All right, so with that in mind, let's talk about the flow that we're going to go through to actually 20 00:00:58,040 --> 00:00:58,940 build this application. 21 00:00:59,790 --> 00:01:03,320 So step one, we're going to take a look at the API that we're going to use to fetch some data. 22 00:01:04,160 --> 00:01:06,350 After that, we're going to create a new project directory. 23 00:01:06,980 --> 00:01:12,950 We're going to create a package JSON file inside there and then install AXIOS as an NPM module. 24 00:01:13,790 --> 00:01:19,070 Saxbe Axios is a little module that we're going to use just to make a network request if you've never 25 00:01:19,070 --> 00:01:20,340 worked with this module before. 26 00:01:20,360 --> 00:01:21,140 Totally fine. 27 00:01:21,630 --> 00:01:24,070 Axios doesn't really have anything to do with TypeScript. 28 00:01:24,110 --> 00:01:26,180 We're just going to use it to make a network request. 29 00:01:26,360 --> 00:01:26,980 That's it. 30 00:01:28,040 --> 00:01:30,740 So once we do all that set up, then we'll start to write out some code. 31 00:01:32,160 --> 00:01:35,940 All right, so on to step number one, let's take a look at the API that we're going to use to fetch 32 00:01:35,940 --> 00:01:36,450 some data. 33 00:01:37,530 --> 00:01:42,030 So here's a link to the AP right here on the screen, and this is a fake AP. 34 00:01:42,150 --> 00:01:47,040 In other words, it serves up fake data that we can use just for like testing or learning purposes. 35 00:01:47,400 --> 00:01:49,940 In other words, it's perfect for what we are trying to do right now. 36 00:01:51,050 --> 00:01:55,280 So I'm going to pull up that documentation inside of a new tab and then scroll on down to a section 37 00:01:55,280 --> 00:01:56,510 called Resources. 38 00:01:59,170 --> 00:02:00,940 All right, so here's resources right here. 39 00:02:01,570 --> 00:02:06,310 So these are all the different types of records, so we can make a request or attempt to fetch from 40 00:02:06,310 --> 00:02:07,020 this API. 41 00:02:07,720 --> 00:02:10,509 We're going to attempt to fetch this list of to DOS right here. 42 00:02:10,880 --> 00:02:14,210 So I'm going to click on that to news link as soon as I do. 43 00:02:14,230 --> 00:02:16,930 So you're going to see a ton of information up here on the screen. 44 00:02:17,530 --> 00:02:20,800 You'll notice that on my screen it appears to be very nicely formatted. 45 00:02:21,190 --> 00:02:24,250 If it looks like a big blob of text on your screen, that's totally fine. 46 00:02:24,620 --> 00:02:28,330 I've got a little chrome extension to automatically format JSON data for me. 47 00:02:29,440 --> 00:02:34,900 So if we make a network request to this, you are right here, we're going to get back a big list of 48 00:02:34,900 --> 00:02:36,310 fake to do items. 49 00:02:37,230 --> 00:02:41,190 Now, we don't really need this whole list, I just want to try to fetch like one individual item, 50 00:02:41,880 --> 00:02:48,120 so to fetch just this first item off the list or the to do with an idea of one, we can modify the URL 51 00:02:48,120 --> 00:02:48,950 up here slightly. 52 00:02:49,620 --> 00:02:53,430 So at the very end of the URL, I'll add on one like so. 53 00:02:56,020 --> 00:02:59,270 Once I visit that link, I'll then see a single to do appear on the screen. 54 00:02:59,950 --> 00:03:02,210 So this is the exact data that we want to fetch. 55 00:03:02,740 --> 00:03:06,970 I want to fetch this data inside of our application and then just try to print out some information 56 00:03:06,970 --> 00:03:08,260 from this to do to our terminal. 57 00:03:08,410 --> 00:03:09,730 Like I said, that's it. 58 00:03:11,030 --> 00:03:15,110 All right, so now that we understand the API we're going to work with will now flip on over to our 59 00:03:15,110 --> 00:03:17,270 terminal and create a new project directory. 60 00:03:18,840 --> 00:03:23,100 It's over inside of my terminal, I'm inside of a workspace directory of sorts, you can place this 61 00:03:23,100 --> 00:03:25,170 folder anywhere on your machine that you want to. 62 00:03:26,940 --> 00:03:31,830 I'll make a new project folder inside of here, and I'm going to call it that, Jason. 63 00:03:33,020 --> 00:03:38,510 All that changed into that directory and then I'm going to generate a new package, JSON file inside 64 00:03:38,510 --> 00:03:43,280 of here, remember package dot Jason files are used to record all the different dependencies that we 65 00:03:43,280 --> 00:03:44,540 install into a project. 66 00:03:45,200 --> 00:03:49,630 Normally that's the case for JavaScript projects, but does the same thing for TypeScript as well. 67 00:03:49,970 --> 00:03:53,090 We record dependencies inside of a package that stays on file. 68 00:03:53,990 --> 00:03:57,200 So to generate that file, I'll run NPM in it, Dashi. 69 00:04:00,090 --> 00:04:04,740 That's going to generate that file and now I can safely install that axios module. 70 00:04:04,920 --> 00:04:08,310 Remember, Axios is going to be used just to make that network request. 71 00:04:09,180 --> 00:04:12,330 So to do so, I'll run and install Axios like so. 72 00:04:15,160 --> 00:04:18,430 Now, Axios is really small, so this should install rather quickly. 73 00:04:20,040 --> 00:04:25,440 Once it's all done, well, then open up my code editor inside this folder and we'll start to work on 74 00:04:25,440 --> 00:04:26,100 our project. 75 00:04:27,520 --> 00:04:28,540 All right, so here we go. 76 00:04:28,780 --> 00:04:34,150 I should see inside of here the packages on file and the node modules directory, which has that axios 77 00:04:34,150 --> 00:04:36,130 project or module that we just installed. 78 00:04:37,170 --> 00:04:40,710 So now we've got everything set up, let's take a quick pause right here and we'll start to write some 79 00:04:40,710 --> 00:04:41,880 code in the next video.