How to set up TypeScript with Node.js and Express

Setting up a server using JavaScript, Node.js, and TypeScript Express is easy. Nonetheless, as your application grows in complexity or you collaborate with a distributed team of developers worldwide, TypeScript Express becomes a compelling alternative to JavaScript. TypeScript improves code robustness and clarity via static typing, allowing for seamless collaboration and project scalability. Its sophisticated tooling, extensive IDE support, and interoperability make it the best option for a smoother development journey, especially in continually developing projects.

In this post, we will look at a beginner-friendly technique for configuring nodejs TypeScript within a node js express application and learn about the key constraints it includes.

Make sure you comply with the following requirements to get the most out of this tutorial:

Node.js version ≥ v16.0 is installed on your local development environment.
Having access to a package manager like Yarn, pnpm, or npm
Basic familiarity with Node.js express.

We provide 8 easy steps to configure TypeScript in your Express application successfully. Let's jump in and start optimizing your project with TypeScript Express!

No.1 Create the initial folder and package.json

First, create a new directory in your local development environment listed as ts-node-express and navigate into it. Then, we'll use npm's initializer command to create a package.json file with default settings:

mkdir ts-node-express
cd ts-node-express/
npm init -y

When initialising a package.json file in this manner, the --yes or -y flag accepts npm's default settings, skipping the repeated queries about project specifics.

Now, let's edit the main field in the package.json file to point to src/index.js, which will be our application's entry point:

{
  "name": "Your File Name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // Entry Point change it from  js to .ts 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Your package.json file is now configured to use src/index.js as the application's entry point. You may now set up your TypeScript configuration within the src directory.

No.2 Build a simple server by using Express

After initializing the package.json file, let's install the DotEnv and Express packages to the project. You can do this by firing the following command in the terminal:<./p>

npm i express dotenv

The DotEnv package is required to read environment variables from the.env file. Instead of hardcoding environment-specific variables right into the application, we'll store them in this file and manage them with the DotEnv package.

To define the port number for your server, create a file named.env at the root of the project directory. Create an environment variable called PORT inside this file and set its value to 3000. If necessary, you can update this file in the future with additional environment-specific variables:

# Add all of the environmental variables here instead of
# embedding them directly in the app and utilize them
# with the DotEnv package.
PORT=3000

Next, create a src directory to organise our application source files at the project's root. Inside the src directory, add a new file named index.js and populate it with the following code, inputting the previously assigned environmental variable:

// src/index.js
const express = require('express');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
const port = process.env.PORT;
app.get('/', (req, res) => {
res.send('Express + TypeScript Server');
});
app.listen(port, () => {
console.log(`[server]: Server is running at http://localhost:${port}`);
});

The above code sets up a minimal Express server using plain JavaScript. For more detailed explanations, refer to this snippet's documented version.

To launch the server, execute the command node src/index.js in the terminal. This will run the code we added to index.js and should start a new server.

The Node.js Express server is now up and running, providing a foundational setup for development with Express Node.js. Let's improve it by incorporating TypeScript into the next section.

No.3 Install TypeScript and other dependencies

First, let's configure TypeScript as a necessary development tool. We'll also acquire some more pieces called "@types" for Express Node.js. Defining the types of values we use in our code with these "@types" objects makes it easier to identify errors and comprehend the code's behaviour.

These "@types" files, usually ending in .d.ts, act as blueprints for JavaScript values or types. They're particularly useful when working with libraries originally written in JavaScript, not TypeScript.

These TypeScript type definitions are readily available in the DefinitelyTyped GitHub repository. This saves us from having to define everything ourselves. To get the types for a specific library or module, simply look for packages that begin with "@types".

Now, open up your terminal and fire this command:

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

This command instructs npm (the package management) to install TypeScript and the "@types" for Express Node.js, while the "--save-dev" option simply indicates that these packages are being installed as development dependencies.

Once these packages are installed, you'll see a new " devDependencies " section in your package.json file, listing the versions of each package we just installed. It should look something like this:

{
...
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.10.3",
"typescript": "^5.3.2"
},
...
}

And that's it! You're all set up with TypeScript and the necessary type definitions for Express Node.js.

