A lot of teams are switching to Typescript because of the many benefits it offers, key ones being static typing and great tooling via IntelliSense. You can catch errors quickly and avoid those nasty runtime errors. Plus its mostly JavaScript since its a superset of it.
Express is the most popular NodeJs frameworks right now with 59k stars on GitHub. Its very minimal so a lot of developers use it to build NodeJs projects . It doesn’t ship with Typescript so you have the option of adding it on top of Express. Some NodeJs projects come with Typescript already integrated. These are NestJs and Adonis. They are pretty powerful so you should try them when you can.
For this article we’ll set up an express and typescript project from scratch. I’ll be using Node version 16 so make sure your node version is up to date and have typescript installed.
Lets start with an empty folder. Create a folder called express-typescript using the command `mkdir express-typescript`
Navigate inside it using `cd express-typescript`
Create a file called app.ts
Generate a Typescript configuration file tsconfig.json using the command tsc –init
This file is very important as it contains the necessary configurations we need for our project to compile and run properly. You can remove the unnecessary options or just leave them commented out. The minimum you can for our project is as below
The most important configurations for us are rootDir and `outDir`
rootDir is where our typescript files will reside. The compiler will look at the folder for files to compile.
outDir is where the typescript compiler will place the compiled typescript files which will be in .js format.
Lets create a folder called src in our root folder and move the app.ts file inside it
`mkdir src `
`mv app.ts src/`
We will need an output file where all our js files will be put. The convention is to use a dist folder. so we’ll use that. We don’t have to create it rather we’ll let typescript create it for us.
Now lets add those folders to our typescript configuration file
Lets test it out and see if it works. Add some code to the app.ts
Now lets test and see if typescript will compile it and output app.js in the dist folder
Run `tsc` from the root folder.
A dist folder is created with the compiled app.js
If you have the above then you are okay.
Now lets initialize our project and add Express js
Initialize using `npm init` and press enter for every question. This will generate a package.json file.
Lets add express `npm install –save express`
and the body-parser library `npm install –save body-parser`
Now lets add our express code to app.ts. I’ll use the hello world example on the express page
Notice the red underlines? Its because Typescript doesn’t understand the express types. Sometimes it happens and what you can do is install the specific type missing. In this case its node type that’s missing. So run `npm install –save-dev @types/node`. The red underline under require should disappear.
While its okay to use commonjs import style, we can take advantage of ESM style to import important packages and Types which will be important for us. So lets change from
// from
const express = require('express');
// to
import express from 'express';
One problem though express now is underlined. It doesn’t have a definition file so Typescript doesn’t understand it and we don’t get auto-completion when we try to use app variable. We can add the type definition file like we did for node.
npm install --save-dev @types/express
Now there are no red lines.
So lets start to use types. Its the reason we switched to typescript.
We can start import the following interfaces for the file 1. Express 2.Request 3. Response
Now we need to run the server and see if it runs
Since we’ll be using our compiled file i.e app.js we can point npm to it in the package.json.
First compile using `tsc`
Then edit package.json and add `”start”: “node dist/app.js”`
Now run `npm start`, open the browser and navigate to http://localhost:3000/
You should see this
Nice! Now lets quickly make some modifications.
Currently we have to run `tsc` then restart our server i.e npm start. That can be tiring if you have to do that all the time. We can install a package called Nodemon. Nodemon restarts our node application whenever there are file changes. That’s good. But what compilation? Typescript compiler has a watcher option. It can watch the typescript files and recompile every time they change. So you can open another tab that points to the root project and run
`tsc -w`. That will recompile every time our files change. And nodemon will notice a change and restart our server.
Another good option is to install an npm package called concurrently that allows us to run multiple commands concurrently i.e you can run tsc -w and nodemon -q dist/app.js
e.g “npm start: concurrently \"tsc -w\" \"nodemon -q dist/app.js\"
For our case we'll just use 2 tabs. One for tsc and the other for nodemon So install nodemon npm install --save-dev nodemon and run npm start
Now lets add a new route and a controller to handle the route
Create a controller folder and a models folder in src and add projects.ts and projects.ts respectively in each
Now when you hit the url http://localhost:3000/projects you should see the following
And that’s it.
There are other express contracts you can use like Router and RequestParamsHandler but that is a whole new topic.