1 00:00:01,110 --> 00:00:06,320 We've set up a link between Seelie and local API, but right now everything is written out using plain 2 00:00:06,330 --> 00:00:10,740 JavaScript and remember, wherever possible, we really want to write out typescript for this entire 3 00:00:10,740 --> 00:00:11,280 project. 4 00:00:11,730 --> 00:00:15,780 So we're going to start to do a little refactor here and we're going to add in typescript support to 5 00:00:15,780 --> 00:00:17,790 our local API project to get started. 6 00:00:18,390 --> 00:00:21,660 Let's first begin by taking a look at one way that we can add in typescript support. 7 00:00:22,680 --> 00:00:27,600 OK, so this is one possible way that we can write out in some amount of typescript inside of local 8 00:00:27,600 --> 00:00:29,610 API, well, pretty simple. 9 00:00:29,610 --> 00:00:33,660 We could just write in a plain typescript file into local API. 10 00:00:34,230 --> 00:00:39,210 We can then update our main field inside a package, JSON to say indexed inducts. 11 00:00:40,270 --> 00:00:45,310 But this is generally not a recommended approach wherever possible, we really do not want to work tight 12 00:00:45,310 --> 00:00:50,260 script from an NPM model of any kind, even if we only expect to use it ourselves. 13 00:00:50,710 --> 00:00:55,960 The reason for this is that we might be trying to make use of this package inside of a JavaScript only 14 00:00:55,960 --> 00:00:58,270 package, which currently Seelie is. 15 00:00:58,850 --> 00:01:04,239 So if we tried to require in local API, we would get a typescript file and very quickly node with a 16 00:01:04,239 --> 00:01:09,670 crash saying, hey, there's a lot of little tokens inside of your extra colon's, all the type definitions, 17 00:01:09,670 --> 00:01:10,450 all that kind of stuff. 18 00:01:10,630 --> 00:01:12,340 It would very quickly start to throw eres. 19 00:01:13,310 --> 00:01:19,370 So instead, we need to transport all this typescript code into plain JavaScript before exporting it 20 00:01:19,370 --> 00:01:20,750 from local API. 21 00:01:21,680 --> 00:01:25,350 So here's the approach we're going to use for that inside of local API. 22 00:01:25,850 --> 00:01:28,400 We are going to write out some amount of typescript code. 23 00:01:28,880 --> 00:01:33,920 We are then going to feed it through the typescript compiler and have the result be placed inside of 24 00:01:33,920 --> 00:01:35,090 a dist directory. 25 00:01:35,370 --> 00:01:37,160 This being short for distribution. 26 00:01:38,420 --> 00:01:43,850 We will then update our packages on file and say that the main file inside this project is now deceased 27 00:01:44,000 --> 00:01:45,140 index James. 28 00:01:46,380 --> 00:01:51,740 So then whenever we require local API into our Seelie project, we are going to get the trans filed 29 00:01:52,050 --> 00:01:57,330 index as file, which can be safely executed over inside of this project. 30 00:01:58,240 --> 00:01:59,230 And that's pretty much it. 31 00:02:00,580 --> 00:02:05,680 So let's set up this little typescript pipeline inside of local API, the first thing we have to do 32 00:02:05,680 --> 00:02:08,500 is install TypeScript as a dependency into that project. 33 00:02:09,380 --> 00:02:10,729 So back over at my terminal. 34 00:02:13,340 --> 00:02:20,090 We'll do a Lelaina ad typescript, we're going to save this as a development dependency by adding in 35 00:02:20,090 --> 00:02:21,380 dash dash dev. 36 00:02:22,390 --> 00:02:27,250 Well, then specify the scope for this installation, so we only want to install typescript right now 37 00:02:27,430 --> 00:02:29,770 into our local API project. 38 00:02:30,730 --> 00:02:31,480 So run that. 39 00:02:33,750 --> 00:02:36,270 And after a moment or two, awesome. 40 00:02:37,840 --> 00:02:43,090 Then in addition to installing TypeScript, remember, we usually also want to create a config file 41 00:02:43,300 --> 00:02:47,990 inside of that directory as well so we can add in some configuration to typescript. 42 00:02:48,010 --> 00:02:52,010 And in this case, we want to specifically tell it that we want to take all the transpired typescript 43 00:02:52,210 --> 00:02:54,640 and place the result inside of a directory. 44 00:02:55,000 --> 00:03:00,270 So we're going to create a config file inside of the local API project to do so. 45 00:03:00,310 --> 00:03:02,890 I'm going to change over to local API. 46 00:03:04,610 --> 00:03:07,880 And then to generate that file will do an typescript. 47 00:03:08,780 --> 00:03:09,980 Dash, dash in it. 48 00:03:13,490 --> 00:03:19,010 And there's our config file now to generate that big file, you might be a little bit more familiar 49 00:03:19,010 --> 00:03:24,230 with Dashty in it if you want to run that instead to generate the config file. 50 00:03:24,260 --> 00:03:24,880 Totally fine. 51 00:03:25,190 --> 00:03:29,510 I'm just assuming here that you might not have typescript installed globally on your machine. 52 00:03:29,900 --> 00:03:33,160 So if you don't have typescript installed globally, you can use that command. 53 00:03:33,200 --> 00:03:36,460 Otherwise, if you do, you can do just the shortened TSC in it. 54 00:03:36,740 --> 00:03:39,020 So that's just why we are using that slightly different command. 55 00:03:40,410 --> 00:03:44,280 All right, now let's go back over to our code editor and find local API. 56 00:03:45,280 --> 00:03:48,400 Now, inside there, we've got our config file. 57 00:03:49,510 --> 00:03:53,350 There's the index, not just file, we don't really want to write out any JavaScript anymore. 58 00:03:53,650 --> 00:03:55,210 I'm going to delete that JavaScript file. 59 00:03:56,510 --> 00:04:01,700 And instead, I'm going to create an Sarsae directory inside of local API. 60 00:04:02,820 --> 00:04:07,020 Then inside there, I will place a indexical file. 61 00:04:07,620 --> 00:04:12,870 Here's our main file on immediately put in some very similar code inside of here to what we had previously. 62 00:04:13,140 --> 00:04:15,870 They'll do a export default. 63 00:04:17,010 --> 00:04:23,430 We're going to export a function, and whenever it gets called, we'll do a log of server is listening. 64 00:04:24,490 --> 00:04:28,210 And of course, if we wanted to, we could write out tons of other typescript related code inside of 65 00:04:28,210 --> 00:04:28,840 your as well. 66 00:04:31,740 --> 00:04:37,020 All right, next up, we're going to make a couple of changes to that config file and we're going to 67 00:04:37,020 --> 00:04:41,970 make sure that typescript is aware that should take the transpired output and place it into a new dist 68 00:04:41,970 --> 00:04:42,570 directory. 69 00:04:43,480 --> 00:04:45,130 So I'm going to find that config file. 70 00:04:47,300 --> 00:04:50,690 Then inside of here, we're going to scroll down just a little bit. 71 00:04:51,620 --> 00:04:53,780 And find out dirt right here. 72 00:04:55,010 --> 00:04:59,840 So if you scroll over to the comment describing that this is saying where we want to take the compiled 73 00:04:59,840 --> 00:05:05,780 output from the typescript compiler, where we want to place that output, so we want to place it inside 74 00:05:05,780 --> 00:05:10,550 of a dist directory, so uncommon that line and then put in dist like so. 75 00:05:15,290 --> 00:05:20,990 The other thing we're going to update inside of you is the UN comment declaration true, this will make 76 00:05:20,990 --> 00:05:26,180 sure that whenever we do our compilation process or transpiring with the typescript compiler, in addition 77 00:05:26,180 --> 00:05:30,500 to giving us some JavaScript files, we're also going to get some type definition files as well. 78 00:05:32,180 --> 00:05:33,380 So then save this. 79 00:05:34,890 --> 00:05:39,450 And then finally, we'll go over to our package Jason file and we're going to add in a script that is 80 00:05:39,450 --> 00:05:41,520 going to run our typescript compiler for us. 81 00:05:43,170 --> 00:05:47,280 So going to find the script section, I'm going to add in a new script called START. 82 00:05:48,400 --> 00:05:55,840 And whenever we run the start command, we will execute DC, Dash, Dash, watch, and I'm going to 83 00:05:55,840 --> 00:06:03,310 also add in one other option here of dash, dash, reserve watch output and please double check your 84 00:06:03,310 --> 00:06:04,290 spelling on preserve. 85 00:06:04,750 --> 00:06:07,510 Also, make sure you've got a capital W and a capital O. 86 00:06:08,970 --> 00:06:13,860 This option right here is going to make sure that whenever TypeScript recompile our code, it's not 87 00:06:13,860 --> 00:06:15,240 going to clear the entire console. 88 00:06:15,360 --> 00:06:17,340 You'll see why that's relevant a little bit later on. 89 00:06:18,550 --> 00:06:20,680 Now, to test this out, we can go back over to our terminal. 90 00:06:22,270 --> 00:06:26,560 And inside of our local API directory, I'll do a quick NPM run starts. 91 00:06:28,740 --> 00:06:34,230 OK, so now we are running the typescript compiler in watch mode after it transpires all of our code, 92 00:06:34,230 --> 00:06:36,480 the results should be placed into a disk directory. 93 00:06:37,020 --> 00:06:41,220 So if we go back over now inside of local API, we should see right there. 94 00:06:41,480 --> 00:06:46,310 There's our compiled JavaScript and we also have an index file going along with it. 95 00:06:46,320 --> 00:06:47,850 That is our type definition file. 96 00:06:48,360 --> 00:06:54,270 So now if we can very safely import this module into JavaScript projects and we're going to have a JavaScript 97 00:06:54,270 --> 00:06:58,830 file right there ready to go, we can also import this into typescript projects as well. 98 00:06:59,050 --> 00:07:03,270 And if we do, there's a type definition file right there to describe all the different things that 99 00:07:03,270 --> 00:07:04,050 we are exporting. 100 00:07:05,090 --> 00:07:06,560 OK, so this looks pretty good. 101 00:07:07,010 --> 00:07:12,590 The very last thing we have to do is inside of our local API package, that JSON file, we have to update 102 00:07:12,590 --> 00:07:13,730 that main field. 103 00:07:13,790 --> 00:07:19,490 We have to make sure that if anyone ever imports local API, now they get the indexed jazz file from 104 00:07:19,490 --> 00:07:20,480 the directory. 105 00:07:21,050 --> 00:07:24,620 So we will update mine to say this index. 106 00:07:26,070 --> 00:07:29,160 We're also going to add in one other option here of type's. 107 00:07:30,130 --> 00:07:37,300 This index dogs, this is strictly for typescript, so if we ever import this module into another typescript 108 00:07:37,300 --> 00:07:41,770 project, this is pretty much a pointer to the typescript compiler to say, hey, there's some type 109 00:07:41,770 --> 00:07:44,020 definition stuff inside of it. 110 00:07:44,050 --> 00:07:45,150 And that should not be indexed. 111 00:07:45,550 --> 00:07:47,410 That should be Dotts. 112 00:07:49,120 --> 00:07:53,620 So this is just telling, TypeScript, if we ever import this module, saying this is the main type 113 00:07:53,620 --> 00:07:55,390 definition file for the whole project. 114 00:07:56,720 --> 00:07:57,830 OK, so that should be it. 115 00:07:58,790 --> 00:08:03,770 Let's take a pause right here and we'll move back over to our Seelie project and add in types of support 116 00:08:03,770 --> 00:08:04,690 over there as well.