Another ExpressJS API tutorial for 2021, part 02 — going to Typescript

Starting an API ExpressJS project using Typescript

Hi again! Hope that you are here because of our part 01 tour. If you are not following from the top, please make sure to understand that this is our second article about how to built an API using ExpressJS. If you are completely lost, please go back to our part 01 article.

At mine last article, I’ve explained how the articles will work and combine each other and showed how to start a basic skeleton of the API using ExpressJS and pure Javascript.

Today we are going to change the code to work with Typescript.

Here is the series of articles that we are writing:

• Create your hello world ExpressJS API (Yes… we always need to start with a hello world)
• Configure our hello world application to use Typescript (TS is cool, believe me ;) ) We are here now ;)
• Create our first CRUD API endpoints for an user (Everyone wants a registered user in their applications, no?)
• Create and configure your controllers (We will talk about it after)
• Create and configure your services (What the h. is that?)
• Middleware’s! (Yes, we need and use it everyday)
• End to end testings!
• Configuring a secure way to manage user permissions via API
• Putting all together into a Docker container
• Configuring a simple MongoDB to connect to our application
• Configuring permission level to the application
• Add logs with Winston!

So… let’s go! Please remember that the git repository is here,

Today we are focusing on the second section, when we will configure our application to be able to code using Typescript. You can have the final solution of our app in this branch link.

If you prefer to be coding meanwhile reading the article, please use this branch link from the previous article.

Ok, we are finally ready (thank god!)

At our root project fold, let’s create a file tsconfig.json and paste the following code;

{
 "compilerOptions": {
  "target": "es2016",
  "module": "commonjs",
  "outDir": "./dist",
  "strict": true,
  "esModuleInterop": true,
  "inlineSourceMap": true
 }
}

We will need to add some development dependencies to our package.json as well. If you will be using a nice IDE for working like WebStorm, that I highly recommend, then you will have a lot of auto-complete benefits meanwhile coding.

"devDependencies": {
   "@types/express": "^4.17.2",
   "source-map-support": "^0.5.16",
   "tslint": "^6.0.0",
   "typescript": "^3.7.5"
  }

At your terminal, you can use the following npm i --save-dev @types/express source-map-support tslint typescript .

I’ve pasted my current package.json with the versions to try to avoid version conflict for the future.

Now we are ready to change the previous code! Let’s create a file called app.ts inside our app folder with the following:

import express from 'express';
import * as http from 'http';
const app: express.Application = express();
const server: http.Server = http.createServer(app);
const port = 3000;
app.get('/', (req: express.Request, res: express.Response) => {
    res.status(200).send(`Server running at port ${port}`)
});
server.listen(port, () => {
    console.log(`Server running at port ${port}`)
});

For the ones who were following the previous article, we had an index.js but now we want to use a Typescript to code. We are basically changing the syntax to use the best of Typescript to have a better code maintenance in the future.

Ok, perfect, but how should I execute my code now?

Typescript need to be “compiled” in a final Javascript file. To do it easily, we should update our scripts at the package.json file like the following:

"scripts": {
    "tsc": "tsc",
    "start" : "npm run tsc && node ./dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

the tsc script will be a script that just compile the typescript files into Javascript. The start script will run tsc script and after run our javascript file that will be build at the dist folder. Don’t mind about the test script, it was auto-generated when you ran npm init (if you had followed our first article).

Our final package.json will be more-less like this:

{
 "name": "expressjs-api-tutorial",
 "version": "0.0.1",
 "description": "Tutorial of how to create a REST API using ExpressJS",
 "main": "dist/app.js",
 "scripts": {
  "tsc": "tsc",
  "start": "npm run tsc && node ./dist/app.js",
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/makinhs/expressjs-api-tutorial.git"
 },
 "keywords": [
  "REST",
  "API",
  "ExpressJS",
  "NodeJS"
 ],
 "author": "Marcos Silva",
 "license": "ISC",
 "bugs": {
  "url": "https://github.com/makinhs/expressjs-api-tutorial/issues"
 },
 "homepage": "https://github.com/makinhs/expressjs-api-tutorial#readme",
 "dependencies": {
  "express": "^4.17.1"
 },
 "devDependencies": {
  "@types/express": "^4.17.2",
  "source-map-support": "^0.5.16",
  "tslint": "^6.0.0",
  "typescript": "^3.7.5"
 }
}

Now you can run at your terminal npm run start and see the magic happening ;)

Open your browser and try to access localhost:3000 to get a message of server running and we are all good.

That’s all for this article. At the next article we will start to create our first CRUD endpoint and things will finally start to make more sense.

If you have any doubts, feel yourself free to add a comment and I will try to reply as soon as possible.

Have a nice coding!

Thanks for reading and see you at the next article!

Another ExpressJS API tutorial for 2020, part 03— Managing your user endpoints

tips:

• Learn basic ECMAScript here;
• Read ExpressJS documentation;
• Book suggestion: Design Patterns (it’s a must read for our field)
• Brazilian? PT-BR Book suggestion: Design Patterns
• The full project is already done here