Al principio de mi carrera, era desarrollador backend, donde los lenguajes de tipado fuerte dominaban el mercado.
Cuando pasé a desarrollo web, quedé impresionado por cada nueva característica de JavaScript o Python. El hecho de no tener que declarar tipos de variables implicaba productividad e hizo mi trabajo más divertido.
Así que la primera vez que hoy hablar de TypeScript, la idea me pareció un paso atrás en la evolución de este lenguaje.
¿He cambiado de idea?
Sí, pero depende del caso. Para proyectos personales, en los que trabajo solo, prefiero la productividad de JavaScript. Pero, para proyectos más grandes donde trabajas en equipo, recomiendo usar TypeScript. En este artículo explicaré cómo y por qué.
TypeScript
Si todavía no sabes qué es TypeScript, recomiendo leer esta introducción (en inglés): https://www.tutorialspoint.com/typescript/typescript_overview.htm
Y el tutorial oficial de 5 minutos (en inglés): https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Pero podríamos decir que se trata de ECMAScript 6 con tipado fuerte.
Productividad / Mantenimiento
Por definición, «TypeScript es JavaScript para desarrollo a nivel de aplicación». Es decir, el trabajo realizado en la configuración inicial del proyecto se ve compensada por la facilidad de mantenimiento que aporta en proyectos complejos. Veamos por qué sucede esto:
Tipado seguro = menos errores
Definiendo los tipos en el código, permites a tu IDE reconocer errores en el uso de clases y funciones que sólo se detectarían en tiempo de ejecución.
Ejemplo:
Aquí estoy usando Visual Studio Code que indica dos errores:
Línea 6: estamos intentado pasar un parámetro string a una función que sólo acepta números.
Línea 9: estamos intentado asignar a una cadena el resultado de una función que devuelve un número.
Sin TypeScript, estos errores no se detectarían, generando errores en la aplicación final.
Nuestro IDE expone los módulos del proyecto fácilmente
En proyectos complejos tenemos cientos de clases distribuidas a través de múltiples ficheros. Cuando definimos los tipos, el IDE es capaz de relacionar objetos y funciones a los ficheros que los han originado.
Cuando usamos CTRL + clic en un método o clase, importado desde otro fichero, el IDE nos llevará automáticamente al fichero importado, marcando la línea donde se definió la referencia.
Podemos usar autocompletar en clases que han sido importadas desde otros ficheros.
La dificultado de mantenimiento es una de las razones principales por las que los desarrolladores de Java y C# evitan migrar proyectos grandes a JavaScript. Podemos decir que TypeScript es un lenguaje que supera esta barrera.
Como configurar un proyecto Express con TypeScript
Veamos paso por paso cómo crear un entorno para usar TypeScript dentro de un proyecto de Express.js
npm initInstalaremos el paquete typescript
npm install typescript -sAcerca del paquete de node TypeScript
Node.js es un motor que ejecuta JavaScript, no TypeScript. EL paquete de node TypeScript nos permite transpilar tus ficheros .ts a scripts .js. También se puede usar Babel para transpilar TypeScript, pero el estándar del mercado es el del paquete oficial de Microsoft.
Dentro de nuestro package.json introduciremos un script llamado tsc.
"scripts": {
"tsc": "tsc"
},Esta modificación nos permite llamar a funciones TypeScript desde la línea de comandos en la carpeta del proyecto. Así que podemos usar el siguiente comando:
npm run tsc -- --initEste comando inicializa el proyecto creando el fichero tsconfig.json. Dentro de este fichero descomentaremos la opción outDir y elegiremos una localización donde se dejarán los ficheros .js transpilados.
Instalando Express.js
npm install express -sLos paquetes de Express y TypeScript son independientes. Consecuentemente, TypeScript no reconoce los tipos de las clases de Express. Existe un paquete npm concreto para que TypeScript reconozca los tipos de Express.
npm install @types/express -sHola Mundo
Para hacer la aplicación lo más sencilla posible, usaremos el ejemplo de Hola Mundo del tutorial de Express (en inglés):
https://expressjs.com/pt-br/starter/hello-world.html
Dentro de nuestro proyecto crearemos una carpeta llamada app. Dentro de esta carpeta crearemos un fichero llamado app.ts con el siguiente contenido:
// lib/app.ts
import express = require('express');
// Create a new express application instance
const app: express.Application = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});Compilando nuestra primera aplicación:
npm run tscComo podemos ver, este comando ha creado automáticamente la carpeta build y el fichero .js.
Ejecutando Express
node build/app.jsAsí, tenemos nuestro servidor corriendo en el puerto 3000
Ejecutar TypeScript sin transpilar
Puedes ejecutar TypeScript directamente en Node con el paquete ts-node.
Este paquete se recomienda sólo para desarrollo. Para realizar el despliegue final en producción, usa siempre la versión JavaScript de tu proyecto.
ts-node ya está incluido como dependencia en otro paquete, ts-node-dev. Después de instalar, ts-node-dev puede ejecutar comandos que reinician el servidor cuando los ficheros del proyecto se modifican.
npm install ts-node-dev -sDentro de nuestro package.json añadiremos dos scripts más.
"scripts": {
"tsc": "tsc",
"dev": "ts-node-dev --respawn --transpileOnly ./app/app.ts",
"prod": "tsc && node ./build/app.js"
},Para iniciar el entorno de desarrollo:
npm run devPara ejecutar el servidor en modo producción:
npm run prodEl proyecto final puede encontrarse en este repositorio de GitHub:
https://github.com/andregardi/ts-express
Puedes encontrar el artículo original en: https://medium.com/javascript-in-plain-english/typescript-with-node-and-express-js-why-when-and-how-eb6bc73edd5d