No. 4 Create the tsconfig.json file inside the project folder

Creating a TypeScript configuration file is required for effective management of project settings. This file, tsconfig.json, serves as a blueprint for TypeScript's behaviour, allowing you to adjust compiler parameters to meet the needs of your project.

Typically, the tsconfig.json file is located in the root directory of your project. To create this file, you can run the following command with the TypeScript Compiler:

npx tsc --init

When run, this command will generate the tsconfig.json file in your project's root directory. Opening this file displays a variety of compiler choices, most of which are commented off. Among these settings, the compilerOptions section is critical and must be set. Here's a summary of some default options inside compilerOptions:

target: Specifies the version of JavaScript the compiler will produce.

module: Defines the module system used in the compiled JavaScript, with CommonJS being standard in Node.js.

strict: Controls strict type-checking rules.

esModuleInterop: Allows compiling ES6 modules into CommonJS modules.

skipLibCheck: Optionally skips type-checking for default library declaration files.

forceConsistentCasingInFileNames: Enforces consistent file naming conventions.

One vital activation option is outDir, which determines the output directory for compiled files. Uncomment this option in tsconfig.json and set its value to "dist" to designate a destination folder:

{
"compilerOptions": {
...
"outDir": "./dist"
...
}
}

By default, this option refers to the project's root directory. Changing it to "dist" guarantees that compiled files are saved there.

While there are many other configuration options for the TypeScript compiler, the ones listed above are a good place to start.

Finally, be careful to edit your package's "main" field.json file to point to the compiled file in the "dist" directory, often "dist/index.js", reflecting the path taken by TypeScript code from the "src" directory to the "dist" directory.

No. 5 Generate an Express server with a .ts extension

To begin, rename our primary file "index.js" to "index.ts" under the "src" directory. The ".ts" extension indicates that this file contains TypeScript code, which will be compiled into JavaScript when we build our application.

After renaming the file, open "index.ts" and apply the changes below to ensure TypeScript compatibility:

// src/index.ts
import express, { Express, Request, Response } from "express";
import dotenv from "dotenv";
dotenv.config();
const app: Express = express();
const port = process.env.PORT || 3000;
app.get("/", (req: Request, res: Response) => {
res.send("Express + TypeScript Server");
});
app.listen(port, () => {
console.log(`[server]: Server is running at http://localhost:${port}`);
});

These modifications primarily involve adding TypeScript types to variables and parameters. The code functionality remains unchanged. For a detailed explanation of the modifications, refer to the documented code version.

However, running "index.ts" directly with Node, as we did with "index.js," will result in an error. This is because Node does not have built-in capability for executing TypeScript files. In the following part, we'll look at how to run TypeScript files in the terminal using a Node package.

No. 6 Use ts-node to run typescript in node

As previously discussed, directly executing a TypeScript file in Node is not supported out of the box. However, we may overcome this constraint by utilising ts-node, a TypeScript execution environment for Node.js. We can start by using ts-node with npx, without needing to install it as a dependency, and observe the output:

npx ts-node src/index.ts

When we run this command, we'll see that our index.ts file runs successfully, and the server starts up as intended. The fundamental benefit of ts-node is that it eliminates the requirement for an additional step of code transpilation, allowing us to work directly with TypeScript code in a Node.js environment. This is particularly useful when working with standalone TypeScript files in the Node terminal.

No. 7 Watching file changes

To improve the development workflow for our Node.js projects, I frequently use nodemon, a helpful software that restarts a Node-based application whenever it detects changes in defined directories.

We'll also include ts-node as a development dependency to improve everything even more. This configuration helps ensure that Nodemon seamlessly integrates with ts-node, making the development process even easier. Here's the command to install these dev dependencies:

npm install --save-dev nodemon ts-node

After installing these dependencies, let's update the scripts section in the package.json file as follows:

{
"scripts": {
"build": "npx tsc",
"start": "node dist/index.js",
"dev": "nodemon src/index.ts"
}
}

In the script modifications above:

The "build" command compiles our TypeScript code into JavaScript and saves it in the "dist" directory using the TypeScript Compiler (tsc).

The "start" command runs the server using the compiled JavaScript file.

