Creating a new Express project with Typescript

This tutorial is written with the assumption you know the following:

• NodeJS
• Express
• Typescript
• NPM
• Writing bash commands

And you have the following installed:

• Node (NPM is installed alongside)
• Code Editor

Setting up project folder

From your terminal, go to where you want to create a project using cd <path> command. For example, the project will be created in the tutorials folder:

Run the cmd mkdir <folder name>. For this example: mkdir SampleTSExpressProject

Then, go into the folder with cd SampleTSExpressProject

Initialising folder

Prepare the folder for nodejs application development by running npm init

This is a guided setup process. Follow through it. Once completed, you are ready to move to the next step.

If you prefer to go with the default settings and overwrite the package.json, then run npm init -y.

Adding the necessary dependencies

Since we are going to create a backend application using Express and Typescript, we will need to add the relevant dependencies/libraries into the project.

Typescript

First, let’s add Typescript to the project. We can do that by running the following command while in the project folder via the terminal:

npm i typescript

Some tutorials may recommend you to run the following instead:

npm i -g typescript

The latter will installed typescript globally on your machine so that all other NodeJS project will be able to access the same typescript library.

In some cases, you might want to run different of Typescript for different project. Therefore, the former command will only ensure Typescript is installed for that command.

Using Visual Studio Code, we will see the latest version of Typescript added to the package.json and node_modules folder is created.

ExpressJS

The next library to add to the project is ExpressJS.

Run the following command while in the project folder via the terminal:

npm i express

From Visual Studio Code, package.json is up updated as well.

Adding Type Definitions

The TypeScript type definitions for use in Node.js and other Javascript project are maintained at DefinitelyTyped so that we don’t need to implement them ourselves.

Run the following command:

npm i -D @types/express @types/node

Once the command runs successfully, the package.json will be updated.

Specifying Typescript Configuration

Typescript is not executed directly. It is first transpiled into Javascript before it is executed. The transpiler will use the configurations specified in the typescript configuration file tsconfig.json to decide how to translate Typescript into Javascript.

The file can be created manually in the project’s root directory.

Or, you can create it via the terminal. If you installed typescript globally with the “-g”, you can run with the following command:

tsc --init

But, if you have installed typescript locally, you can run the command below using npx:

npx tsc --init

Either command will create the config file with default options in whichever directory you are currently in.

Here is an example of the default tsconfig.json file

You can make further changes to the file based on the requirement of the project. For more information on the available options for configuration, please refer to the official typescript documentation here.

For now, we can get rid of a vast majority of the options with the exception of: outDir, rootDir

Here is how the file should look like:

Start Coding

Now you are ready to start developing your typescript application. To begin, create a src folder to put the application source in it.

Then, create a file server.ts in src.

In the file, write the following code in.

import express, {Express, Request, Response} from 'express';

const app: Express = express();
const port = 3000;

app.get('/', (req: Request, res: Response)=>{
    res.send('Hello, this is Express + TypeScript');
});

app.listen(port, ()=> {
console.log(`[Server]: I am running at https://localhost:${port}`);
});

Update package.json

Now, we can update the package.json to include the build and start command.

Add the following options

• "build": "npx tsc"
• "start": "node dist/server.js"

to package.json like so:

Running the application

Now, we are ready to run the application. First, we need to transpile the application and get the server.ts translated into server.js in the /dist folder.

Run the following command in the terminal while you are in the project’s root directory/folder to transpile the codes:

npm run build

The transpilation process will now start and complete as shown below

After the transpilation is done, the project folder structure should now be updated to include a new file server.js in the dist folder.

While in the terminal, run the following command to start the application:

npm run start

Once the server is up and running, you can go to your browser and access the url: http://localhost:3000

What’s next?

Now you are ready to proceed to the next stage of your development journey. What we have covered here requires you to run the build process every time you make a change to the file. To improve your workflow, you can install nodemon and Concurrently packages.

nodemon will restart the Node.js application when file changes are detected. This is useful if the server.js are changed as a result of another transpilation.

Concurrently allow us to run multiple commands. One good use case would be to run the build process and then, have nodemon restart the application.