TypeScript / Proyecto de TypeScript

Bienvenidos sean a este post, hablaremos sobre algo esencial de este.

Si no conocen a node.js, este trabaja mediante proyectos y esecncialmente sobre un archivo de tipo JSON llamado package.json donde almacenaremos toda la informacion de este, desde datos del autor hasta dependencias y otras secciones mas, en TypeScript tenemos algo similar.

Tambien existe un archivo de configuracion, tambien de tipo JSON pero con el nombre de tsconfig.json, para poder crear este archivo debemos usar el siguiente comando:

$ tsc --init

Este generara automaticamente un archivo basico, observemos la salida que nos devuelve el comando anterior:

$ tsc --init

Created a new tsconfig.json with:
                                                                             TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig
$

Estas seran las propiedades que se habilitaran en el archivo pero si tomamos una mirada en este veremos que posee mas lineas, tomemos un segmento para ver:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

Si observan casi todas las lineas estan comentadas, salvo la primera que nos devolvio la salida, es decir que el resto de las opciones podemos habilitarlas para nuestra conveniencia simplemente desactivando el comentario inicial y a su vez tienen otro comentario donde se explica la funcion de cada linea, si siguen observando el archivo veran que las sin comentar son todas aquellas que nos devolvio la salida de nuestro comando, con esto tenemos la base de nuestro proyecto realizado y como curiosidad si utilizaran una IDE como Visual Studip al momentto de modificar estos campos nos brindarann las opciones correctas de manera automatica facilitando la configuracion de las mismas.

Pero cual es la utilidad de este archivo? Bueno, en este caso tiene una muy particular y para ello debemos repasar el codigo del ejemplo del post anterior, sino lo tienen deben simplemente crear un nuevo archivo con el nombre de hola.ts y agrregarle el siguiente codigo:

hola.ts

var t1 = "Hola";
var t2 = "Typescript";
console.log(`${t1}, ${t2}`);

Simplemente mostrabamos el resultado de concatenar dos cadenas en una template string de ES6 para mostrarla en pantalla, pero si lo compilabamos nos convertia el archivo de la siguiente manera:

var t1 = "Hola";
var t2 = "Typescript";
console.log("".concat(t1, ", ").concat(t2));

Nos lo convertia a una version compatible de CommonJS para que funcione sin ningun inconveniente pero que sucede si no queremos esto? aqui entra en accion nuestro archivo tsconfig.json pero antes debemos volver al archivo hola.ts y modificarlo de la siguiente manera:

"use strict";
var t1 = "Hola";
var t2 = "Typescript";
console.log(`${t1}, ${t2}`);

La unica modificacion es el agregado de la linea «use strict» la cual se encargara de tomar la configuracion del archivo tsconfig.json y en base a esta transpilara a nuestro archivo pero antes de hacerlo debemos ir al archivo tsconfig.json y buscaremos la siguiente linea:

"module": "commonjs",

Y lo modificaremos de la siguiente manera:

"module": "es6",

En este caso le especificamos que el tipo de modulo generado debe ser de tipo es6 en lugar de commonjs, con nuestro archivo modificado podemos pasar a compilarlo, de ahora en mas lo llamare asi, para ver como sera su salida pero ahora no es necesario especificar el nombre del archivo sino que simplemente deben pasar el comando de compilacion:

tsc

Pero tambien podemos usar la siguiente opcion al momento de ejecutarlo:

tsc -w

Les generara una salida como la siguiente:

$ tsc -w
[08:15:31] Starting compilation in watch mode...

[08:15:41] Found 0 errors. Watching for file changes.

A diferencia de las formas anteriores nos notificara algunos temas relacionados a la compilacion, pero si no les devuelve presionen Ctrl+C para recuperarlo, para ir finalizando si miramos nuestro archivo a diferencia de lo comentado antes de empezar con el ejemplo no se modifico el codigo original y por lo tanto ahora nuestro nuevo codigo sera el mismo y compatible con todas las posibilidades que nos brinda ES6.

En resumen, hoy hemos visto el concepto de proyecto de TypeScript, como se genera, que genera, que posibilidad nos brinda, asi como tambien unas modificaciones para poder realizar distintas implementaciones en nuestros codigos generados, 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.

Donation

It’s for maintenance of the site, thanks!

$1.50