TypeScript | Javascript – 2nd Edition #2

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos.

Lo primero que haremos es crear un archivo. Para esto utilizaremos la consola de VS Code para generarlo por medio siguiente comando:

tsc --init

Este comando no creará un archivo que en su interior contendrá algo parecido a lo siguiente:

{
  "compilerOptions": {
/* Basic Options */
"target": "es5",   
"module": "commonjs",  
"strict": true,
     "sourceMap": true   
 }
}

Si bien este archivo tiene muchas opciones de configuración las que por default están activas son las 3 que vemos en el cuadro anterior. A simple vista vemos la propiedad “target” que es la que indicará que version de ECMAScript usará para crear el JavaScript final.

Ahora crearemos nuestro primer archivo de TypeScript. Los archivos TypeScript poseen la extensión “.ts”. Lo haremos desde el icono de VS Code, creamos el archivo app.ts:

y dentro de este archivo pondremos nuestro código:

class InitApp{
public static main(){
     console.log("Hola Mundo");
     return 0;
}
}

InitApp.main();

Nuestra aplicación no hace nada muy difícil. Solamente mostrará en consola el mensaje “Hola Mundo!”. Veamos qué pasa cuando compilamos el código. Para hacerlo ejecutaremos en la consola el siguiente comando indicando el nombre de nuestro archivo ts:

tsc app.ts

Como resultado tendremos un nuevo archivo app.js que es el resultado de la transpilación:

A simple vista vemos que el código tal vez es un poco más extenso. Pero eso no debe preocuparnos ya que este nuevo código correrá sin ningún problema en los navegadores que soporten el ECMAScript que le indicamos el archivo de configuración.

Vamos hacer que nuestro codigo falle, no hay que preocuparse por el momento por cosas que veamos y no entendamos lo veremos en los siguientes post. Para darles un ejemplo agregaremos 2 líneas de código:

class InitApp{
public static main(){
          
         let msg:string;
         msg= 1;

         console.log(msg);
...

En la declaración estamos diciendo que la variable msg es del tipo string, pero, en la línea siguiente le estamos asignando un valor numerico. Automáticamente el VS Code nos indicará que la asignación no es válida gracias al Intellisense que viene con el.

También podemos ejecutar la compilación por medio de consola para comprobar si realmente es un error. Al ejecutar la compilación por medio del comando tsc podemos ver el mensaje de error:

Corregiremos nuestro código para que deje de errar y lo ejecutaremos:

class InitApp{
public static main(){
          
         let msg:string;
         msg= "Hola Mundo!";

         console.log(msg);
...

Para ejecutarlo usaremos Node.Js junto al siguiente comando:

node app.js

Nuestra aplicación está funcionando correctamente. Ya tenemos nuestra primer app funcionando de la mano de TypeScript.

Tal vez sea molesto estar ejecutando todo el tiempo el comando tsc por consola cada vez que hacemos una modificación e inclusive obliga a tener una consola externa o tener abierta la consola VS Code la cual nos quita espacio de trabajo. Para esto tenemos 2 opciones:

Opción 1

El comando tsc tiene un opción muy interesante que es el comando -w. Este comando hace que el tsc quede en modo watcher. Cada vez que guardemos un archivo el tsc detectara el cambio y transpilara el código.

Opción 2

La segunda opción es configurar una tarea en VS Code, presionando f1 nos abrirá la ventana de “Command Palette” y escribiremos Run Build Tanks:

Nos preguntará sobre qué archivo y elegiremos ts.config. Una vez hecho lo anterior nos creará una carpeta nueva llamada .vscode y dentro un archivo tasks.json donde veremos algo parecido a lo siguiente.

{ 
    "version": "2.0.0",
    "tasks": [
        {
         "type": "typescript",
         "tsconfig": "tsconfig.json",
         "problemMatcher": [
           "$tsc"        
          ],
         "group": {
             "kind": "build",
             "isDefault": true
         }
       }
    ]
}

Ahora podemos usar la combinación de teclas ctrl + shift + b para ejecutar la compilación.

Conclusión

Hemos dado nuestros primeros pasos en el mundo de TypeScript, explorando algunas de sus características clave y familiarizándonos con las herramientas disponibles. En nuestro próximo artículo, nos sumergiremos en una introducción más profunda al lenguaje.