¿Cómo configurar una aplicación de NodeJS y Express para Typescript?

Como ya debes saber, Javascript es uno de los lenguajes más populares, sino el más popular del mundo. Lo encontramos en todas partes, no solo en la web, sino en dispositivos móviles (React Native), en IoT (Internet of Things) para dispositivos en general, en el servidor con NodeJS, etc. Desarrolladores han creado frameworks para el desarrollo frontend como backend, haciendo de Javascript una opción muy atractiva por su gran versatilidad al momento de programar.

Pese a todas estas cosas, Javascript carece por defecto lo que al parecer es una de las funciones favoritas para desarrolladores. Por defecto Javascript es lo que se conoce como dynamic type. O sea que una variable puede contener más de un tipo de data por defecto. En el siguiente ejemplo:

let miNumero = 5
console.log(miNumero)
// resultado es number 5

Sin embargo, más adelante podemos asignar a la variable miNumero un 5, pero en cadena de texto sin ningún problema.

miNumero = '5'
console.log(miNumero)
// resultado es string 5

Si estuviéramos utilizando Typescript, nos hubiera enviado un error en el segundo bloque de código, porque una vez asignamos valor a una variable typescript infiere el tipo de dato asignado, aunque también podemos asignar el tipo de dato de manera predeterminada. Por ejemplo, el primer bloque de código sería algo como:

let miNumero: number = 5
console.log(miNumero)
// result is number 5

Ahora vamos a trabajar con Typescript para tener una mejor idea de como funciona. Primero iniciemos NPM utilizando el siguiente comando.

npm init -y

Esto creará una base para instalar los paquetes que necesitamos instalar de NodeJS. Ahora instalemos ExpressJS como la única dependencia que instalaremos para producción solo para efectos de este tutorial.

npm i express

Ahora instalemos las dependencias que utilizaremos para desarrollar con Typescript.

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

Usted puede buscar más detalles sobre estas dependencias en el internet escribiendo npm y el nombre de la dependencia en el buscador.

Lo primero que haremos será crear un documento de configuración de Typescript.

tsc --init

Esto creará un documento llamado tsconfig.json. Configuremos lo siguiente:

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

A pesar de la gran cantidad de opciones, solo modificaremos algunas. Puede buscar más información en la página oficial de Typescript.

1.    target: es6 – se refiere al set de reglas que utilizará al momento de compilar (convertir documentos de Typescript a Javascript)

2.    module: commonjs – se refiere al sistema de módulos que utilizará

3.    outDir: ./dist – se refiere a donde se creará el código compilado para producción

4.    rootDir: ./src – se refiere a donde se encontrará el código para compilar

Ahora movámonos por un momento al documento package.json para crear los scripts que correrán nuestra aplicación y que crearán el directorio para producción.

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

El bloque anterior, de arriba abajo los scripts hacen lo siguiente:

1.    probar aplicación compilada

2.    correr aplicación en modo desarrollo

3.    compilar aplicación

Ahora los documentos de nuestra aplicación deben mirarse como sigue:

--app
----dist
----node_modules
----src
----package.lock.json
----tconfig.json

Ahora entremos a la carpeta src y creemos un documento llamado app.ts con el siguiente código:

import express, {Application, Request, Response} from 'express'
 
const app: Application = express()
 
app.get('/', (req: Request, res: Response) => {
 res.status(200).send('Hola TypeScript con Node y Express!')
})
 
app.listen(5000, () => {
 console.log('Servidor corriendo en el puerto 5000')
})

Como vemos, la aplicación express utiliza los tipos de dato que incluimos.La variable app es tipo Application, la ruta de prueba app.get(‘/’) contiene los tipos Request y Response.

Si probamos el comando npm run dev la aplicación debe funcionar sin problemas en el puerto 5000.

Ahora corramos el comando npm run build para compilar la aplicación Typescript a Javascript.

Si miramos dentro de la carpeta dist, veremos el siguiente código en app.js:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
   return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = (0, express_1.default)();
app.get('/', (req, res) => {
   res.status(200).send('Hola TypeScript con Node y Express!');
});
app.listen(5000, () => {
   console.log('Servidor corriendo en el puerto 5000');
});

Vemos como Typescript a compilado la aplicación a Javascript. Ahora corramos el comando npm run start y probemos la aplicación dentro de la carpeta dist. Si todo funciona correctamente has preparado exitosamente una plantilla para comenzar a escribir una aplicación NodeJS y Express con Typescript.

DocumentaciónTypescript

Documentación NodeJS

Documentación ExpressJS