TypeScript / Opciones integradoras del compilador

Bienvenidos sean a este post, hoy veremos unas opciones del compilador.

Estas opciones nos permiten configurar el compilador para integar mejor a javascript y typescript. Estas nos permiten incluir archivos de javascript dentro del mismo proyecto de typescript, asi como tambien nos permite hacer chequeos en archivos de javascript. Aunque tambien nos permitira generar archivos de declaracion desde el codigo de typescript.

Hasta ahora siempre que trabajamos con nuestros codigos generados siempre lo hicieron al lado del archivo de typescript pero en tsconfig.json tenemos una opcion para ubicar estos codigos generados en otro directorio. Esta se llama outdir y en el archivo JSON deben descomentar la siguiente linea:

"outDir": "./",

Y para que genere los archivos en otro archivo debemos modificarlo para que apunte a ese directorio, les dejo un ejemplo:

"outDir": "./dist",

A partir de este momento todos los archivos generados al momento de compilar se mandaran a este directorio. Esto esta pensado principalmente para poder hacerlo mas distribuible al codigo generado, mantener separados al codigo javascript del typescript y correr otros pasos post-compilacion. Esta es una buena y conveniente opcion cuando tenemos solo codigos de typescript pero que sucede cuando tenemos un codigo mixto entre typescript y javascript? Aqui entra en accion otra opcion llamada allowJs dentro el archivo tsconfig.json, para ello deben ir a este archivo nuevamente y descomentar la siguiente linea:

"allowJs": true,

Con esta opcion y la otra habilitada ahora no solamente nos enviara todos los archivos generados al nuevo directorio sino que tambien agregara en este a los codigos de javascript que contengan.

Otra opcion interesante es la que nos genera los archivos de declaracion pero para entender el concepto vamos a generar un ejemplo y para ello deben crear un nuevo directorio y en este ejecutaremos el siguiente comando:

$ tsc --init

Este nos creara el archivo tsconfig.json y dentro primero modificaremos la siguiente linea:

"target": "es2016",

De la siguiente manera:

"target": "es5",

Typescript de manera predeterminada trabaja con ES2016 pero ahora lo forzaremos a ttrabajar con ES5 para ver un tema que mencionaremos luego. Lo siguiente sera descomentar las siguientes lineas en el mismo archivo:

"allowJs": true,
"declaration": true,
"outDir": "./dist",

Aqui tenemos dos conocidos como son allowJs y outdir, a su vez hagan lo que hicimos anteriormente en outdir para tener en otro directorio el codigo generado. Pero habran notado que tenemos una nueva opcion habilitada. Al habilitarla nos generara un archivo de declaracion para cada uno de los codigos fuentes. Para entender el concepto vamos a crear un archivo con el nombre de es6.ts y le agregaremos el siguiente codigo:

es6.ts

class MiClaseES6 {
        _id: number;
        constructor(id: number) {
                this._id = id;
        }
        get id() { return this._id; }
}

Este es un codigo simple donde solo definimos una clase, con una propiedad, el constructor y un metodo para obtener el valor de id. Bien simple para no complicarlo en demasia, lo siguiente sera compilarlo (recuerden que pueden hacerlo solamente ejecutando tsc cuando generan el archivo JSON) para que nos genere todos los archivos y directorios. Si verifican no solo nos genero el directorio dist sino tambien el archivo de declaracion, veamos su contenido:

dist/es6.d.ts

declare class MiClaseES6 {
    _id: number;
    constructor(id: number);
    get id(): number;
}

Tal cual como lo vinimos viendo en los posts anteriores, solamente la declaracion de la clase que posee, y por curiosidad veamos el codigo generado para el javascript:

dist/es6.js

"use strict";
var MiClaseES6 = /** @class */ (function () {
    function MiClaseES6(id) {
        this._id = id;
    }
    Object.defineProperty(MiClaseES6.prototype, "id", {
        get: function () { return this._id; },
        enumerable: false,
        configurable: true
    });
    return MiClaseES6;
}());

Como nosotros trabajamos con una clase con caracteristicas propias del ES6 al momento de convertirlo, el compilador nos lo adapta para que pueda ser utilizado por este, lo cual permite que el siguiente comentario gane todo su significado:

Permitir que todos los archivos de Javascript sean compilados

Para ir redondeando este tema, vamos a tomar nuevamente nuestro archivo de typescript y le agregaremos el siguiente bloque de codigo:

interface IFiltrable {
    nombre?: string;
}
function filtroSindefinir<T extends IFiltrable>
    (i: Array<T>): Array<T>
{
    let o: Array<T> = [];
    for (let item of i) {
        if (item.nombre?.length) {
            o.push(item);
        }
    }
    return o;
}

Aqui agregamos una interfaz para un tipo de dato y luego una funcion para poder filtrar, en este caso usaremos a la interfaz anterior y el valor que recibira sera un array de este tipo y devolvera uno de este. Luego en el bloque usaremos un for para pasar por todos los elementos del array y aquel que posee un tamaño sera ingresado al array que usaremos de devolucion. Esto nos servira para ver como genera la declaracion en el archivo para una interfaz y una funcion. Si lo compilan y van al archivo veran lo siguiente:

dist/es6.d.ts

declare class MiClaseES6 {
    _id: number;
    constructor(id: number);
    get id(): number;
}
interface IFiltrable {
    nombre?: string;
}
declare function filtroSindefinir<T extends IFiltrable>(i: Array<T>): Array<T>;

De vuelta lo msmo, solamente nos genero la declaracion de cada uno de sus elementos. Obviamente es una herramienta muy poderosa que nos ahorrara mucho tiempo a la hora de poder trabajar con nuestros codigos sin necesidad de preocuparnos por la creacion cuando los necesitemos.

En resumen, hoy hemos visto algunas opciones integradoras del compilador, desde ubicar en otro destino los archivos javascript generados, asi como tambien como poder enviar los que sean parte del codigo y por ultimo como pudimos hacer que el compilador genere los archivos de declaracion por nosotros. Espero les haya sido 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.