setting up node express and typescript

Table of Contents

• Introduction
• Initial installing of packages
• Initial Files server.ts
• TypeScript configuration tsconfig.json
• Installing Nodemon
• Making an Express application
  • Making the api routes app.ts
  • Using postman to call the api
• Additional Information
• Conclusion

Introduction

This is a little instruction guide on how to setup a node.js and express application using typescript in 2023. By the end of this post you will have a working node.js express and typescript api. For this setup I will be using Visual Studio Code, and Postman to test the api.

Initial installing of packages

• first make a directory for your project.
• in the command line go to that directory and type and run the code (below).

npm init -y
npm i -D typescript nodemon @types/node
npm i express 
tsc --init

Initial Files server.ts

• create a new file called server.ts at the root directory and inside add some basic code:

console.log("hello")

• update the package.json

"scripts":  {
"test":  "echo \"Error: no test specified\" && exit 1",
"start":"node server.ts",
"build":"tsc"
},

TypeScript configuration tsconfig.json

• inside tsconfig.json change the "module" to "NextNode" & the "outDir" to "./dist"

"module":  "NodeNext",
// few lines later
"outDir":  "./dist",

• run npm run build on the command line. A folder called dist will be created.

• now in the command line run npm run start and "hello" should be logged to the console.

Installing Nodemon

• now install nodemon for automatic restarts to the node application when there are file changes
• add the following script to the package.json

// in the scripts section
"server":  "nodemon server.ts",

• now run npm run server to start the application with nodemon and hello should again be logged to the console!
• now make a new file called app.ts and inside add the following code:

Making an Express application

Making the api routes app.ts

import express from  "express"  
const  app  =  express() 
app.get("/",(req,res)=>{
res.send("/ get")
})
export  {app}

• install @types/express as a dev dependency

npm i -D @types/express

• update server.ts

//server.ts
console.log("hello")
import  {app}  from  "./app"
app.listen(5000,()=>{console.log("server is running on port 5000")})

Using postman to call the api

• now open postman to test the express api. As an example response see below:

/ get

• rerun the command npm run build to update the .js files in the dist folder. (This is the code used for production).

You can update the package.json file "start" script to the following (below) to run the application using the javascript code from the dist folder, from the npm run build,tsc command.

"start":"node dist/server.js"

Additional Information

• note we have not set "type":"module" in the package.json file.
• if an error "Cannot redeclare block-scoped variable name" occurs e.g. if you switch to using commonJs modules, then update the tsconfig.json file as below. You can read about this error here.

//tsconfig.json
"moduleDetection": "force"

Conclusion

• Thats all. Thank you for reading. Now the typescript node application should be working with express and nodemon. Installing ESlint will make adding additional packages and the rest of the coding more easy. Here is a link for a tutorial on setting ESlint up.