In this article you will explain how to start a project with express using Typescript in an easy way.

What is Express

Express is a fast framework and one of the most used together with Node.js, helping the development of back-end applications and even, together with template systems, full-stack applications. Written in JavaScript.

Very popular both in large companies and in the community, Express makes it easy to create applications using Node together with JavaScript, making this ecosystem even more powerful.

Creating the project

Starting a project with NodeJS

To start let’s create a directory and then start the project:

mkdir express-typescript && cd express-typescript

npm init -y
# or:
yarn init -y

Notice that we now have a package.json in the directory, where all your project settings and dependencies are located, now it should look something like this:

{
  "name": "express-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Installing dependencies

To run our project you will need some dependencies, for that we will install them with:

npm install express && npm install --save-dev @types/express typescript
# or:
yarn add express && yarn add -D @types/express typescript

With these commands we install the express that will be our server along with the type definitions to use with TypeScript.

Started the typescript

To start the typescript just type:

tsc --init
# or if you used yarn:
yarn tsc --init

This command created a configuration file called tsconfig.json.

Before creating any file, let’s create two folders in the project root, dist where our project will be compiled in javascript and src where our code will be in Typescript.

Project folders

inside the src folder create server.ts file and paste the code below:

import express from "express";
import { Router, Request, Response } from "express";

const app = express();
const route = Router();
const PORT = 3333;

app.use(express.json());

route.get("/", (request: Request, response: Response) => {
  response.json({ message: "hello world with Typescript" });
});

app.use(route);

app.listen(PORT, () => `Server running on port ${PORT}!`);

TypeScript is a superset for JavaScript, at first it may seem more difficult but it helps us to make fewer mistakes.

Editing tsconfig.json

Assign the Dist folder to outDir and the src folder to rootDir, for that edit the tsconfig.json file present in the project root.

{
  "outDir": "./dist",
  "rootDir": "./src"
}

We can now run the project with:

npx tsc
#or
yarn tsc

The javascript code will be generated in the dist folder.

tsc

This means that we already have Typescript configured.

Running the application

To run the application while we are developing we are going to install a new dependency that will listen for our changes and automatically restart, just install:

npm install --save-dev ts-node-dev
#or
yarn add -D ts-node-dev

This package will listen for changes to the Typescript files and restart the service automatically.

Once installed, go to our package.json and add these properties.


"scripts": {
  "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts",
  "build": "tsc"
},

the dev script will listen for the changes we make to the code and automatically restart if necessary, we also set it to ignore the node_modules folder, we don’t want it to listen to it.

The build script generates our TypeScript application for JavaScript in the dist directory.

Now just run:

npm run dev
#or
yarn dev

Open your browser and go to http://localhost:3333 and see your project running.

ExpressJS running

In the next article I will create the routes and configure a database.