How to Setup a NodeJS App with Express And TypeScript

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command-line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web application development around a single programming language, rather than different languages for server-side and client-side scripts.

More information you can find on https://nodejs.org/en/docs/

Express.js is a back-end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

More information you can find on https://expressjs.com/

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. It is designed for the development of large applications and transpiles to JavaScript.

More information you can find on https://www.typescriptlang.org/docs/

Project Structure

node-express-typescript/
--build/
  --app.js
--src/
  --api.ts
--package.json
--tsconfig.json

Step 1: Let’s start from the very beginning and create a node-express-typescript folder

Step 2: Open a terminal and run npm init at the root of that folder. And fill in all fields or just press enter and skip all.

As a result, you should see a package.json file created at the root of your project.

{
  "name": "node-express-typescript",
  "version": "1.0.0",
  "description": "How to Setup a Node Express with TypeScript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Step 3: Now let’s install express npm i express and install as dev dependencies npm i -D typescript @types/node @types/express

Now your package.json should look like this

{
  "name": "node-express-typescript",
  "version": "1.0.0",
  "description": "How to Setup a Node Express with TypeScript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.0.0",
    "typescript": "^4.7.4"
  }
}

Step 4: For initializing a tsconfig.json file run npx tsc --init

As a result, you should see a tsconfig.json file generated at the root of your project.

Then open it and adjust 2 options

"outDir": "./build",    /* Specify an output folder for all emitted files. */
"rootDir": "./src",     /* Specify the root folder within your source files. */

Step 5: Create a src folder and create a file called app.ts in the folder

import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 3001;

app.use('/', (req: Request, res: Response): void => {
    res.send('Hello world!');
});

app.listen(PORT, (): void => {
    console.log('SERVER IS UP ON PORT:', PORT);
});

Step 6: To build a project run npx tsc command at the root of your project

As a result, you should see the build folder with the app.js file compiled in your project.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = (0, express_1.default)();
const PORT = 3001;
app.use('/', (req, res) => {
    res.send('Hello world!');
});
app.listen(PORT, () => {
    console.log('SERVER IS UP ON PORT:', PORT);
});

Step 7: Let’s test it, add to your package.json file a new script and run npm start

  "scripts": {
    "start": "node ./build/app.js"
  }

As a result, you should see on your terminal

node-express-typescript yuraabharian$ npm start

> [email protected] start
> node ./build/app.js

SERVER IS UP ON PORT: 3001

Step 8: Run http:localhost:3001 in your browser

A small suggestion on how we can make this process a little faster just by updating our start script, so you can build your application and run it immediately

  "scripts": {
    "start": "npx tsc && node ./build/app.js"
  }

Note: You can find my sample code on my Github

I hope this article was helpful for you, if you have any questions, you can contact me via email or LinkedIn or in the comments.