1
00:00:01,080 --> 00:00:04,980
Now that we've published an initial version of our package it is time to actually go back through all

2
00:00:04,980 --> 00:00:08,440
of our code and start moving stuff over to this common library.

3
00:00:08,440 --> 00:00:13,050
And before we do so quick note on how we're going to actually execute code inside of here and make it

4
00:00:13,050 --> 00:00:14,890
available to other projects.

5
00:00:15,050 --> 00:00:19,470
So we've written out a lot of typescript middle layers error handling stuff and so on that we want to

6
00:00:19,470 --> 00:00:21,210
share with other services.

7
00:00:21,210 --> 00:00:23,060
How are we going to share this typescript.

8
00:00:23,070 --> 00:00:27,450
Well just something to keep in mind inside this common library we are going to be writing out typescript

9
00:00:27,450 --> 00:00:30,390
with a very particular version in the future.

10
00:00:30,420 --> 00:00:35,680
We might try to install this thing into a service that is using a different version of typescript.

11
00:00:35,790 --> 00:00:40,680
We do not want to have any version issue is between one version of type scripting used inside this come

12
00:00:40,680 --> 00:00:44,750
library and another version being used in some service all right in the future.

13
00:00:44,760 --> 00:00:49,650
In addition we might not even be writing out services using typescript at all.

14
00:00:49,650 --> 00:00:56,620
We might be writing them using plain javascript so to solve both these possible issues our common library

15
00:00:56,620 --> 00:00:58,580
is going to be written as typescript.

16
00:00:58,580 --> 00:01:03,290
So we're going to have typescript Middleware is error handling stuff and so on but before publishing

17
00:01:03,320 --> 00:01:08,400
our code we are going to trans pilot inside this com library into javascript.

18
00:01:08,570 --> 00:01:13,730
So we're going to write typescript publish javascript that's going to mean that we can very easily use

19
00:01:13,730 --> 00:01:20,170
this code anywhere at any point in time without any issues whatsoever so it's a very practical level.

20
00:01:20,180 --> 00:01:21,140
What does this mean.

21
00:01:21,140 --> 00:01:25,360
Well it just means we need to set up some tooling inside the shared library to take all the typescript

22
00:01:25,430 --> 00:01:28,730
we write inside of it and convert it into plain javascript.

23
00:01:28,730 --> 00:01:30,050
That's pretty much it.

24
00:01:30,050 --> 00:01:33,860
So in this video we're going to install a couple of dependencies that's going to make it really easy

25
00:01:33,860 --> 00:01:40,330
for us to build our package into javascript code and eventually publish that stuff yet to get started.

26
00:01:40,370 --> 00:01:43,880
Going to go back over to my terminal inside my common directory.

27
00:01:43,960 --> 00:01:49,460
I'm going to first get started by generating a typescript config file or T.S. config file.

28
00:01:49,660 --> 00:01:58,880
It's going to run TSC dash dash in it that'll generate a yes config file and then going to install typescript

29
00:01:58,880 --> 00:02:05,470
into this project with npm install typescript I'm also going to install something else we're going to

30
00:02:05,470 --> 00:02:12,220
use for a little bit of assistance in this tooling process called Dell CLIA and I'm going to install

31
00:02:12,250 --> 00:02:19,390
both these as development dependencies so I only want to have these installed when we're doing development

32
00:02:19,480 --> 00:02:21,370
on the common package.

33
00:02:21,370 --> 00:02:26,770
I do not want to install them if we are adding this package into some other service.

34
00:02:26,890 --> 00:02:28,420
Now we've got that put together.

35
00:02:28,660 --> 00:02:34,240
I'm going to go back over to my editor and we're going to manually write out a little typescript file.

36
00:02:34,240 --> 00:02:41,120
We're going to try to eventually turn it into some plain javascript and publish it so inside of common

37
00:02:41,540 --> 00:02:49,100
I'm going to create a new folder called our C inside of that I'm gonna make a file called index dot

38
00:02:49,150 --> 00:02:54,740
t s and then inside of here we're going to write out just a little bit of sample typescript code and

39
00:02:54,740 --> 00:03:00,970
eventually try to trance file it down to JavaScript and publish it so let's write out something that

40
00:03:00,970 --> 00:03:02,620
actually looks kind of typescript.

41
00:03:03,160 --> 00:03:08,950
I'll put inside of your interface color and how about we'll have read.

42
00:03:08,950 --> 00:03:17,240
That's a number Lou that's a no and green that's a no and they'll just create some kind of variable

43
00:03:18,340 --> 00:03:19,260
called color.

44
00:03:19,370 --> 00:03:28,720
I'm going to annotate it as type color and I'll put in a read of 10 Lou 10 green 10 and then how about

45
00:03:28,750 --> 00:03:32,160
a simple console log of color.

46
00:03:32,160 --> 00:03:32,380
OK.

47
00:03:32,410 --> 00:03:36,160
So at this point we have some typescript code inside of here as we will as soon as we start to move

48
00:03:36,190 --> 00:03:39,240
over all of that common code in the service.

