Crea una API con Node y Express usando Typescript desde 0

Express es uno de los frameworks web más populares para Node.js. Permite crear aplicaciones web de manera sencilla y rápida. En este tutorial, te trataré de enseñar a crear un servidor Express en TypeScript.

En este tutorial, te guiaré a través del proceso de crear una API básica utilizando Node.js, Express y Typescript. Este proyecto incluirá rutas simples como bienvenida y verificación de que la API funciona.

Paso 1: Configurar el entorno de trabajo

Antes de comenzar, debemos asegurarnos de tener Node.js y npm instalados en nuestra máquina. Para instalar Node.js y npm, siga las instrucciones en el sitio web oficial de Node.js.

Luego, podemos crear un nuevo directorio para nuestra aplicación y navegar hasta él en la terminal.

Para este tutorial, usaremos el nombre typescript-express-server.

$ mkdir mi-api
$ cd mi-api

A continuación, inicializamos un nuevo proyecto Node.js con npm.

$ npm init -y

Instalar las dependencias

Para crear nuestro servidor Express en TypeScript, necesitamos instalar las siguientes dependencias:

express: El framework web Express.
@types/express: Las definiciones de tipos para Express.
typescript: El compilador TypeScript.
ts-node-dev: Un intérprete de TypeScript para Node.js modo desarrollo.
@types/node: Las definiciones de tipos para Node.js.

Ejecute los siguientes comandos en la terminal para instalar estas dependencias:

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

Crear el archivo de configuración de TypeScript

Antes de comenzar a escribir el código de nuestra aplicación, necesitamos crear un archivo de configuración de TypeScript. Podemos hacerlo ejecutando el siguiente comando en la terminal:

$ npx tsc --init

Esto creará un archivo tsconfig.json en la raíz de nuestro proyecto con la configuración predeterminada de TypeScript.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

Paso 2: Estructura del Proyecto

Organiza tu proyecto con la siguiente estructura de carpetas y archivos:

mi-api/
|-- src/
|   |-- api/
|   |   |-- interfaces.ts
|   |   |-- api.ts
|   |   |-- routes/
|   |       |-- healthCheck.ts
|   |       |-- welcome.ts
|-- servers/
|   |-- http.ts
|-- index.ts
|-- .env

Paso 3: Escribir el código de la API

Ahora que hemos configurado nuestro entorno de trabajo y hemos instalado las dependencias necesarias, podemos comenzar a escribir el código de nuestra aplicación.

Vamos a encapsular la lógica del servidor HTTP en una clase. Esto nos permite crear múltiples instancias del servidor con diferentes configuraciones y opciones.

A continuación, crearemos una clase ServerHTTP:

// server/http.ts

import * as http from 'http';

export class ServerHTTP {
  private address: string;
  private host: string;
  private port: number;
  private httpServer: http.Server;

  constructor(host: string, port: number, httpServer: http.Server) {
    this.host = host;
    this.port = port;
    this.httpServer = httpServer;
    this.address = `${this.host}:${this.port}`;
  }

  public listen(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.httpServer.listen(this.port, () => {
        console.log(`⚡️[server]: Server is running at ${this.address}`);
        console.log('  Press CTRL-C to stop\n');
        resolve();
      });
    });
  }

  async stop(): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.httpServer) {
        this.httpServer.close(error => {
          if (error) {
            return reject(error);
          }
          return resolve();
        });
      }

      return resolve();
    });
  }
}

Código de nuesta API base

Creamos una interfaz de API

// src/api/interfaces.ts
import { Server } from 'http';

export interface API {
  createServer(): Server;
}

Ahora tendremos que crear una clase que implemente nuestra interfaz API

// src/api/api.ts
import express from 'express';
import http, { Server } from 'http';

import * as routes from './routes';
import { API } from './interfaces';

export class ExpressApi implements API {
  private router: express.Router;
  private baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
    this.router = express.Router();

    this.router.get('/', routes.welcome);
    this.router.get('/health', routes.healthCheck);
    // aqui puedes agregar más rutas
  }

  public createServer = (): Server => {
    const expressApp: express.Application = express();

    expressApp.use('/', this.router);

    return http.createServer(expressApp);
  }
}

// src/api/routes/healthCheck.ts
import { Response, Request } from 'express';

export const healthCheck = (_req: Request, res: Response): Response => {
  return res.json({ status: 'OK' });
};

// src/api/routes/welcome.ts
import { Response, Request } from 'express';

export const welcome = (_req: Request, res: Response): Response => {
  return res.send('Welcome to the API!');
};

por último vamos a unir e implementar tanto nuestra API como nuestro servidor HTTP

// index.ts
import dotenv from 'dotenv';

import { ServerHTTP } from './servers/http';
import { ExpressApi } from './api';
import { API } from './api/interfaces';

dotenv.config();

const host = process.env.SERVER_URL || 'http://localhost';
const port = Number(process.env.PORT || 3000);
const BASE_URL = `${host}:${port}`;

const api: API = new ExpressApi(BASE_URL);
const httpServer = new ServerHTTP(host, port, api.createServer());

try {
  httpServer.listen();
} catch (error) {
  if (error instanceof Error) {
    console.error(`Error starting server: ${error.message}`);
  } else {
    console.error('Unknown error occurred');
  }
}

Paso 6: Compilar y ejecutar la aplicación

Para compilar y ejecutar la aplicación con la nueva clase ExpressServer, podemos usar los mismos comandos que usamos antes.

Primero, compilamos el código TypeScript con el comando tsc.

$ npx tsc

Luego, podemos ejecutar la aplicación con el siguiente comando:

$ node build/index.js

Si todo ha ido bien, deberíamos ver el siguiente mensaje en la consola.

Use express server: App listening on http://localhost:3000

Conclusiones

En este tutorial, hemos aprendido

Crear un servidor HTTP en TypeScript.
Instalar dependencias necesarias
Configurar TypeScript
Crear una clase para encapsular la lógica del servidor Express.
Utilizar la clase ExpressServer en nuestra aplicación
Compilar y ejecutar el código TypeScript.

Aunque este tutorial solo cubre lo básico, el código escrito nos va a servir para reutilizarlo en futuros proyectos.

Espero que haya sido un buen punto de partida para aprender a crear servidores web con Express y TypeScript.

Happy Hacking!