Cómo usar TypeScript con Node.js: El dúo dinámico para el desarrollo web

TypeScript se está abriendo camino como uno de los lenguajes de programación más populares para las organizaciones modernas.

TypeScript es un superíndice JavaScript compilado y estrictamente tipado (construido sobre el lenguaje JavaScript). Este lenguaje tipado estáticamente, desarrollado y mantenido por Microsoft, soporta conceptos orientados a objetos como su subconjunto, JavaScript.

Este lenguaje de programación de código abierto tiene muchos casos de uso, como la creación de aplicaciones web, a gran escala y móviles. TypeScript puede utilizarse para el desarrollo frontend y backend. También cuenta con varios marcos de trabajo y bibliotecas que simplifican el desarrollo y amplían sus casos de uso.

¿Por qué utilizar TypeScript con Node.js? Este artículo tratará sobre por qué TypeScript se considera "mejor" que JavaScript, cómo instalarlo utilizando Node.js, configurarlo y crear un pequeño programa utilizando TypeScript y Node.js.

TypeScript con Node.js: Ventajas

Tipado estático opcional: JavaScript está tipado dinámicamente, lo que significa que el tipo de datos de una variable se determina en tiempo de ejecución y no durante el tiempo de compilación. Por otro lado, TypeScript ofrece tipado estático opcional, lo que significa que una vez que declare una variable, ésta no cambiará de tipo y sólo tomará determinados valores.
Previsibilidad: Cuando se trabaja con TypeScript, existe la seguridad de que todo lo que defina seguirá siendo lo mismo. Por ejemplo, si declara una determinada variable como booleana, nunca podrá cambiar de cadena por el camino. Como desarrollador, tiene la seguridad de que sus funciones seguirán siendo las mismas.
Fácil detección temprana de errores: TypeScript detecta la mayoría de los errores de tipo de forma temprana, por lo que su probabilidad de pasar a producción es baja. Esto reduce el tiempo que los ingenieros dedican a probar el código en fases posteriores.
Compatible con la mayoría de IDEs: TypeScript funciona con la mayoría de los entornos de desarrollo integrados (IDE). La mayoría de estos IDE proporcionan completado de código y resaltado de sintaxis. En este artículo se utilizará Código de Visual Studio, otro producto de Microsoft.
Código fácil de refactorizar: Puede actualizar o refactorizar su aplicación TypeScript sin cambiar su comportamiento. La presencia de herramientas de navegación y la comprensión de su código por parte del IDE facilitan la refactorización del código base sin esfuerzo.
Utiliza paquetes existentes: No tiene que crear todo desde cero; puede utilizar paquetes NPM existentes con TypeScript. Este lenguaje también tiene una fuerte comunidad que mantiene y crea definiciones de tipos para paquetes populares.

Cómo utilizar TypeScript con Node.js

Aunque TypeScript tiene estas ventajas, los navegadores modernos no pueden leer su código en formato plano. Por lo tanto, el código TypeScript debe transpilarse primero a código JavaScript para ejecutarse en los navegadores. El código resultante tendrá la misma funcionalidad que el código TypeScript original y funcionalidades extra no disponibles en JavaScript.

Requisitos previos

Node.js: Node es un entorno de ejecución multiplataforma que permite ejecutar código JavaScript fuera de un entorno de navegador. Puede comprobar si el nodo está instalado en su máquina utilizando este comando;

node -v

De lo contrario, puede descargar Node.js desde el sitio web oficial. Vuelva a ejecutar el comando anterior después de la instalación para comprobar si se ha configurado bien.

Un gestor de paquetes Node: Puede utilizar NPM o Yarn. El primero se instala por defecto al instalar Node.js. En este artículo utilizamos NPM como gestor de paquetes. Utilice este comando para comprobar su versión actual;

npm -v

Instalación de TypeScript con Node.js

Paso 1: Configurar una carpeta de proyecto

Comenzaremos a crear una carpeta de proyecto para el proyecto TypeScript. Puede darle a esta carpeta cualquier nombre de su agrado. Puede utilizar estos comandos para empezar;

mkdir typescript-node

cd typescript-node

Paso 2: Inicializar el proyecto

Utilice npm para inicializar su proyecto utilizando este comando;

npm init -y

El comando anterior creará un archivo package.json. La bandera -y en el comando le dice a npm que incluya valores predeterminados. El archivo generado tendrá una salida similar.

{

 "nombre": "typescript-node",

 "version": "1.0.0",

 "description": "",

 "main": "index.js",

 "scripts": {

 "test": "echo \"Error: no test specified\" && exit 1"

 },

 "keywords": [],

 "autor": "",

 "licencia": "ISC"

}

Configuración de TypeScript con Node.js

Paso 1: Instalar el compilador de TypeScript

Ahora puede instalar el compilador TypeScript en su proyecto. Ejecute este comando

npm install --save-dev typescript

La salida en su línea de comandos será algo similar a esto

añadido 1 paquete, y auditado 2 paquetes en 26s

encontrado 0 vulnerabilidades

Nota: El enfoque anterior instala TypeScript localmente en la carpeta del proyecto en la que está trabajando. Puede instalar TypeScript globalmente en su sistema, para no tener que instalarlo cada vez que trabaje en un proyecto. Utilice este comando para instalar TypeScript globalmente;

npm install -g typescript

Puede comprobar si TypeScript ha sido instalado utilizando este comando;

tsc -v

Paso 2: Añadir tipos Ambient Node.js para TypeScript