The "dev" command initiates the development server with nodemon watching changes in our TypeScript files.

To start the development server, simply run:

npm run dev

This command will launch the Express server in development mode, automatically restarting whenever changes are detected by nodemon.

If you want to fine-tune the nodemon configuration, you can create a nodemon.json file in the project root. This file allows you to specify directories and file extensions to watch, as well as define custom commands for nodemon to execute. Here's an example configuration:

{
   "watch": ["src"],
   "ext": "ts",
   "ignore": ["src/**/*.spec.ts"],
   "exec": "ts-node ./src/index.ts"    
 }

This configuration snippet appears to be for a TypeScript project that will be executed via a tool such as ts-node. It specifies that the project should monitor the'src' directory for changes while excluding test files ending in '.spec.ts'. When changes occur, it automatically executes the TypeScript files in the 'src' directory using ts-node. Also, you can stop the execution of any folder automatically by adding it to the "ignore": ["src/**/*.spec.ts"].

No. 8 Creating or compiling TypeScript files

In a TypeScript project, transpiling or building involves the TypeScript Compiler (TSC) interpreting the configuration outlined in the tsconfig.json file to determine how to convert TypeScript files into valid JavaScript.

To compile the code, you must run the command npm run build. When you execute this command for the first time, a new directory called "dist" is created in the project root.

Inside the "dist" directory, you'll find the compiled versions of our TypeScript files in the form of valid JavaScript. This compiled JavaScript is what's used in the production environment:

'use strict';
var __importDefault =
  (this && this.__importDefault) ||
  function (mod) {
    return mod && mod.'__esModule' ? mod : { default: mod };
  };
Object.defineProperty(exports, '__esModule', { value: true });
const express_1 = __importDefault(require('express'));
const dotenv_1 = __importDefault(require('dotenv'));
dotenv_1.default.config();
const app = (0, express_1.default)();
const port = process.env.PORT;
app.get('/', (req, res) => {
  res.send('Express + TypeScript Server is running.');
});
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

If you've designated another directory as the value for the outDir field in the tsconfig.json file, that specified directory would be reflected here instead of "dist".

Setting up TypeScript for reliability with strict type checking and configurations that suit your project's needs is essential to further enhance this process. Utilize the tsconfig.json file to specify your project's most suitable production settings.

Improving performance can be achieved through code splitting using tools like Webpack for efficiency and shrinking file sizes with tools like Terser.

As your project expands, ensure code stability through automated testing using tools like Jest and streamline the workflow from development to production with CI/CD pipelines. These practices help maintain code quality and facilitate efficient project management.

Final Words

Use TypeScript to integrate Express into your node. JS and Express-backed projects offer many benefits and code flexibility. However, there are some learning curves for TypeScript Express, which you can still manage with additional awareness. Using TypeScript in Node. JS and Express backend projects require careful analysis based on the specific project requirements.

Elightwalk Technology Solutions provides the best solutions to organizations' growing projects with upgraded technologies. Contact us to Hire our Node.js developers for your future project. Our experts will always contact you to provide ongoing support and guidance throughout development.

Table of contents

Jayram Prajapati

Full Stack Developer

Jayram Prajapati brings expertise and innovation to every project he takes on. His collaborative communication style, coupled with a receptiveness to new ideas, consistently leads to successful project outcomes.

Most Visited Blog

Blog

How to Perform Simple CRUD with PHP and MySQL

Learn the fundamentals of using PHP and MySQL for CRUD operations. From single query execution to prepared statements, this guide will teach you everything you need to know to build dynamic web applications that interact with your database seamlessly. Whether you're a beginner or an experienced programmer, learn the fundamentals of developing dynamic web applications and efficiently manipulating database data.

Blog

How to get cart discount amount in minicart in Magento 2

Improve your Magento 2 shop by learning how to quickly obtain the cart discount amount within the minicart. Discover how to improve your user experience with visible and dynamic discount information.

Blog

4 Easy Ways to Check If an Array Is Empty in PHP

We explore the typical checking situation to see if a PHP array is empty. We provide clear explanations and examples for each approach. Whether you're a beginner or a seasoned developer, these techniques will equip you to handle empty arrays in your PHP codebase effectively.