TypeScript / librerias de terceros

Bienvenidos sean a este post, hoy veremos como implementar librerias de terceros o modulos externos.

Una de las ventajas principales de Javascript (y de la mayoria de los lenguajes modernos) es que disponemos de una vasta libreria de terceros para descargar e instalar y mejorar nuestros codigos de manera muy practica y simple. La herramienta mas simple para poder instalarlos es mediante npm, el cual es provisto por Node.js y para poder iniciar nuestro entorno debemos usar el siguiente comando en el directorio del proyecto:

$ npm init

Esta es la opción encargada de crear/iniciar nuestro proyecto y para ello nos hara una serie de preguntas y tienen dos posibilidades: las completan o simplemente presionen Enter para que tome los valores predeterminados; al final les pregunta si quieren crearlo, ingresan yes y presionan Enter, con esto creara el archivo package.json basico para poder trabajar, les dejo como hice mi archivo:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (5) typescript
version: (1.0.0)
description: es de ejemplo
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/tinchicus/lenguajes/ts/5/package.json:

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "es de ejemplo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
npm notice
npm notice New major version of npm available! 8.19.4 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice
$

Con todo esto ya tenemos nuestro archivo package.json generado y listo para trabajar, el contenido es lo que nos muestra antes de crearlo, gracias a este archivo ahora podemos instalar nuestra librerias de manera sencilla y para ello debemos usar el siguiente comando:

$ npm install <nombre_libreria>

Esto lo hacemos ediante npm y la opcion install seguido del nombre de la libreria que deseamos instalar, para hacer unas pruebas usaremos a inquirer y donde creamos el archivo package.json ejecutaremos el siguiente comando:

$ npm install inquirer

Tal como lo comentamos anteriormente, una vez finalizado vamos a hacer algunas verificaciones y para ello miremos el codigo de package.json:

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "es de ejemplo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "inquirer": "^9.2.16"
  }
}

Si lo comparan con el original se agrego la seccion dependencies y en este estaran la libreria o modulo junto a la version, todas las que agreguen las encontraran en esta seccion, la version varia dependiendo de la necesidad del proyecto, tenemos varias opciones.

La primera opcion es mediante el asterisco (*) donde equivale a que puede ser cualquier version y por lo tanto la actualizara a la ultima, la segunda opcion es mediante el operador ~, por ejemplo:

  "dependencies": {
    "inquirer": "~9.2.16"
  }

Este no solo usara o actualizara esta version de la libreria sino que lo hara con algunas nuevas, y por ultimo tenemos la opcion que se agrego al codigo originalmente, en este caso le indicamos que puede usar o actualizar la version indicada o inferiores mediante el simbolo ^, por lo general se utiliza esta opcion, todo este procedimiento nos genera dos elementos mas como son el directorio node_modules, el cual contendra todos los modulos/librerias que agregamos, y el archivo package-lock.json, el cual es una copia del archivo package.json, pero que es una copia fiel de todos los modulos instalados con la version utilizada, esta pensado principalmente si necesitamos reinstalar todas las dependencias y para estos casos solo usaremos el siguiente comando:

$ npm install

Hasta aca tenemos todo lo necesario para instalar nuestros modulos en node pero como lo utilizamos en Typescript?.

No es tan complicado como creemos, en realidad es mas similar a los archivos header de C/C++, pero en lugar de usar archivos con extension .h lo hara con archivos .d.ts, sobre esto hablaremos en un instante pero antes debemos hacer una modificacion y para ello ejecutaremos el siguiente comando:

$ npm install --save-dev @types/inquirer

Este se encargara de instalar los archivos de declaracion para nuestro modulo, esto lo instalara dentro del directorio node_modules, en el subdirectorio @types estara el otro directorio llamado inquirer, pero antes de pasar a este archivo hablemos de la opcion –save-dev.

Esta se utiliza para instalar componentes pero en la seccion de desarrollo por lo tanto no sera necesario para la parte de produccion del programa, si miramos el archivo package.json ahora tendra esta seccion:

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "es de ejemplo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "inquirer": "^9.2.16"
  },
  "devDependencies": {
    "@types/inquirer": "^9.0.7"
  }
}

Recuerden que todos los elementos que no sean necesarios para produccion y son para desarrollo se debe usar esta opcion y estos seran agregados en esta nueva seccion. Ya tenemos nuestro archivo de declaracion creado y listo para ser utilizado, por el momento no lo modificaremos ni tampoco veremos su contenido pero sabemos que con esto ya podemos importar nuestros modulos de npm en proyectos de typescript, pero debemos facilitarnos un par de temas, el primero sera para compilarlo en es6.

Para esto debemos utilizar el siguiente comando:

$ tsc --init

Este comando creara un archivo llamado tsconfig.json donde tendremos varios parametros pero nosotros modificaremos uno solo:

"module": "commonjs",

Y lo modificaremos de la siguiente manera:

"module": "es6",

Esto nos permitira compilarlo en este formato, si quieren saber mas sobre este comando les dejo el post donde lo explicamos:

[ Post de proyecto typescript ]

Nuestro siguiente paso sera crear el archivo que usaremos de ejemplo, pueden crear un archivo con el nombre de types.ts, y si bien el nombre no es importante si lo es la extension, dentro de este archivo agregaremos el siguiente codigo:

types.ts

import inquirer from 'inquirer';

inquirer.prompt(
        [
                {
                name: "tu_nombre",
                message: "Cual es tu nombre?"
                }
        ]
).then(rta => {
        console.log(`Respondiste: ${rta.tu_nombre}`);
});

Primero importaremos nuestro modulo al inicio, lo siguiente sera utilizar a prompt de nuestro modulo, este sera usado para ingresar informacion donde le estableceremos dos campos:

• name, sera para informarle donde almacenaremos lo que ingresemos
• message, sera para mostrar en el prompt de ingreso

Este metodo tiene la particularidad que devuelve una promesa, esta es una mecanica de trabajo pensada para funciones asincronicas donde nosotros prometemos que devolveremos un valor sea cierto o no, por esta razon le pasamos un then que sera el encargado de procesar la respuesta y la mostrara en pantalla, si miran usamos la funcion en esta y la variable que usamos para almacenar el ingreso, si quieren saber mas sobre promesas les recomiendo este post:

Solo nos resta compilarlo, para ello simplemente ejecuten tsc y hara el resto, pero tenemos que hacer un paso mas, para ello deben renombrar el archivo generado, types.js, a types.mjs para que node pueda interpretarlo correctamente, con esto ya podemos probarlo y ver su salida:

$ node types.mjs
? Cual es tu nombre? tinchicus
Respondiste: tinchicus
$

Nnta:
Si utilizaron otro nombre para el archivo, lo importante es que deben cambiarlo de .js a .mjs

Esto es un breve resumen sobre como utilizar librerias/modulos en node.js mediante typescript, lo principal es saber que para poder implementarlos correctamente necesitaremos los archivos de declaracion y por lo general se instalan mediante npm install asi como mas adelante ahondaremos en modificaciones sobre los archivos de declaraciones y por que se deben usar.

En resumen, hoy hemos visto que son las librerias de terceros, desde donde realmente las obtenemos, asi como tambien se implementan, las modificaciones que realizan, las modificaciones que debemos realizar antes de nuestro codigo y como compilarlo, espero les haya resultado 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.