TypeScript tiene diferentes tipos, como Implícito, Explícito y Ambient. Los tipos Ambient siempre se añaden al ámbito de ejecución global. Utilice este comando para añadir tipos Ambient;

npm install @types/node --save-dev

Paso 3: Cree un archivo tsconfig.json

Este es el archivo de configuración que especifica todas las opciones de compilación de TypeScript. Ejecute este comando que viene con varias opciones de compilación definidas;

npx tsc --init --rootDir src --outDir build \

--esModuleInterop --resolveJsonModule --lib es6 \

--module commonjs --allowJs true --noImplicitAny true

Esto se mostrará en el terminal;

Se generará el archivo tsconfig . json, que contiene algunos valores predeterminados y comentarios.

Esto es lo que hemos configurado:

El rootDir es donde TypeScript buscará nuestro código. Lo hemos dirigido a la carpeta /src donde escribiremos nuestro código.
La carpeta outDir define dónde se pondrá el código compilado. Dicho código está configurado para ser almacenado en la carpeta build/.

Uso de TypeScript con Node.js

Paso 1: Crear la carpeta src y el archivo index.ts

Ahora tenemos la configuración básica. Ahora podemos crear una sencilla aplicación TypeScript y compilarla. La extensión de un archivo TypeScript es .ts. Ejecute estos comandos dentro de la carpeta que hemos creado en los pasos anteriores;

mkdir src

touch src/index.ts

Paso 2: Añada código al archivo TypeScript (index.ts)

Puede empezar con algo sencillo como

console.log('¡Hola mundo!')

Paso 3: Compilar el código TypeScript a código JavaScript

Ejecute este comando

npx tsc

Puede comprobar la carpeta build (build/index.js), y verá que se ha generado un index.js con esta salida;

TypeScript ha sido compilado en código JavaScript.

Paso 4: Ejecute el código JavaScript compilado

Recuerde que el código TypeScript no puede ejecutarse en los navegadores. Por lo tanto, ejecutaremos el código en index.js en la carpeta de compilación. Ejecute este comando

node build/index.js

Esta será la salida;

Paso 5: Configurar TypeScript para auto-compilar a código JavaScript

Compilar código TypeScript manualmente cada vez que cambie sus archivos TypeScript puede hacerle perder tiempo. Puede instalar ts-node (ejecuta el código TypeScript directamente sin esperar a que se compile) y nodemon (comprueba si hay cambios en su código y reinicia automáticamente el servidor).

Ejecute este comando

npm install --save-dev ts-node nodemon

A continuación, puede ir al archivo package.json y añadir este script

"scripts": {

 "start": "ts-node ./src/index.ts"

}

Podemos utilizar un nuevo bloque de código con fines de demostración;

function suma (num1:número, num2:número, num3:número){

 return num1 num2 num3;

}

console.log(suma(10,15,30))

Elimine el archivo index.js (/build/index.js) y ejecute npm start.

Su salida será similar a esta

Configurar TypeScript Linting con eslint

Paso 1: Instale eslint

Linting puede ser útil si desea mantener la coherencia del código y detectar errores antes del tiempo de ejecución. Instale eslint utilizando este comando

npm install --save-dev eslint

Paso 2: Inicialice eslint

Puede inicializar eslint utilizando este comando;

npx eslint --init

El proceso de inicialización le llevará a través de varios pasos. Utilice la siguiente captura de pantalla como guía;

Una vez finalizado el proceso, verá un archivo llamado .eslintrc.js con un contenido similar a este

module.exports = {

 env: {

 browser: true,

 es2021: true

 },

 extends: 'standard-with-typescript',

 overrides: [

 ],

 parserOptions: {

 ecmaVersion: 'latest',

 sourceType: 'module'

 },

 rules: {

 }

}

Paso 3: Ejecute eslint

Ejecute este comando para comprobar y eliminar todos los archivos con la extensión .ts;

npx eslint . --ext .ts

Paso 4:Actualice paquete.json

Añada un guión lint en este archivo para realizar el linting automático.

"scripts": {

 "lint": "eslint . --ext .ts",

 },

TypeScript con Node.js: Mejores prácticas

Mantenga TypeScript actualizado: Los desarrolladores de TypeScript siempre están lanzando nuevas versiones. Asegúrese de tener instalada la última versión en su máquina/carpeta de proyecto y benefíciese de las nuevas características y correcciones de errores.
Active el modo estricto: Puede detectar los errores de programación más comunes en tiempo de compilación si habilita el modo estricto en el archivo tsconfig.json. Esto reducirá su tiempo de depuración, lo que redundará en una mayor productividad.
Habilite la comprobación estricta de nulos: Puede capturar todos los errores nulos e indefinidos en tiempo de compilación habilitando las comprobaciones nulas estrictas en el archivo tsconfig.json.
Utilice un editor de código compatible con TypeScript: Existen montones de editores de código. Una buena práctica es elegir editores de código como VS Code, Sublime Text o Atom que soporten TypeScript a través de plugins.
Utilice tipos e interfaces: Con tipos e interfaces, puede definir tipos personalizados que podrá reutilizar en todo su proyecto. Este enfoque hará que su código sea más modular y fácil de mantener.

Recapitulando

Ya tiene la estructura básica de una aplicación creada con TypeScript en Node.js. Ahora puede utilizar los paquetes regulares de Node.js pero aún así, escribir su código en TypeScript y disfrutar de todas las características adicionales que vienen con este último.

Si se está iniciando en TypeScript, asegúrese de comprender las diferencias entre TypeScript y JavaScript.

Tito Kamunya

Autor