1 00:00:00,950 --> 00:00:05,690 All right my friends many videos ago I told you that we were going to spend a lot of time learning the 2 00:00:05,690 --> 00:00:07,580 basic syntax of typescript. 3 00:00:07,640 --> 00:00:11,660 We've now gotten through all that basic stuff and we've got a reasonable understanding of some of the 4 00:00:11,660 --> 00:00:16,550 low levels of typescript but I think it's very fair to say that we still don't really understand how 5 00:00:16,550 --> 00:00:18,730 to build an application with it. 6 00:00:18,770 --> 00:00:22,820 So starting in this video we're going to work on our first application and throughout the rest of this 7 00:00:22,820 --> 00:00:26,450 course all we're going to focus on is design patterns. 8 00:00:26,450 --> 00:00:31,040 We're going to learn how to use typescript effectively inside of an application and how to leverage 9 00:00:31,040 --> 00:00:34,030 its features to write really reusable code. 10 00:00:34,040 --> 00:00:38,490 So let's talk about what we're gonna build for our first application. 11 00:00:38,540 --> 00:00:38,900 All right. 12 00:00:38,900 --> 00:00:42,190 So here this mockup. 13 00:00:42,230 --> 00:00:42,430 All right. 14 00:00:42,440 --> 00:00:45,740 So we're going to make a very basic little web application. 15 00:00:45,740 --> 00:00:48,860 So this is gonna be something it's going to run inside of your browser. 16 00:00:48,860 --> 00:00:53,330 Our application is going to randomly generate two different entities. 17 00:00:53,330 --> 00:00:59,000 It's going to randomly generate a user and randomly generate a company known as they randomly generate 18 00:00:59,060 --> 00:01:04,250 all I mean is that we're going to have a user with a randomly generated name and last name and age and 19 00:01:04,250 --> 00:01:04,990 stuff like that. 20 00:01:05,630 --> 00:01:11,740 And our company will have a random name in a random business and some stuff like that as well every 21 00:01:11,740 --> 00:01:16,360 user in every company is going to have a location property tied to it as well. 22 00:01:16,360 --> 00:01:22,280 So this is going to be like a longitude and latitude after we generate the user and the company we're 23 00:01:22,280 --> 00:01:27,560 gonna use that location to show them as markers on a Google map inside the browser. 24 00:01:27,560 --> 00:01:32,110 So this marker right here I know it's kind of hard to see what these colors might represent the user. 25 00:01:32,240 --> 00:01:37,990 And this over here might represent the company so the entire goal of this application is to get you 26 00:01:37,990 --> 00:01:44,800 more familiar with classes and how to understand how to make use of interfaces really effectively to 27 00:01:44,800 --> 00:01:48,200 get some amount of code reuse on the applications you work on. 28 00:01:48,250 --> 00:01:49,090 That's the whole goal. 29 00:01:49,090 --> 00:01:55,390 And like I said that's pretty much the whole goal of the entire course understanding classes and interfaces. 30 00:01:55,390 --> 00:01:57,120 All right so now we understand what's going on here. 31 00:01:57,130 --> 00:02:02,170 We're gonna do just a tiny bit of setup inside this video in order to actually get some typescript code 32 00:02:02,170 --> 00:02:04,040 running inside the browser very easily. 33 00:02:04,090 --> 00:02:06,920 We're going to use a tool called parcel bundler. 34 00:02:07,090 --> 00:02:08,770 This is a command line tool. 35 00:02:08,770 --> 00:02:14,530 Now we're going to use in place of T.S. node parcel bundler is all about getting some typescript executed 36 00:02:14,560 --> 00:02:16,500 inside the browser very easily. 37 00:02:16,570 --> 00:02:19,260 So it's going to automate a lot of tooling for us. 38 00:02:19,420 --> 00:02:23,140 We will eventually learn how to set up a tiebreaker project manually. 39 00:02:23,140 --> 00:02:28,240 But right now we're gonna start off nice and easy using personal so to set up parcel. 40 00:02:28,240 --> 00:02:30,810 All we have to do is run this command at our terminal. 41 00:02:30,890 --> 00:02:36,880 It's going to flip over to my terminal right now and I'll do an npm install dash G Passel dash bundler 42 00:02:36,940 --> 00:02:40,820 like so this is going to take a minute or two to install. 43 00:02:40,820 --> 00:02:44,440 So going to let it do its thing and I'll join back up with you in just a minute.