1 00:00:00,270 --> 00:00:04,170 In this lecture, we're going to install a compiler for TypeScript. 2 00:00:04,500 --> 00:00:06,270 That sounds strange, doesn't it? 3 00:00:06,570 --> 00:00:09,900 Normally we would be able to write JavaScript right away. 4 00:00:10,200 --> 00:00:15,450 We wouldn't need to worry about compiling the code ourselves, since the browser will interpret our 5 00:00:15,450 --> 00:00:16,410 code for us. 6 00:00:16,680 --> 00:00:19,350 However, it's a different story with TypeScript. 7 00:00:20,010 --> 00:00:22,560 Most browsers don't support TypeScript. 8 00:00:22,830 --> 00:00:29,910 Therefore, we need to compile our TypeScript code into JavaScript after we we've compiled it to JavaScript. 9 00:00:30,120 --> 00:00:33,090 We'll be able to run our code in the browser or node. 10 00:00:33,420 --> 00:00:35,790 Luckily, this process is painless. 11 00:00:37,390 --> 00:00:41,710 In the resource section of this lecture, I provide a link to TypeScript. 12 00:00:42,070 --> 00:00:46,780 Everything you'd like to learn about TypeScript can be found here on this page. 13 00:00:46,960 --> 00:00:49,240 It'll recommend some installation methods. 14 00:00:49,750 --> 00:00:52,270 TypeScript can be installed with 21:00. 15 00:00:52,510 --> 00:00:53,650 Let's give it a try. 16 00:00:53,890 --> 00:00:56,500 Copy the command from the documentation. 17 00:00:59,180 --> 00:01:02,630 Inside the command line, I will paste and run the command. 18 00:01:02,930 --> 00:01:08,240 If you're on a Mac or Linux, you may need to add the pseudo command before running it. 19 00:01:08,690 --> 00:01:12,020 It'll give you proper permissions for installing packages. 20 00:01:12,290 --> 00:01:17,880 Otherwise, running the command, as is, will work fine for this installation. 21 00:01:17,900 --> 00:01:21,710 I'm working in the same directory we were in in the last lecture. 22 00:01:22,070 --> 00:01:24,470 This installation should take a few seconds. 23 00:01:24,740 --> 00:01:27,020 We're installing TypeScript locally. 24 00:01:27,350 --> 00:01:31,580 We have the option of installing it globally, but that won't be necessary. 25 00:01:32,000 --> 00:01:34,220 It's enough to have it installed locally. 26 00:01:34,940 --> 00:01:39,470 After installing TypeScript, we can begin to write TypeScript code. 27 00:01:40,070 --> 00:01:45,010 The first step for writing TypeScript is to create a file in our project. 28 00:01:45,050 --> 00:01:50,660 We're going to rename the Example D.J.s file by changing the extension to its. 29 00:01:53,200 --> 00:01:57,400 This is short for TypeScript after changing the file type. 30 00:01:57,520 --> 00:01:59,950 We've written our first TypeScript file. 31 00:02:00,250 --> 00:02:05,590 As I've said before, TypeScript syntax is the exact same as JavaScript syntax. 32 00:02:05,890 --> 00:02:09,789 Every syntax feature from JavaScript is supported in TypeScript. 33 00:02:10,120 --> 00:02:16,720 Therefore, we don't need to learn an entirely new set of syntax rules after we've written our TypeScript 34 00:02:16,720 --> 00:02:17,200 code. 35 00:02:17,320 --> 00:02:20,050 The next step is to compile it into JavaScript. 36 00:02:20,380 --> 00:02:26,620 We can use the compiler we installed to help us with that step and the command line we can run TypeScript 37 00:02:26,620 --> 00:02:29,770 by adding the NPCs CSC Command. 38 00:02:32,350 --> 00:02:37,840 NTPC's is a command created by 21:00 in the Node.js ecosystem. 39 00:02:37,990 --> 00:02:41,050 Some packages add commands to the command line. 40 00:02:41,410 --> 00:02:46,570 The command allows us to run those commands that come from those packages. 41 00:02:46,840 --> 00:02:51,760 For example, TSC is a command defined by the TypeScript package. 42 00:02:52,180 --> 00:02:56,740 21:00 will take care of searching for the command in the TypeScript package. 43 00:02:57,280 --> 00:03:04,390 After typing the command, we need to provide the files name we want to compile from TypeScript to JavaScript. 44 00:03:04,750 --> 00:03:06,250 Let's pass an example. 45 00:03:06,250 --> 00:03:09,760 Dots afterward will run the command. 46 00:03:12,290 --> 00:03:15,170 After a few moments, the command will finish running. 47 00:03:15,440 --> 00:03:16,790 So what happened? 48 00:03:17,120 --> 00:03:23,690 If we look in our project directory, we'll find a new file has been generated called Example Dogs. 49 00:03:24,170 --> 00:03:25,580 Let's take a look inside. 50 00:03:26,090 --> 00:03:28,790 We have the exact same code we had before. 51 00:03:29,120 --> 00:03:32,420 The problem we had before persisted at this point. 52 00:03:32,660 --> 00:03:37,340 It doesn't feel like TypeScript isn't helping us in the next couple of lectures. 53 00:03:37,490 --> 00:03:40,730 We're going to explore the syntax added by TypeScript. 54 00:03:41,030 --> 00:03:43,820 By doing so, we'll be able to fix our issue. 55 00:03:44,000 --> 00:03:44,990 I'll see you there.