TypeScript es un superconjunto tipificado de JavaScript que se compila a JavaScript plano durante el tiempo de ejecución. La naturaleza dinámica de JavaScript no permite detectar resultados inesperados a menos que el programa se haya ejecutado, por lo que el sistema de tipos de TypeScript permitirá detectar dichos errores en tiempo de compilación en lugar de en tiempo de ejecución. Esto significa que cualquier código JavaScript válido es también un código TypeScript equivalente y válido.
TypeScript es tanto un lenguaje como un conjunto de herramientas. Como lenguaje, comprende sintaxis, palabras clave y anotaciones de tipo. Su conjunto de herramientas proporciona información de tipo que el IDE puede utilizar para proporcionar autocompletado, sugerencias de tipo, opciones de refactorización, tipado estático y otras características.
El ecosistema de TypeScript y JavaScript ofrece diversas herramientas y bibliotecas que le ayudan a construir su aplicación más rápidamente. Por ejemplo, es probable que utilices la biblioteca Express para configurar tu API cuando crees un servidor. Express te proporciona funciones para configurar y gestionar tu servidor HTTP a escala.
Sin embargo, estas librerías están desarrolladas con vanilla JavaScript. Detrás de las escenas, su servidor Express se ejecuta en TypeScript o JavaScript sin procesar. Esto significa que las funciones y métodos que Express proporciona abstraen la lógica de bajo nivel del lenguaje base vanilla. Su servidor no interactúa directamente con la lógica base que proporciona TypeScript o JavaScript; en su lugar, Express accede al código vanilla y lo transforma en código escalable que le permite reducir su base de código.
El uso de estas bibliotecas acelera el tiempo de desarrollo al tiempo que reduce el código redundante; la ventaja que proporcionan es indiscutible. Sin embargo, es posible que desee aprovechar los "huesos desnudos" de TypeScript y ejecutar sus aplicaciones utilizando el código vainilla. Esto te ayudará a ejecutar el servidor más puro sin utilizar librerías como Express.
Esta guía demostrará cómo utilizar TypeScript para crear una API REST utilizando únicamente los módulos nativos. El proyecto pretende ayudarte a aprender cómo hacer un servidor HTTP en Node.js sin usar librerías adicionales.
Cómo configurar TypeScript con Node.js
Este tutorial utilizará Node para ejecutar TypeScript. Node es un tiempo de ejecución(Runtime) de JavaScript diseñado para crear aplicaciones escalables y asíncronas impulsadas por eventos.
Adelante, instala el tiempo de ejecución de Node en tu ordenador. Luego, crea una carpeta de proyecto e inicializa tu proyecto usando npm init -y.
Vamos a configurar Node para ejecutar código TypeScript. Necesitas las dependencias de TypeScript disponibles para Node. Para ello, instala el paquete TypeScript Node usando el siguiente comando:
Ahora puede utilizar su proyecto TypeScript usando tsc --init. Esto creará un archivo tsconfig.json con las opciones de compilación de TypeScript por defecto.
tsc --init puede requerir que instales TypeScript globalmente en tu ordenador usando el comando npm install -g typescript.
Mientras se ejecuta el código TypeScript, es necesario ejecutar las dependencias anteriores utilizando un comando Node. Para ello, utiliza un motor de ejecución de TypeScript y una biblioteca REPL llamada ts-node. Ts-node te permite ejecutar un comando único que apunta a los archivos .ts, los compila y los ejecuta en el navegador.
Sigue adelante e instala ts-node así:
Luego, edita las etiquetas de tu paquete.json:
Esto significa que ts-node apuntará al archivo /src/index.ts como archivo principal y ejecutará el código .ts y los módulos a los que index.ts apunte.
Por último, añade una biblioteca @types/node a tu proyecto. Node se ejecuta en JavaScript, y este proyecto utiliza TypeScript. Por lo tanto, necesitas añadir definiciones de tipos para que Node ejecute TypeScript.
@types/node contiene definiciones de TypeScript incorporadas. Para instalarlo, ejecute:
Cómo crear un sencillo servidor HTTP TypeScript
La configuración de TypeScript Node está lista para ejecutar tu código. Veamos cómo crear un servidor HTTP básico que se ejecute utilizando el módulo nativo HTTP.
Primero, crea una carpeta src y añade un archivo index.ts. Luego, configura un servidor HTTP básico de TypeScript usando Node con los siguientes pasos.
Para empezar, importa el módulo nativo HTTP:
Para crear un servidor y un cliente HTTP, es necesario utilizar el comando HTTP from "http". Esto le permitirá tener las funciones necesarias para crear un servidor.
A continuación, cree un servidor local desde el que recibir datos:
Configure una instancia de servidor utilizando la función createServer(). Esta función permite emitir peticiones y respuestas HTTP. El código res.write permite especificar el mensaje entrante que el servidor debe ejecutar. res.end() termina el conjunto de peticiones entrantes incluso cuando no se escriben datos en el cuerpo de la petición o se envían por la respuesta HTTP.
A continuación, inicie el servidor y escuche las conexiones:
listen() creará un servidor TCP localhost escuchando en el puerto 3000. En este caso, 3000 debe ser el puerto no utilizado al que se asignará inmediatamente el servidor una vez que comience a escuchar conexiones. El método listen() es asíncrono, y gestiona cómo el servidor acepta nuevas conexiones mientras sale de las actuales. Cuando todas las conexiones han terminado, el servidor se cierra de forma asíncrona. Si se produce un error, el servidor será llamado con un Error y se cerrará inmediatamente.
Una vez que ejecutes tu aplicación usando npm start, el servidor se iniciará y podrás acceder a él en http://localhost:3000/. El mensaje Hola Mundo! especificado en el cuerpo de la respuesta será servido en tu navegador. Esta API HTTP básica es de muy bajo nivel y se ejecuta en lo más básico de TypeScript.
Cómo crear un API REST CRUD con TypeScript
El ejemplo anterior sólo utilizó el módulo HTTP para establecer un servidor básico. Vamos a sumergirnos y construir una API REST que utilice los métodos CRUD (Por sus siglas en ingles: crear, leer, actualizar y eliminar).
Para configurar esta API, empieza por almacenar nuestra lista de tareas pendientes de ejemplo en un archivo JSON. A continuación, cree un archivo store.json dentro de la carpeta src y añada la siguiente lista de tareas:
La API de la lista de tareas hará referencia a estos datos para realizar métodos basados en el servidor como GET, POST, PUT y DELETE(CRUD).
Configuración de la estructura de tareas
Al usar TypeScript, puedes usar clases, herencia, interfaces y otras formas orientadas a objetos. JavaScript utiliza clases, pero estas clases son plantillas para los objetos de JavaScript.
JavaScript no tiene interfaces, porque sólo están disponibles en TypeScript. Las interfaces te ayudan a definir tipos que te mantienen dentro de los márgenes de tu código. Esto asegura que los parámetros y las estructuras de las variables estén fuertemente tipados.
Las interfaces básicamente reflejan la estructura de un objeto que puede ser pasado a las clases como un parámetro o implementado por una clase. Definen la estructura y especifican los tipos una sola vez. Así, puedes reutilizarlas en cualquier parte de tu código sin tener que duplicar los mismos tipos cada vez.
Puedes utilizar interfaces para reflejar la estructura de los datos de la tarea. Esto especificará la estructura del objeto con el que quieres que interactúe tu API. En este caso, cuando se llama a la API, se obtiene la información de la tarea con la misma estructura que refleja los datos de la tarea.
Utilicemos interfaces para definir qué propiedades debe tener la API de la lista de tareas. Crea un nuevo archivo dentro del directorio src y llámalo ITask.ts.
Dentro de este archivo, define la estructura de la tarea como tal:
Esto creará un modelo que define los datos del dominio. Asegúrate de exportarlo para que otros módulos del proyecto puedan acceder a sus propiedades.
Añadir los controladores de la API
Un controlador se utiliza para manejar las solicitudes HTTP que devuelven una respuesta HTTP. La función controlador de la API maneja estas solicitudes para un punto final. Un controlador regula la estructura definida en ITask.ts y los datos que un endpoint de la API devuelve al usuario. En este caso, cada controlador se encargará de la lógica que maneja cada operación CRUD.
Sigue adelante y crea un archivo controller.ts dentro del directorio src. Luego, agrega las siguientes importaciones y crea cada controlador CRUD de esta manera:
Tareas de búsqueda
Crear una función getTasks(). Esta función obtiene todas las tareas listadas en el archivo store.json:
El usuario envía una petición utilizando un endpoint que apunta a la función getTasks(). Este controlador recibirá esa petición y lo que esa petición quiere hacer. Entonces, la interfaz ITask establecerá los datos y dará la respuesta. El controlador getTasks() obtendrá esta respuesta y pasará sus datos al endpoint ejecutado. En este caso, el controlador leerá los datos almacenados en el archivo store.json y devolverá la lista de tareas.
Añadir una nueva tarea
Para empezar, cree una función llamada addTask(). Este controlador addTask() manejará la lógica de añadir una nueva tarea, así:
En el código anterior, un usuario envía una solicitud utilizando un endpoint que apunta a la función AddTasks(). Este controlador leerá primero los datos de la solicitud, que es añadir una nueva tarea. Luego, lee el archivo store.json y lo prepara para recibir nuevas entradas de datos. La interfaz ITask establecerá las propiedades necesarias para crear una nueva tarea y dará la respuesta a AddTasks().
Si la solicitud enviada coincide con la estructura establecida por ITask, AddTasks() aceptará su mensaje y escribirá los detalles de la nueva tarea en el archivo store.json.
Actualizar una tarea
Es posible que desee actualizar los valores de una tarea existente. Para ello, tendrá que enviar una solicitud para informar al guardado de que desea actualizar algunos valores.
Para ello, cree una función updateTask() como la siguiente:
Esto comprobará los datos enviados con los datos existentes almacenados en el archivo store.json. En este caso, el servidor comprobará si el valor del ID coincide con alguna tarea existente. ITask comprobará si los valores de actualización coinciden con la estructura establecida, y devolverá una respuesta a updateTask(). Si es así, el valor se actualizará y se enviará una respuesta al endpoint solicitante.
Borrar tarea
Del mismo modo, se puede eliminar una tarea del almacén. Este es el código que le ayudará a enviar una petición que ejecute una solicitud de eliminación:
Por último, exporte estos controladores para que otros módulos de la aplicación puedan acceder a ellos:
Configurar el servidor y las rutas de las tareas
Una vez que los controladores están configurados, es necesario crear y exponer varios endpoints para crear, leer, actualizar y eliminar tareas. Los endpoints son URLs que ejecutan los datos solicitados.
Este endpoint se utilizará en combinación con un método HTTP para realizar una acción específica sobre los datos. Estos métodos HTTP incluyen GET, POST, PUT y DELETE. Cada método HTTP se asignará a un único controlador que coincida con su enrutamiento definido.
Navegue a su archivo ./src/index.ts y establezca sus puntos finales de método como tales:
Esto define cuatro puntos finales:
Esto también expondrá este punto final en el host local. El servidor se asignará al puerto 3000.
Una vez que esté en funcionamiento, escuchará las conexiones basadas en las rutas de ejecución.
La API de la lista de tareas está lista, y puedes ejecutarla usando npm start y empezar a probar diferentes puntos finales.
Conclusión
Ejecutar tu aplicación con código vanilla te da una idea del código que ejecuta la base de tus aplicaciones. Vanilla TypeScript te ayudará a crear paquetes que otros desarrolladores pueden utilizar para acelerar su flujo de trabajo de desarrollo.
La mayor desventaja de cualquier código vanilla es que tendrás que escribir muchas líneas de código para ejecutar una tarea media. La misma tarea puede seguir ejecutándose utilizando los paquetes que le permiten escribir unas pocas líneas de código. Esto significa que al ejecutar código vainilla, tendrás que gestionar la mayoría de las operaciones dentro de tu aplicación.