Creación de una librería TypeScript

Hace casi dos años que publique un tutorial para crear una librería en JavaScript. Ahora es el momento de actualizar esa serie usando TypeScript. Un superconjunto de JavaScript que añade tipos estáticos y objetos basados en clases. Lo que ofrece múltiples ventajas a la hora de escribir y mantener el código ya que podemos utilizar estas características para evitar muchos de los errores más habituales en tiempo de ejecución. Además, al ser un superconjunto del lenguaje todo el código que tengamos escritos para JavaScript es automáticamente compatible con TypeScript. Lo que permite reutilizar el código existente. Sin olvidar que conociendo JavaScript se tiene conocimientos básicos de TypeScript. Así que puede ser una buena idea mover nuestros desarrollos en JavaScript a TypeScript para aumentar la productividad. Siendo un punto de partida aprender a construir una librería TypeScript, ya que estos son los códigos que más se utilizan y necesitan mayor mantenimiento.

¿Por qué TypeScript?

La idea principal para comenzar a codificar en TypeScript en lugar de JavaScript es para facilitar el mantenimiento del código y evitar errores. Porque al ser un lenguaje con tipos estáticos no permite algunos de los errores más habituales que solo se pueden ver en tiempo de ejecución en JavaScript. Además, amplía las características de la programación orientada a objetos, lo que nos permite crear código más estructurado.

Qué ventajas ofrece los tipos estático en TypeScript

En TypeScript al definir una variable se le asocia un tipo de data, que puede ser un tipo booleano, numérico, cadena de texto o cualquier otro. Al mismo tiempo que al definir una las funciones o métodos también se puede indicar los tipos que soporta y los que devuelve. Valores que se comprueban en tiempo de compilación, por lo que si hay un error lo veremos antes de que aparezca en tiempo de ejecución. Tanto una variable que no corresponde al tipo o una función que no devuelve un valor.

Además, conocer los tipos nos puede ayudar a la hora de recordar los parámetros que se le puede pasar a una función. Por lo que con al conocerse los posibles datos que admite una función un editor de texto moderno nos puede ayudar indicándonos cuales son los valores que se pueden pasar en cada caso. Algo que se puede ver especialmente con las opciones de las funciones.

¿Cómo interpreta el navegador TypeScript?

Los navegadores no interpretan código TypeScript. Únicamente Deno y Node, con extensiones, lo pueden interpretar directamente. Para que un navegador entienda TypeScript es necesario compilarlo a JavaScript. Con la ventaja de que el compilado se puede realizar a diferentes versiones del estándar. Lo que nos permite compilar el código para que funcione incluso en navegadores como Internet Explorer. Un navegador que aún es el navegador estándar en muchos entornos empresariales.

El hecho de compilar el código no evita tener que pensar si el método que usamos está o no soportado por el navegador. Por ejemplo, funciones flechas, clases, etc.

Preparación del entorno para trabajar con TypeScript

Para trabajar con TypeScript necesitamos instalar Node en nuestro ordenador. Si no lo tenemos instalado debemos ir a la página del proyecto y descargar la versión para nuestro sistema operativo. Generalmente la versión LTS es la recomendada para la mayoría de los usuarios.

Una vez instalado Node, abrimos una terminal e instalamos TypeScript con npm de forma global. Así tendremos el compilador disponible en todos nuestros proyectos

npm install -g typescript

Si todo sale bien, podemos ver la versión que tenemos instalada con el comando

tsc --version

Lo que nos debería dar como resultado la versión 4 o posterior.

¡Hola Mundo! en TypeScript

Antes de crear una librería TypeScript, podemos ver como crear el famoso programa ¡Hola Mundo! en TypeScript. Simplemente tenemos que crear un archivo con extensión .ts que contenga la siguiente línea de código.

console.log('¡Hola Mundo!');

Fichero al que se puede llamar hola.ts. Para poder ejecutar este código en un navegador o Node solamente tenemos que compilarlo. Para lo que se puede usar la siguiente línea

tsc hola.ts

Con esto se creará un archivo hola.js con código JavaScript válido. Código que se puede ejecutar con en Node con el comando

node hola.js

¡Los dos archivos tienen el mismo código!

Efectivamente, en este caso tan sencillo lo "único" que hace el compilador de TypeScript es cambiar la extensión del archivo. Pero esto no es así si usamos características del lenguaje que no existen en JavaScript, como pueden ser los objetos. Así una versión basada en objetos de ¡Hola Mundo! en TypeScript puede ser el siguiente archivo:

class Hola {
    mensaje: string;

    constructor(mensaje: string) {
        this.mensaje = mensaje;
    }

    hola() {
        console.log(`¡Hola ${this.mensaje}!`);
    }
}

const hola = new Hola('Mundo');
hola.hola();

Fichero que al compilar se convierte en el siguiente:

var Hola = /** @class */ (function () {
    function Hola(mensaje) {
        this.mensaje = mensaje;
    }
    Hola.prototype.hola = function () {
        console.log("\u00A1Hola " + this.mensaje + "!");
    };
    return Hola;
}());
var hola = new Hola('Mundo');
hola.hola();

Podemos ver que lo primero que hace es convertir la clase en una función. Ya que las clases no existen en JavaScript (no hasta que se introdujeron en ECMAScript 2015, estándar que no todos los navegadores no soportan). Si nos fijamos en la línea donde se emite el mensaje por consola, se puede ver que ha cambiado la interpelación por una concatenación de caracteres. Además el símbolo ! se ha reemplazado por su código, con lo que mejora la compatibilidad del código generado.

¿Es necesario compilar siempre?

En depuración puede ser tedioso compilar el código cada vez que deseamos probar un cambio. Por eso en Node existe el paquete ts-node con el que se puede ejecutar directamente código TypeScript si la necesidad de compilar. Paquete que se puede instalar globalmente para tenerlo disponible para todos los proyectos. La instalación se puede hacer como es habitual en Node mediante un comando npm.

npm install -g ts-node

Lo que permite usar el comando ts-node para ejecutar nuestro código

ts-node hola.ts

Al ejecutar el comando podemos notar que tarda un poco en comenzar a ejecutar el código. Lo que es normal ya que el código TypeScript es traducido a JavaScript de forma transparente para nosotros. Otra opción es usar Deno, el cual permite ejecutar directamente código TypeScript.

Conclusiones

En esta primera entrada de la serie hemos visto algunas de las ventajas de TypeScript y cómo trabajar con en Node con él. En las siguientes entregas veremos cómo estructurar el trabajo para crear una librería TypeScript. Empezando la semana que viene con la creación del proyecto TypeScript en Node.