TypeScript for the Back-End

Setup ts-node

To start coding in TypeScript, we need to install the dependencies that will transpile our code and then create configuration files (although they are not strictly required) that set rules for how they are transpiled. At the root of your app install ts-node and nodemon, which runs our .ts files directly during development and can also restart our server when changes are detected, and typescript, to turn our .ts files in .js files. These modules are for development so make sure to use the -D option.

npm i -D ts-node nodemon typescript tslint

To specify rules for transpilation, create a file named tsconfig.json at root/ and paste in the following contents. If you plan on debugging with an IDE like Webstorm or VsCode, we need to generate .js.map files which is what “sourcemap” on line 8 is for.

The unit-test test files we’ll eventually create will end with .test.ts and aren’t needed for production so make sure to exclude those in addition to any front-end folders, which will have their own build scripts.

To enforce a set of coding standards for your TypeScript, create another file named tslint.json. I tend to set mine pretty strict cause I like to follow convention, but feel free to play around with these settings if you want.

Create a Server

Now we can finally start writing some TypeScript. Under src/ create a server file which will configure and run Express. We could use the plain express module by itself but I think we should take advantage of the fact that we’re using TypeScript. OvernightJS is a simple library to wrap decorators around Express Router objects so you don’t have to instantiate one for every API that you create. It’s not an abstraction on top of Express nor is it meant to change the way you interact with it. That’s why I like it more than some of these large frameworks like NestJS or typescript-express-decorators.

Install @overnightjs/core, create a server file, and extend the Server class from whatever you name your server class.

npm i -s overnightjs/core

Create a start.ts file

I’m sure you’re ready to see your code in action… but first!! To make running/building our application a little faster let’s create a start.ts file which can kick everything off. Notice the “scripts” key in our package.json file. Each property within “scripts” is like a mini-bash script that we can run with npm run “whatever the key is” . This along with the start.ts file will enable us to run/test/build our code with just a small set of npm run … commands.

Add another file to root/ named start.ts and give it some if-else statements to check whether we’re running for development/production or testing. For the moment, let’s just start the server. We’ll complete this file as we go through different sections.

To avoid having to start and stop Express every time the code changes, let’s use nodemon to restart ts-node whenever there’s a change in a source file. nodemon can import it settings directly from the command-line or from a file: a file is easier so let’s use that. Place the file nodemon.json under util/.

So other developers don’t have to enter a long command each time, let’s add nodemon as a property to package.json’s “scripts”.

The command on line 7 will start ts-node with the settings from tsconfig.json file, and restart the server in development mode every time we run:

npm run start-dev

Go ahead and run the command and you should see the SERVER_START_MSG print out to the console. Make a change to the server file (port or start message) and you should the see the Express server restart and the changes immediately.

Congrats!! You’ve see up a Express/TypeScript development server.