Setting Up Node.js and Express with TypeScript

Creating a Node.js project with Express and TypeScript allows you to take advantage of TypeScript’s type-checking and modern JavaScript features. This guide will walk you through the process step-by-step.

Step 1: Initialize Your Project

First, create a new directory for your project and navigate into it using your terminal. Then, initialize a new Node.js project using the following command:

npm init -y

The -y flag uses the default settings to create a package.json file, which will manage your project's dependencies and scripts.

Step 2: Install Express

Next, you need to install Express, a fast and minimal web framework for Node.js. Run the following command:

npm i express

This installs Express and adds it to the dependencies section of your package.json.

Step 3: Install Development Dependencies

You’ll need several packages for TypeScript and development purposes. Install them with:

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

Here’s a breakdown of these packages:

nodemon: Automatically restarts your Node.js server when file changes are detected.
typescript: Adds TypeScript support.
@types/express: Provides TypeScript definitions for Express.
@types/node: Provides TypeScript definitions for Node.js.

The -D flag adds these packages to the devDependencies section of your package.json.

Step 4: Initialize TypeScript

Initialize TypeScript in your project by running:

npx tsc --init

This creates a tsconfig.json file, which you can configure as needed. For most projects, the default settings work well, but you may need to adjust the configuration based on your project's requirements.

Step 5: Compile TypeScript

Before writing any TypeScript code, ensure that TypeScript compiles without errors. Run:

npx tsc

If everything is set up correctly, this command will compile your TypeScript files into JavaScript and place them in the dist directory (as per the default configuration in tsconfig.json).

Step 6: Set Up ESLint (Optional but Recommended)

ESLint helps maintain code quality and consistency. Initialize ESLint in your project with:

npm init @eslint/config

Follow the prompts to set up ESLint according to your preferences. This will create a .eslintrc file in your project.

Step 7: Create the `src` Folder and `app.ts` or `server.ts`

Create a src directory in the root of your project. Inside this directory, create a file named app.ts (or server.ts, based on your preference). This file will be the entry point for your Express application.

mkdir src
touch src/app.ts

Add the following code to src/app.ts to set up a basic Express server:

import express from 'express';

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

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

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

Step 8: Update `package.json` Scripts

Add the following scripts to the scripts section of your package.json:

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

These scripts do the following:

"start": Runs your compiled JavaScript code.
"build": Compiles your TypeScript code.
"dev": Starts your server with nodemon an automatic restart on file changes.

Step 9: Start Your Development Server

Now, you can start your development server with:

npm run dev

This command runs nodemon to watch for changes in your TypeScript files and restart the server automatically.

Conclusion

You’ve now set up a Node.js project with Express and TypeScript! Here’s a quick recap of the commands used:

npm init -y
npm i express
npm i nodemon typescript @types/express @types/node -D
npx tsc --init
npx tsc
npm init @eslint/config
Create the src folder and app.ts file.
Update package.json scripts.
npm run dev

With this setup, you can start building your Express application using TypeScript, benefiting from type safety and modern JavaScript features. Happy coding!