TypeScript, Node.js & Express

In this tutorial, we will learn how to build APIs with TypeScript, Node.js, and Express, creating strongly typed and maintainable server-side applications.

Setting up the Project

First, create a new project directory and initialize it as an npm package:

mkdir ts-express-api
cd ts-express-api
npm init -y

Now, install TypeScript, Node.js typings, Express, and its typings:

npm install typescript @types/node express @types/express

Create a tsconfig.json file in your project directory with the following content:

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

This configuration sets the output directory to dist and includes the src folder in the compilation process.

Creating the API

Create a src directory and an index.ts file inside it:

mkdir src
touch src/index.ts

In src/index.ts, import the required modules and set up a basic Express application:

TypeScript

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

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

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

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

In this example, we import the express module and its related types Request and Response. We create a basic Express application that listens on port 3000 and responds with a greeting message.

Building and Running the API

To build and run the API, add the following scripts to your package.json file:

package.json

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js",
  "dev": "tsc-watch --onSuccess \"node dist/index.js\""
}

Now, build the project and start the server:

npm run build
npm start

Visit http://localhost:3000 in your browser or use a tool like Postman to see the API in action.

Creating a Typed Route

To demonstrate the advantages of using TypeScript with Express, let's create a typed route that receives query parameters.

Create a new file src/routes/greet.ts:

TypeScript

import { Request, Response } from 'express';

export function greet(req: Request, res: Response): void {
  const name = req.query.name || 'World';
  res.send(`Hello, ${name}!`);
}

This function accepts Request and Response objects, extracts the name query parameter, and sends a personalized greeting.

Now, register this route in your src/index.ts file:

TypeScript

import { greet } from './routes/greet';

// Other code...

app.get('/greet', greet);

// Other code...

Build and restart the server, then visit http://localhost:3000/greet?name=TypeScript to see the typed route in action.

Conclusion

In this tutorial, we've demonstrated how to set up a TypeScript, Node.js, and Express project to build APIs. We've shown you how to create a basic server, a typed route, and how to use TypeScript's features to create maintainable server-side applications.

By using TypeScript with Express, you can ensure a more robust and maintainable codebase, taking advantage of static typing and other language features that improve the development experience.

Remember to explore more about TypeScript, Node.js, and Express to build even more complex and feature-rich APIs.