Setup TypeScript

During development, we can run our TypeScript code directly from the .ts files that we create. For production though, we should transpile them to JavaScript so our server can be run directly from NodeJS. To configure how our TypeScript is transpiled and to set rules for the styling our code, we need to create the tsconfig.json and a tslint.json files respectively. Using tslint is not required but is extremely handy for enforcing coding standards and will lead to much cleaner code in the long run.

Create a new folder for your project and at the root add tsconfig.json with the following content:

Notice the exclude option on line 23 which shows /src/public/ . We’re not going to cover the front-end for this tutorial, but once you do get around to adding some front-end content, it should go there.

tsconfig.json

Now add the following code for the tslint.json file. I tend to use the recommended settings with a few tweaks. Feel free to play around with these settings if you want.

tslint.json

To allow us to execute some code, let’s create a start script which will boot up our server. Since we don’t have a server yet, just have it print out "hello world" for now. Create the folder and file src/start.ts and add the following 2 lines:

tslint is disabled because it pushes us not to use console.log() and it’s not good to leave it in production code.

// tslint:disable-next-line

console.log('hello world');

We don’t want to have to restart everything manually when we make a code change, so let’s use nodemon to watch for changes in our files and re-execute our start script.

Great! We got everything we need to start developing in TypeScript, we just need to install dependencies. Run npm init if you haven’t done so yet to your project in an npm package, then install the following npm libraries:

npm i -D ts-node nodemon typescript tslint

So we can start things with ease without having to enter a bunch of long commands in the console each time we want to start developing, let’s add a script to package.json to run the start script through nodemon with ts-node .

See line 8 below:

Run npm run start-dev and you should see hello world output to the console.

Setup Express

Now that TypeScript is all setup and running well, let’s create a simple ExpressJS webserver and few routes. We could use ExpressJS directly but then we wouldn’t take advantage of TypeScript. It would be nice to create classes with methods instead of having to type let router = express.Router(), router.get/put/post, app.use(router) and all that over and over again.

To stay closer to the MVC pattern and utilize OO style programming, I recommend OvernightJS to add controllers and route decorators to Express. Yeah I know what you’re going to say, “Aren’t there frameworks out there like NestJS and ts-express-decorators which can decorate Express routes?” Yes, that’s true, but these are all massive frameworks with entire websites dedicated to their documentation. Overnight is just a simple, small collection of libraries for adding decorators to Express and a couple other things. It’s not an abstraction layer on top of Express, and you can learn it in about 10 minutes if you’re already familiar with Express.

Let’s install Express and Overnight and spin-up a web-server:

The body-parser package is so we can send our data as JSON.

npm i -s express body-parser @overnightjs/core @overnightjs/logger

npm i -D @types/node @types/express

Under src/ , create a file for the server (mine is ExampleServer.ts ) and create a class of the same name. Then add another folder/file controllers/ExampleController.ts . We’ll implement the controller first then import it into our server file.

Add the following content to the controller file:

Notice we created a method for every route just to see each one in action. The Logger class is handy because it can be configured to print to a file, the console, turned-off completely, or something custom depending on your server environment.

When you’re done with the controller, make sure to add an index.ts file to controllers/ , with the line export * from ‘./ExampleController’; so that any new controller files created in the future can be easily added with just an extra line of code.

In the server, import the controllers and the extend the class with Overnight’s Server export. By extending Server , you will have access to the Express instance with this.app , which you can interact with just like any normal Express instance made with require(‘express’)() .

Controllers must be instantiated and added as an array to super.addControllers(…) to activate your routes. Make sure to add your controllers after setting the middleware but before starting the server.

Now that we have our server and controllers, we just need to boot everything from the start script. Import the server, instantiate it, and call start(portNumber) .