49
00:03:39,250 --> 00:03:44,290
Now I want to make sure that we've got a really easy way to take this in next to yes file and simply

50
00:03:44,290 --> 00:03:45,920
convert it into javascript.

51
00:03:45,940 --> 00:03:51,170
That's all I really want to do here so we're gonna open up our package not just on file.

52
00:03:51,510 --> 00:03:55,950
We're gonna find our script section we're going to add something inside of here to build our project

53
00:03:56,070 --> 00:04:00,620
it's going to take all the typescript and turn it into javascript that we can then publish very easily

54
00:04:02,590 --> 00:04:04,940
going gonna find the existing test command and delete it

55
00:04:08,010 --> 00:04:14,990
and then going to replace it with a build command whenever we run built I want to execute the command

56
00:04:15,030 --> 00:04:20,710
TSC inside of our project that's going to run the typescript compiler and we're going to set up the

57
00:04:20,710 --> 00:04:27,950
typescript compiler to find that index not t file and turn it into you guessed it javascript code to

58
00:04:27,950 --> 00:04:32,330
do so we do have to provide a little bit of configuration to typescript we need to tell it where to

59
00:04:32,330 --> 00:04:37,190
find our source code and where to place it after it has been turned in to JavaScript.

60
00:04:37,190 --> 00:04:41,140
We're going to write that stuff out inside that T.S. config file that we generated just a moment ago.

61
00:04:42,990 --> 00:04:45,600
Inside of here we're gonna add in a couple of different options.

62
00:04:45,600 --> 00:04:50,410
Mostly we're going to on comments some of these default things to get place to inside of your we're

63
00:04:50,410 --> 00:04:56,990
gonna first find declaration and uncommon that that makes sure that when we turn our typescript into

64
00:04:56,990 --> 00:05:00,170
javascript it's going to also generate a type definition file.

65
00:05:00,200 --> 00:05:04,940
So even if we stall install this module into a service that uses typescript we'll still have a type

66
00:05:04,940 --> 00:05:09,260
definition file that will allow typescript to figure out what is going on inside of our common module

67
00:05:11,430 --> 00:05:13,310
and then going to find out.

68
00:05:13,330 --> 00:05:13,900
DIR.

69
00:05:13,900 --> 00:05:22,100
Right here I'm gonna uncommon that I'm gonna change the path to build like so so after generating our

70
00:05:22,100 --> 00:05:27,190
javascript code we're going to take everything got generated and stick it into a new folder inside of

71
00:05:27,190 --> 00:05:35,380
our common directory called built and that is pretty much it there's nothing else inside of here that

72
00:05:35,380 --> 00:05:36,280
we're going to worry about.

73
00:05:36,940 --> 00:05:43,140
Yep that's it that's let's save both these files that he has config and the package that Jason I'm then

74
00:05:43,150 --> 00:05:50,240
going to go over to my terminal and I'll execute NPM run built.

75
00:05:50,390 --> 00:05:55,310
That should take the typescript why we wrote out convert it into javascript and then write it into that

76
00:05:55,310 --> 00:06:02,480
bill directory and sure enough there it is right there so we've now got an indexed j ust file only javascript

77
00:06:02,480 --> 00:06:08,000
inside there and we've also got a type definition file as well that's declaring or defining all the

78
00:06:08,000 --> 00:06:11,500
different types that we had used inside of our project yet.

79
00:06:11,530 --> 00:06:13,830
So this is definitely good step forward.

80
00:06:13,930 --> 00:06:18,220
Now one thing that we're gonna add in here very quickly any time we make a change to our project it's

81
00:06:18,220 --> 00:06:23,720
very common to want to remove everything inside of the bill directory before we rebuild it.

82
00:06:23,830 --> 00:06:28,830
Just make sure that we are doing a very fresh clean build every single time for that.

83
00:06:28,850 --> 00:06:37,350
That's why we installed this DLC allied tool we can add in another script here called Clean and whenever

84
00:06:37,380 --> 00:06:46,270
we run clean I'm going to execute Dell dot slash build slash star don't we run the clean script that's

85
00:06:46,280 --> 00:06:50,310
going to delete the bill directory so we can rebuild our project from scratch without worrying about

86
00:06:50,310 --> 00:06:56,880
having any kind of leftover built stuff or anything like that and then going to update the build command

87
00:06:57,000 --> 00:07:04,230
to make sure that we always attempt to clean before we build it I'll put in NPM Ron clean and DSE it

88
00:07:04,230 --> 00:07:14,690
like so yeah I'll then go back over I'm going to execute NPM run build again that's going to delete

89
00:07:14,690 --> 00:07:21,470
the bill directory and then rebuild the project using the typescript compiler and so I'll see you still

90
00:07:21,470 --> 00:07:26,700
got everything inside of here delete everything and recreate it it.

91
00:07:26,790 --> 00:07:31,860
So this is a good start right here there's just a little bit more config we have to do so quick pause

92
00:07:31,950 --> 00:07:33,300
and we'll continue in just a moment.