We've set up a link between Seelie and local API, but right now everything is written out using plain
JavaScript and remember, wherever possible, we really want to write out typescript for this entire
project.
So we're going to start to do a little refactor here and we're going to add in typescript support to
our local API project to get started.
Let's first begin by taking a look at one way that we can add in typescript support.
OK, so this is one possible way that we can write out in some amount of typescript inside of local
API, well, pretty simple.
We could just write in a plain typescript file into local API.
We can then update our main field inside a package, JSON to say indexed inducts.
But this is generally not a recommended approach wherever possible, we really do not want to work tight
script from an NPM model of any kind, even if we only expect to use it ourselves.
The reason for this is that we might be trying to make use of this package inside of a JavaScript only
package, which currently Seelie is.
So if we tried to require in local API, we would get a typescript file and very quickly node with a
crash saying, hey, there's a lot of little tokens inside of your extra colon's, all the type definitions,
all that kind of stuff.
It would very quickly start to throw eres.
So instead, we need to transport all this typescript code into plain JavaScript before exporting it
from local API.
So here's the approach we're going to use for that inside of local API.
We are going to write out some amount of typescript code.
We are then going to feed it through the typescript compiler and have the result be placed inside of
a dist directory.
This being short for distribution.
We will then update our packages on file and say that the main file inside this project is now deceased
index James.
So then whenever we require local API into our Seelie project, we are going to get the trans filed
index as file, which can be safely executed over inside of this project.
And that's pretty much it.
So let's set up this little typescript pipeline inside of local API, the first thing we have to do
is install TypeScript as a dependency into that project.
So back over at my terminal.
We'll do a Lelaina ad typescript, we're going to save this as a development dependency by adding in
dash dash dev.
Well, then specify the scope for this installation, so we only want to install typescript right now
into our local API project.
So run that.
And after a moment or two, awesome.
Then in addition to installing TypeScript, remember, we usually also want to create a config file
inside of that directory as well so we can add in some configuration to typescript.
And in this case, we want to specifically tell it that we want to take all the transpired typescript
and place the result inside of a directory.
So we're going to create a config file inside of the local API project to do so.
I'm going to change over to local API.
And then to generate that file will do an typescript.
Dash, dash in it.
And there's our config file now to generate that big file, you might be a little bit more familiar
with Dashty in it if you want to run that instead to generate the config file.
Totally fine.
I'm just assuming here that you might not have typescript installed globally on your machine.
So if you don't have typescript installed globally, you can use that command.
Otherwise, if you do, you can do just the shortened TSC in it.
So that's just why we are using that slightly different command.
All right, now let's go back over to our code editor and find local API.
Now, inside there, we've got our config file.
There's the index, not just file, we don't really want to write out any JavaScript anymore.
I'm going to delete that JavaScript file.
And instead, I'm going to create an Sarsae directory inside of local API.
Then inside there, I will place a indexical file.
Here's our main file on immediately put in some very similar code inside of here to what we had previously.
They'll do a export default.
We're going to export a function, and whenever it gets called, we'll do a log of server is listening.
And of course, if we wanted to, we could write out tons of other typescript related code inside of
your as well.
All right, next up, we're going to make a couple of changes to that config file and we're going to
make sure that typescript is aware that should take the transpired output and place it into a new dist
directory.
So I'm going to find that config file.
Then inside of here, we're going to scroll down just a little bit.
And find out dirt right here.
So if you scroll over to the comment describing that this is saying where we want to take the compiled
output from the typescript compiler, where we want to place that output, so we want to place it inside
of a dist directory, so uncommon that line and then put in dist like so.
The other thing we're going to update inside of you is the UN comment declaration true, this will make
sure that whenever we do our compilation process or transpiring with the typescript compiler, in addition
to giving us some JavaScript files, we're also going to get some type definition files as well.
So then save this.
And then finally, we'll go over to our package Jason file and we're going to add in a script that is
going to run our typescript compiler for us.
So going to find the script section, I'm going to add in a new script called START.
And whenever we run the start command, we will execute DC, Dash, Dash, watch, and I'm going to
also add in one other option here of dash, dash, reserve watch output and please double check your
spelling on preserve.
Also, make sure you've got a capital W and a capital O.
This option right here is going to make sure that whenever TypeScript recompile our code, it's not
going to clear the entire console.
You'll see why that's relevant a little bit later on.
Now, to test this out, we can go back over to our terminal.
And inside of our local API directory, I'll do a quick NPM run starts.
OK, so now we are running the typescript compiler in watch mode after it transpires all of our code,
the results should be placed into a disk directory.
So if we go back over now inside of local API, we should see right there.
There's our compiled JavaScript and we also have an index file going along with it.
That is our type definition file.
So now if we can very safely import this module into JavaScript projects and we're going to have a JavaScript
file right there ready to go, we can also import this into typescript projects as well.
And if we do, there's a type definition file right there to describe all the different things that
we are exporting.
OK, so this looks pretty good.
The very last thing we have to do is inside of our local API package, that JSON file, we have to update
that main field.
We have to make sure that if anyone ever imports local API, now they get the indexed jazz file from
the directory.
So we will update mine to say this index.
We're also going to add in one other option here of type's.
This index dogs, this is strictly for typescript, so if we ever import this module into another typescript
project, this is pretty much a pointer to the typescript compiler to say, hey, there's some type
definition stuff inside of it.
And that should not be indexed.
That should be Dotts.
So this is just telling, TypeScript, if we ever import this module, saying this is the main type
definition file for the whole project.
OK, so that should be it.
Let's take a pause right here and we'll move back over to our Seelie project and add in types of support
over there as well.