How to implement node express by typescript

Photo by Priscilla Du Preez on Unsplash

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

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.

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.

Photo by Hannah Valentine on Unsplash

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.

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

mkdir tokyodome
cd tokyodome
npm init --yes

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.

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.

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

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

Located in Tawian, loving web development to help any kind of business. Surfing, Beer, Coffee, who could reject them!!??

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store