How to implement node express by typescript

3 min readFeb 20, 2021

Amazing this is the my first publish in my plan to have articles for node express in series. Now I’m gonna to start a node express project from scratch

What is node express

Node express is a web framework for nodejs. As a Frontend engineer, I believe you are quite familiar with javascript and nodejs runs V8 JavaScript engine. This means by node express, you can construct a backend service by javascript without another programming language despite it’s good to learn as more programming languages as possible. For other famous advantages of node express, I don’t want to specify more here.

What is typescript

Javascript is a smart programming language for frontend development. However, javascript is loosely typed. When you runs a team, it’s not so easy for everyone to easily catch up all the definition of certain function.

TypeScript extends JavaScript by adding types. Besides, it provide lots of good syntactic sugars to simplify the usage of certain expression of Javascript.

node express + typescript

So as a Frontend engineer, I would like to construct a backend service, and have a crew to implement and manage it, it will be quick and scalable to adopt the solution by node express plus typescript.

Init the project

Ok, here we go, let’s create a project folder and init the project by npm

mkdir tokyodome
cd tokyodome
npm init --yes

Make nodejs be able to excute typescript

Basically nodejs cannot tell typescript. In order to make nodejs be able to excute typescript, ts-node is required

npm install --save-dev typescript
npm install --save-dev ts-node

Then have the tsconfig.json with the basics typescript configurations under your project folder

In the tsconfig.json, esModuleInterop and module of ts-node are critical especially. Ts-node-dev handle the app correctly with the setup of these two properties.

Have the express service with a good development environment

It’s time to install node express

npm install --save-dev express

Besides, in order to efficiently implement our backend service, ts-node-dev restarts target node process when any of required files changes

npm install --save-dev ts-node-dev

Ok, packages are all ready now. We can start to utilize express to have our first backend service. Create folders and files for the express app

/tokyodome
  /src
    /express
      index.ts

After this the content of the project should be as the following

/tokyodome
  /src
    /express
      index.ts
  package.json
  tsconfig.josn

And the content of src/express/index.ts will be

Ok, all ingredients are ready, let’s start the backend service.

Start the service

To start the service, add a new script express:dev in package.json

Ok, here we go!!!

npm run express:devtokyodom@1.0.0 express:dev /Users/shengyuliang/Desktop/project/tokyodom
> ts-node-dev ./src/express/index.ts[INFO] 14:13:04 ts-node-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.5)
Example app listening at http://localhost:3000

By the console you can find that the app is started correctly and host on http://localhost:3000, let’s open it up by browser

Conclusion

In this article, we implement a simple web service by node express plus typescript to response Hello World. Also, ts-node-dev provides a good development experience. In another article, I’ll specify how to have a production build for the service.

Wish you like my article and have a good day