How to Set Up TypeScript in an Express App

A tsconfig.json file provides a series of compiler files that are important when using TypeScript in an Express app. It’s a critical step when setting up TypeScript in an Express app. 

In this article, we’ll cover the best way to set up TypeScript in an Express app, understanding the basic constraints that come with it. Here’s what we’ll cover:

• How to create a package.json file.
• Installing TypeScript and other dependencies.
• Generating tsconfig.json.
• Create an Express server with a .ts extension.
• Watching file changes and build directory.

6 Steps to Set Up TypeScript in Express

1. Create the Initial folder and Package.json File

mkdir node-express-typescript
cd node-express-typescript
npm init --yes

After initializing a package.json file, the newly created file might look something like the following code:

{
  "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"
}

More on Software EngineeringHow to Auto Import Vue Components in JavaScript

2. Install TypeScript and Other Dependencies

npm install express mongoose cors mongodb dotenv

npm install  -D typescript ts-node-dev @types/express @types/cors

3. Generate the tsconfig.json File

npx tsc --init

The command above will generate a new file called tsconfig.json with the following default compiler options:

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

After opening the tsconfig.json file, you’ll see a lot of other compiler options that are commented out. In tsconfig.json, compilerOptions is a mandatory field that needs to be specified

Set the rootDir and outDir as src and dist folder.

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

    // other options remain same
  }
}

4. Create an Express Server With a .ts Extension

Create a file name index.ts and open it:

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

//For env File 
dotenv.config();

const app: Application = express();
const port = process.env.PORT || 8000;

app.get('/', (req: Request, res: Response) => {
  res.send('Welcome to Express & TypeScript Server');
});

app.listen(port, () => {
  console.log(`Server is Fire at https://localhost:${port}`);
});

5. Update the Scripts and Build Directory

npm install  nodemon

After installing these developer dependencies, update the scripts in the package.json file:

{

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

More on Software DevelopmentHow to Configure a Custom Zsh Alias

6. Run the Code

npm run dev 

If everything is perfect, you will see the message in the console of Server is Fire at https://localhost:8000.

Frequently Asked Questions