NodeJS con ExpressJS y TypeScript parte 1.

En esta publicación veremos cómo crear un servidor con expressJS y mecanografiado desde cero, esta publicación se dividirá en varias partes para que sea comprensible y explique cada cosa a fondo.

Puedes acceder al código desde el repositorio

Primeros pasos

El primer paso para iniciar un proyecto en nodeJS lo vamos con este comando:

npm init -y

Este comando iniciará nuestro proyecto creando el archivo package.json .

Ahora tenemos que instalar las dependencias, para este caso voy a usar express con mecanografiado, veamos cuales son las dependencias que vamos a instalar:

Dependencias:

expreso

Dependencias de desarrollo:

mecanografiado
ts-nodo
@tipos/nodo
@tipos/express

¿Por qué instalamos todo lo relacionado con Typescript como devDependencies? Bien, recordemos que aunque escribiremos el código usando Typescript, el código se vuelve a compilar en JavaScript estándar. Por lo tanto, Typescript no es necesario para ejecutar la aplicación, solo lo necesitamos mientras estamos desarrollando, por eso se guarda como una dependencia de desarrollo.

Así que vamos a ejecutar el siguiente comando:

npm install express

y :

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

Una vez que hayamos instalado con éxito todas las dependencias, nuestro paquete.json debería verse así:

{
   "name": "nodejs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.3"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.25",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.3"
   }
}

Configurar mecanografiado

npx tsc --init

El archivo tsconfig.json que creamos con el comando anterior contiene mucho código, y gran parte de este mismo código está comentado para que pueda experimentar y configurarlo a su gusto. Sin embargo, hay algunas configuraciones que quiero explicar:

módulo :con esta opción, puede especificar qué administrador de módulos usar en el código JavaScript generado. como:'ninguno', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020' o 'ESNext'. El administrador de módulos más común y predeterminado es commonjs.
objetivo :usando esta opción, podemos especificar qué versión de ECMAScript usar en su proyecto. Las versiones disponibles son 'ES3' (predeterminado), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020' o 'ESNEXT'.
dirección de salida :con esta opción podemos especificar en qué ruta se generará el código Javascript.
dirección raíz :esta opción es donde especificamos dónde se encuentran los archivos TypeScript.
estricto :La opción está habilitada de forma predeterminada y habilita las opciones de verificación de tipos estrictos.

Puede leer más sobre esta configuración en el propio archivo tsconfig.json o también en la documentación oficial de mecanografiado.

En mi caso usaré la siguiente configuración en tsconfig.json:

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

Nuestro primer servidor con expressJS

Con la configuración de mecanografiado, es hora de crear nuestro primer servidor web con expressJS. Vamos a crear un archivo llamado index.ts.

En este archivo tendremos el siguiente código:

import express, { Request, Response } from 'express';
const app = express();

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

app.listen(8000, () => {
  console.log('The application is listening on port 8000!');
});

Primero lo que hacemos es importar express desde express junto con los tipos de Solicitud y Respuesta.

Una vez hecho esto tenemos que inicializar nuestra app con la línea

const app = express();

Ahora vamos a agregar un punto final de tipo get en el que se devolverá un mensaje, por lo que debemos hacer lo siguiente:

app.get("/");

Para empezar de forma sencilla tendremos nuestra app y luego pondremos el método de nuestro endpoint en este caso get esta es una función que recibe 2 parámetros para comenzar, luego podemos agregarle middleware pero en este momento hay 2, el primero es una cadena con la ruta como queremos que sea nuestra ruta inicial, solo tenemos que poner un / y express entiende que esta será nuestra ruta principal.

Ahora tenemos que agregar el segundo parámetro que es una devolución de llamada, esta devolución de llamada recibe 2 parámetros que son solicitud y respuesta:

app.get('/', (req: Request, res: Response) => {
});

Como puede ver, ya he agregado los tipos. Recuerda que tú le das el nombre a los 2 parámetros, pero por convención y los más comunes que encontrarás son req y res.

Dentro de este callback irá nuestro código, el cual se ejecutará cuando accedamos a la ruta por ahora solo responderemos texto:

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

Con res.send('Hola Mundo'); lo que hacemos es decirle que responda con texto a nuestra llamada.

Ahora veamos esto en el navegador. Pero antes de hacerlo necesitamos una cosa, que es decirle a nuestro servidor express (aplicación) que siga escuchando en un puerto determinado.

Entonces escribiremos:

app.listen(8000, () => {
  console.log('The application is listening on port 8000!');
});

Este recibe 2 parámetros, el primero el puerto donde estará escuchando nuestro servidor y un callback el cual se ejecutará cuando el servidor este listo, por ahora solo pondremos un console.log.

Teniendo esto en cuenta vamos a ejecutar nuestro servidor.

Recuerda que como estamos trabajando con mecanografiado debemos compilar a js para que node pueda leerlo, ejecutamos el comando:

npx tsc --project ./

Se generará una carpeta de compilación. que tendrá nuestro código. que quizás no entendamos pero ya está compilado.

Para acelerar la compilación de nuestro código podemos crear un script en nuestro paquete.json en la sección de scripts:

"scripts": {
     "build": "npx tsc --project ./",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

Lo he llamado build ahora para compilar solo tenemos que ejecutar:

npm run build

Siempre que creamos un script tenemos que ejecutarlo con:

 npm + run + script name

En este punto podemos escribir el comando:

node ./build/index.js

Veremos la siguiente salida:

❯ node ./build/index.js
The application is listening on port 8000!

Veamos nuestro navegador web:

Como podemos ver tenemos la respuesta de nuestro endpoint.

Como puedes ver en este artículo hemos creado nuestro primer servidor con expressJS y mecanografiado.

En la siguiente parte veremos cómo acelerar el desarrollo usando nodemon y también veremos cómo responder a diferentes tipos de formatos. Solicitudes con otros verbos http y más.

Si tienes alguna duda sobre este post, puedes dejarla en los comentarios. O también si tienes alguna recomendación podrías dejarlo de todos modos.

La siguiente parte de esta publicación estará disponible el 19 de abril.

NodeJS con ExpressJS y TypeScript parte 1.