How to work with TypeScript in a Node.js Project with Express

TypeScript has been catching up the heat since its innovation as is often seen as a subset of JavaScript. If you have the basic knowledge of TypeScript, Node.js and Express, then this blog is highly recommended to get an in-depth knowledge on how to use it. 

This project can also be used as a boilerplate for Node.js Typescript and Express projects. Read this article to understand TypeScript in a Node.js project with express.

What is TypeScript?

TypeScript is an open-source language developed by Microsoft which is built on JavaScript, one of the world’s most used tools, by adding static type definitions. It’s listed as one of the five most promising languages in 2020. 

Basically, TypeScript is a superset of JavaScript that can do what JavaScript can do along with certain additional capabilities.

However, users generally struggle with using TypeScript in node.js and this is where the article takes a lead to simplify the process for you. Refer to the steps mentioned below to know how to use TypeScript in a node.js project with express-

1. Setting up our project

The first step involves creating a directory for the project and then working with it. Run the following commands or create a folder directly on your device to create a directory called ts-nodejs , and then change to the current directory that we have created:

mkdir ts-nodejs
cd ts-nodejs

From the ts-nodejs directory, we can initialize our Node.js project. To do so, use the following command in your terminal window:

npm init -y

2. Add the required dependencies

Now, TypeScript and the Express framework will be needed. Run the following commands to add them-

npm install express
npm install typescript ts-node @types/node @types/express --save-dev

TypeScript-related dependencies are installed as ‘devDependencies’ in the project folder. This happens because the TypeScript code that we have written eventually gets compiled into ‘vanilla javascript’. TypeScript is not exactly required for runtime thus it is only used during development. 

Furthermore, ‘package.json’ should appear as following after completing the dependency installations of Node Modules:

3. Configuring TypeScript as per our requirement:

Next step involves configuring TypeScript in a manner so that it can be managed directly. We need to create a file by the name of tsconfig.json, so that  a directory for the root of a TypeScript project can be created. We can use the command given below for the same:

npx tsc --init

If we run the command given above the tsconfig.json file will be created. We can alter the TypeScript configuration from here.

• target: we can specify which ECMAScript version we want to use in our project using this option.
• module: we can specify which module manager has to be used in the generated JavaScript code using this option.
• outDir: using this option, we can specify where we can output the JavaScript code.
• rootDir: This option specifies where the TypeScript files are located in the directory.
• strict: It is enabled by default and this toggles strict type-checking options.

4. Create an Express server

After completing TypeScript code configuration, you can move to create Express Web Server. First create index.ts file with the code given below:

import express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!!');
})

app.listen(3200, () => {
    console.log('The application is listening on port 3200!');
})

It creates a web server that shows “Hello World!!” after running the project with localhost:3200 in any browser.

Whenever we make some changes in our code and then we want to run the application, we will need to compile TypeScript to JavaScript. To do that, we can :

npx tsc --project ./

The command ‘tsc’ compiles the TypeScript to JavaScript. The flag ‘–project’ specifies where to pick up the stored TypeScript files and “./” tells about the root of the project.

Now if we access the build folder in the ts-nodejs directory, we can see the compiled JavaScript code. 

5. Accessing the Created scripts

It can be a typical task to manually write npx tsc –project ./ every time we need to compile the code. To automate the process, add a script to package.json 

Achieve this by modifying the line of codes in package.json under scripts:

"build": "tsc --project ./"

Now you can run:

npm run build 

to compile the code. 

To run the project use

node index.js

Wrapping up

Hope this article has provided you with clarity on TypeScript Tutorial. But if you still find any phase challenging, we suggest you Hire the Best TypeScript Development Company in the market.