Convert Express-Generator App To Typescript

#javascript #typescript #express #node

Hi guys,

In this article, I'll be showing you how to convert an express-generator app to Typescript. It's pretty straightforward and we should be done in a flash.

This is my first ever write-up 😩, I do hope you find a place in your heart to pardon any errors.😁 😁

I started learning Typescript recently, and honestly, my life has been a lot easier ever since. I’ll be sharing my knowledge with you all once in a while.

Enough said, let's jump right in and start coding, shall we? 😎

From an Express-Generator App to Typescript

Let’s head to the terminal.

First, you need to navigate to the directory where you'd like to create your express app, type in npx express-generator, and hit the enter button.

You should see a structure like this automatically generated for you



├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── Javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

Next, run yarn in your terminal to install all dependencies for this project. If everything goes fine, run yarn start.

Your express server should be up and running, cool. 😎

Now, it's time for typescript, but before you start writing typescript codes, you’ll need to install typescript and all the type definitions for the project dependencies.

So, just head to your terminal and type the command below;

yarn add --dev typescript @types/cookie-parser @types/http-errors @types/morgan @types/node ts-node.

Next, you’ll be creating a configuration file for typescript. Thus, run yarn tsc --init; this will create a tsconfig file.

You can then navigate to your root directory and create an src folder. Move the routes folder and app.js into the newly created src folder.

Your new folder structure should look like this;



├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── Javascripts
│   └── stylesheets
│       └── style.css
├── src
│   ├── app.js
│   ├── routes
│     ├── index.js
│     └── users.js
├── tsconfig.json
├── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

Let's do some configuration in your "tsconfig.json" file.

Here, we want to give typescript some instructions on what to do with the typescript files. So, open the tsconfig file and change the target value to "ES2020"; uncomment the outDir field, change its value to "dist". Do that for rootDir as well and change its value to "src".

Lest I forget, you also need to add an include field after "compilerOptions", its value should be an array with a string in it like this;"include": ["src/"].



 {
    "compilerOptions": {
       ....
    },
   "include": ["src/"]
}

You can also check out this article to help with that: tsconfig.json

Alright, I believe we are done with the configurations, so, let's start coding.

Step 1: Head to the src folder and rename all .js files to .ts and open the "app.ts" file. Change all the commonjs "require" imports to ES modules "import" like so import express from 'express'.

Once done, you’ll need to add the types to the parameters on the error handler function, since you have installed the type definitions. You can import them from their libraries.

You'll need to import Request, Response, and NextFunction from express and HttpError from http-errors as named imports.

Make sure you change the export statement at the bottom to ES modules export default. Hmm, yeah one more thing, don’t forget to change all "vars" to "const".

Your app.ts should look like so;

We’re all done with the "app.ts", let's now convert the files in the routes directory.

Step 2: Open the "index.ts" file in the routes directory. You will be doing the same thing you did in the "app.ts".

So, import the types for the request, response, and next parameter and change the export statement at the bottom to ES modules "export default".

Do the same for the "users.ts" file. It should look like this;

Nice work, you are almost done.

If you head to the bin folder and open the www file, you will notice you are requiring "app.js" which has now been changed to a typescript file. The server will crash if you try to run it this way.

You need to require the compiled app.js file in the dist folder. Before you do that, run tsc in your terminal to transpile our typescript code into javascript. This will create the "dist" folder. Remember where you set it in the tsconfig? Cool!

Now, you have the dist folder. You can change the directory to "../dist/app" and chain a .default method to it like so;

At this point, you might encounter an error about the views engine when you run your localhost:3000 on the browser, you can easily fix that by adding a '../" to your view engine setup in app.ts like this;