TypeScript / Configuracion anidada

Bienvenidos sean a este post, hoy veremos una particularidad con la configuracion de nuestros proyectos.

Sabemos que nuestros proyectos podemos iniciarlos con tsc –init y este genera un archivo llamado tsconfig.json. Dentro de este tenemos varias configuraciones para poder manipular nuestro proyecto. En el post anterior vimos como modificando algunas podiamos establecer el destino donde el archivo de javascript es generado (outdir), como permitir archivo de javascript en nuestros codigos (allowJs) o la encargada de generar los archivos de declaracion de nuestros codigos (declaration) pero tenemos muchas opciones mas para modificar y activar o desactivar otras opciones a la hora de configurar nuestro compilador.

Pero en el post de hoy nos centraremos en como mediante configuraciones anidadas podremos aplicar distintas configuraciones en distintos proyectos. Para probarlo vamos a crear un proyecto simple, lo primero que deben hacer es crear un directorio con cualquier nombre y dentro de este deben ejecutar el comando tsc –init, para generar el archivo tsconfig.json, y luego en el mismo directorio crearemos otro archivo llamado ejemploTS.ts y le agregaremos este codigo:

ejemploTS.ts

console.log("Archivo ejemploTS.ts");

Ahora dentro de este directorio crearemos otro directorio pero en este crearemos dos archivos, el primero sera uno con el nombre de tsconfig.json pero lo dejaremos en blanco, por el momento, y luego crearemos otro archivo con el nombre de ejemploJS.js y le agregaremos el siguiente codigo:

ejemploJS.js

console.log("Archivo ejemploJS.js");

La estructura de nuestro proyecto es la siguiente:

.
├── dir
│   ├── ejemploJS.js
│   └── tsconfig.json
├── ejemploTS.ts
└── tsconfig.json

Nuestra primera modificacion la haremos en el archivo tsconfig.json del directorio raiz y en este descomentaremos la opcion outdir y la modificaremos de la siguiente manera:

"outDir": "./dist",

Esto es para que nuestros archivos compilados sean ubicados en ese directorio, si probamos de compilar el proyecto del directorio raiz solo lo hara con el archivo .ts e ignorara al contenido del subdirectorio, especialmente por ser un archivo .js, y el archivo generado se ubicara en el directorio dist. Nuestra siguiente modificacion sera en el archivo tsconfig.json del otro directorio. En este agregaremos el siguiente codigo:

{
    "extends": "../tsconfig",
    "compilerOptions": {
        "outDir": "../dist",
        "allowJs": true,
        "strict": false
    }
}

La primera opcion hara que tomemos la configuracion del compilador del archivo raiz pero la siguiente opcion nos permite establecer opciones para este proyecto, anulando las opciones de origen pero sin afectarlas en el otro proyecto, y en este le diremos que vaya al archivo de destino del otro proyecto, asi como tambien que perrmita archivos de javascript y no se estricto en la compilacion. Dentro del subdirectorio pueden probar a compilarlo y veran que funcionara perfectamente y la estructura de nuestro proyecto quedara de la siguiente manera:

.
├── dir
│   ├── ejemploJS.js
│   └── tsconfig.json
├── dist
│   ├── ejemploJS.js
│   └── ejemploTS.js
├── ejemploTS.ts
└── tsconfig.json

Como pueden observar tomamos todo lo necesario del proyecto raiz pero modificamos lo pertinente al nuevo proyecto. Con esto tenemos la posibilidad de poder tener una configuracion general y poder crear herederos de esta pero ajustando a las necesidades de cada proyecto. Esto es solo el comienzo en los proximos posts veremos mas temas.

En resumen, hoy hemos visto configuracion anidada, que es, para que sirve, como se utiliza, un ejemplo practico para analizar los beneficios de manejar de esta manera. 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.