Building Node.js Express App Using TypeScript

In this tutorial, you’ll learn how to build a Node.js Express app using TypeScript.

This will be beginner level tutorial where you’ll learn how to set an express app server with a couple of routes in TypeScript.

Source code from this tutorial is available on GitHub.

What You’ll Create

  • A simple express app server in TypeScript.
  • Two routes, one will render a text and the other will render an HTML file

Prerequisites

Getting Started With Node.js App

Let’s start by creating a Node project using Node Package Manager (npm).

    mkdir node-typescript-app
    cd node-typescript-app
    npm init

Install express web application framework.

    # install the express framework
    npm install --save express

Create a file called app.ts inside the project directory. This file will import express from the express node module and create an express app. But it will be using TypeScript.

So, let’s start by creating a new class called App in the app.ts file. The class will have a property called App, a constructor and method called setRoutes. Here is how the index.ts file looks:

    // index.ts file
    
    import * as express from 'express'
    
    class App {
      public app
    
      constructor () {
        this.app = express()
        this.setRoutes();
      }
    
      setRoutes(){
        this.app.get('/', (req, res) => res.send('Welcome to Node.js and TypeScript!'));
      }
    
    }
    
    export default new App().app

As seen in the above code, the constructor method initializes the express application to the app property. After that the setRoutes method is called to set up the express application routes.

Let’s define one more route which will render an HTML file. Add a route inside the setRoutes method in app.ts.

    setRoutes(){
        this.app.get('/', (req, res) => res.send('Welcome to Node.js and TypeScript!'));
        this.app.get('/file', (req, res) => {
            res.sendFile('index.html', { root : __dirname });
        })
      }

Create a file called index.html inside the project directory. Here is how it looks:

        Welcome to Node.js TypeScript HTML

Porting Express App To A Port

Your app is ready, now you need to port your express app to a particular port number.

Create a file called index.ts. Inside index.ts file import the App class from app.ts and port it to a port number.

Here is how index.ts file looks:

    import app from './app'
    
    const port = 3000
    
    app.listen(port, (err) => {
      if (err) {
        return console.log(err)
      }
      return console.log(`server is listening on ${port}`)
    })

Compile .ts Files To .js Files

To compile .ts file to .js file you can make use of tsc compiler. To compile .ts files to .js files on application start, you can configure it in the package.json file.

Add the start and prestart scripts to package.json. Here is how package.json file looks:

    {
      "name": "type-app",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "express": "^4.17.1"
      },
      "devDependencies": {
        "@types/node": "^12.6.8"
      },
      "scripts": {
        "start": "node index.js",
        "prestart": "tsc index.ts"
      },
      "author": "",
      "license": "ISC"
    }

Save the above changes and start the app.

    # start the app
    npm start

You will have the application running at http://localhost:3000.

Wrapping It Up

In this tutorial, you learnt how to build a Node.js Express app using TypeScript. How was your learning experience ?  Do let us know you thoughts in the comments below.

Source code from this tutorial can be found at GitHub.