TypeScript / Express router

Bienvenidos sean a este post, hoy continuaremos con otra caracteristica de Express.

Una de las ventajas de trabajar con Express es que posee una forma practica de poder enrutar nuestras paginas. Pero a que nos referimos con enrutar? Vamos a suponer que tenemos una aplicacion/pagina que posee varias secciones como puede ser un login o de productos, etc. Y en cada una de ellas tenemos distintos tipos de solicitudes de tipo POST, GET, DELETE, y otros. Y para cada uno de ellos tenemos distintos puntos de acceso. Mediante el enrutador podemos separar cada uno de estos puntos en distintos archivos y cada uno sera manejado por su archivo. Para entender el concepto vamos a crear un nuevo ejemplo. Para ello crearemos un directorio con el nombre de router, ingresaremos al mismo y ejecutaremos los siguientes comandos:

$ npm init
$ npm install express
$ npm install @types/express --save-dev
$ tsc --init

El primero es para crear el archivo package.json del proyecto node, el siguiente instala los modulos de express, el tercero instala los archivos de declaracion de express para typescript y el ultimo genera al archivo tsconfig.json para nuestro proyecto de typescript. Con esto realizado lo siguiente es crear otro directorio llamado routes, ingresamos a este y crearemos un archivo con el nombre de index.ts y le agregaremos el siguiente codigo:

routes/index.ts

import express from 'express';
let router = express.Router();
router.get('/',
        (
                req: express.Request,
                res: express.Response
        ) => {
                res.send(`Modulo indice procesado ${req.url}`);
        }
);
export { router };

Primero importaremos al modulo de express, despues definiremos un objeto llamado router que contendra al metodo Router de express. Con este objeto creado usaremos a get de router para asociar con la barra. En este tendremos una funcion anonima con dos objetos para manejar la solicitud (Request) y la respuesta (Response), y con esta funcion mediante send enviaremos un mensaje a la pagina indicando que el modulo indice se proceso y pasarmos la url con la que fue solicitado. Hasta algo muy parecido a lo visto en el post anterior pero la diferencia viene al final. Aqui agregamos un export y al objeto router, esto nos permite que este objeto pueda ser accedido desde otros archivos. El siguiente paso es crear un nuevo archivo en el directorio routes con el nombre de login.ts y le agregaremos el siguiente codigo:

routes/login.ts

import express from 'express';
let router = express.Router();
router.get('/login',
        (
                req: express.Request,
                res: express.Response
        ) => {
                res.send(`Modulo login procesado ${req.url}`);
        }
);
export { router };

Este es similar al anterior pero la diferencia radica en el asociado de get, en lugar de usar la barra usamos la barra con la palabra login, cambiamos el mensaje para indicar que es el modulo de login. El resto es exactamente igual al anterior inclusive con la exportacion del objeto. Nuestro ultimo paso sera crear un nuevo archivo en el directorio raiz del proyecto con el nombre de main.ts y le agregaremos el siguiente codigo:

main.ts

import express from 'express';
import * as Indice from './routes/index';
import * as Login from './routes/login';

let app = express();

app.use('/', Indice.router);
app.use('/', Login.router);

app.listen(3000,() => {
        console.log('escuchando en el puerto 3000');
});

Como siempre primero importaremos al modulo de express, luego todo lo que compartan los archivos creados anteriormente pero con un alias asignado mediante la palabra as. Esto es para identificar de mejor a cada importacion y podemos acceder a los elementos compartidos. Asignamos el modulo express a un objeto y lo siguiente es el uso del metodo use para asignar a los manejadores de ruteo.. Observen que en ambos casos usamos la barra pero uno se direccionara al router de index y el otro de login, donde verificaran si coincide con el recibido y proceden a mostrar los mensajes en cada caso. Por ultimo, tenemos al listen que se encarga de habilitar el escuche en el puerto 3000. Al igual que en el post anterior le asignamos un mensaje en consola para mostrar que esta funcionando. Simplemente lo compilan con el comando tsc y luego lo ejecutan con el comando node main. Si todo funciona bien debe quedar de la siguiente manera:

$ node main
escuchando en el puerto 3000

Vamos a ver como trabaja nuestra aplicacion mediante el siguiente video

En el video podemos no solo ver como trabaja correctamente cuando solicitamos cualquiera de las dos url sino que al solicitar una inexistente nos lo comenta sin caer en algun error de pagina o similar.

En resumen, hoy hemos visto router, que es, para que sirve, como se aplica, como nos beneficia, y un ejemplo para poder verlo en accion. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.