Now that we've published an initial version of our package it is time to actually go back through all
of our code and start moving stuff over to this common library.
And before we do so quick note on how we're going to actually execute code inside of here and make it
available to other projects.
So we've written out a lot of typescript middle layers error handling stuff and so on that we want to
share with other services.
How are we going to share this typescript.
Well just something to keep in mind inside this common library we are going to be writing out typescript
with a very particular version in the future.
We might try to install this thing into a service that is using a different version of typescript.
We do not want to have any version issue is between one version of type scripting used inside this come
library and another version being used in some service all right in the future.
In addition we might not even be writing out services using typescript at all.
We might be writing them using plain javascript so to solve both these possible issues our common library
is going to be written as typescript.
So we're going to have typescript Middleware is error handling stuff and so on but before publishing
our code we are going to trans pilot inside this com library into javascript.
So we're going to write typescript publish javascript that's going to mean that we can very easily use
this code anywhere at any point in time without any issues whatsoever so it's a very practical level.
What does this mean.
Well it just means we need to set up some tooling inside the shared library to take all the typescript
we write inside of it and convert it into plain javascript.
That's pretty much it.
So in this video we're going to install a couple of dependencies that's going to make it really easy
for us to build our package into javascript code and eventually publish that stuff yet to get started.
Going to go back over to my terminal inside my common directory.
I'm going to first get started by generating a typescript config file or T.S. config file.
It's going to run TSC dash dash in it that'll generate a yes config file and then going to install typescript
into this project with npm install typescript I'm also going to install something else we're going to
use for a little bit of assistance in this tooling process called Dell CLIA and I'm going to install
both these as development dependencies so I only want to have these installed when we're doing development
on the common package.
I do not want to install them if we are adding this package into some other service.
Now we've got that put together.
I'm going to go back over to my editor and we're going to manually write out a little typescript file.
We're going to try to eventually turn it into some plain javascript and publish it so inside of common
I'm going to create a new folder called our C inside of that I'm gonna make a file called index dot
t s and then inside of here we're going to write out just a little bit of sample typescript code and
eventually try to trance file it down to JavaScript and publish it so let's write out something that
actually looks kind of typescript.
I'll put inside of your interface color and how about we'll have read.
That's a number Lou that's a no and green that's a no and they'll just create some kind of variable
called color.
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
a simple console log of color.
OK.
So at this point we have some typescript code inside of here as we will as soon as we start to move
over all of that common code in the service.
Now I want to make sure that we've got a really easy way to take this in next to yes file and simply
convert it into javascript.
That's all I really want to do here so we're gonna open up our package not just on file.
We're gonna find our script section we're going to add something inside of here to build our project
it's going to take all the typescript and turn it into javascript that we can then publish very easily
going gonna find the existing test command and delete it
and then going to replace it with a build command whenever we run built I want to execute the command
TSC inside of our project that's going to run the typescript compiler and we're going to set up the
typescript compiler to find that index not t file and turn it into you guessed it javascript code to
do so we do have to provide a little bit of configuration to typescript we need to tell it where to
find our source code and where to place it after it has been turned in to JavaScript.
We're going to write that stuff out inside that T.S. config file that we generated just a moment ago.
Inside of here we're gonna add in a couple of different options.
Mostly we're going to on comments some of these default things to get place to inside of your we're
gonna first find declaration and uncommon that that makes sure that when we turn our typescript into
javascript it's going to also generate a type definition file.
So even if we stall install this module into a service that uses typescript we'll still have a type
definition file that will allow typescript to figure out what is going on inside of our common module
and then going to find out.
DIR.
Right here I'm gonna uncommon that I'm gonna change the path to build like so so after generating our
javascript code we're going to take everything got generated and stick it into a new folder inside of
our common directory called built and that is pretty much it there's nothing else inside of here that
we're going to worry about.
Yep that's it that's let's save both these files that he has config and the package that Jason I'm then
going to go over to my terminal and I'll execute NPM run built.
That should take the typescript why we wrote out convert it into javascript and then write it into that
bill directory and sure enough there it is right there so we've now got an indexed j ust file only javascript
inside there and we've also got a type definition file as well that's declaring or defining all the
different types that we had used inside of our project yet.
So this is definitely good step forward.
Now one thing that we're gonna add in here very quickly any time we make a change to our project it's
very common to want to remove everything inside of the bill directory before we rebuild it.
Just make sure that we are doing a very fresh clean build every single time for that.
That's why we installed this DLC allied tool we can add in another script here called Clean and whenever
we run clean I'm going to execute Dell dot slash build slash star don't we run the clean script that's
going to delete the bill directory so we can rebuild our project from scratch without worrying about
having any kind of leftover built stuff or anything like that and then going to update the build command
to make sure that we always attempt to clean before we build it I'll put in NPM Ron clean and DSE it
like so yeah I'll then go back over I'm going to execute NPM run build again that's going to delete
the bill directory and then rebuild the project using the typescript compiler and so I'll see you still
got everything inside of here delete everything and recreate it it.
So this is a good start right here there's just a little bit more config we have to do so quick pause
and we'll continue in just a moment.