Hola, Mundo con TypeScript

En el artículo anterior vimos un breve resumen, por encima, de lo que es TypeScript, y aprendimos a preparar nuestro ordenador para trabajar con este lenguaje.

En este artículo, vamos a ver cómo crear nuestro primer código con TypeScript, cómo transpilarlo a JavaScript, y a exponer algunos conceptos fundamentales, como son, por ejemplo, las opciones de compilación.

Vas a ver que trabajar con TypeScript es fácil y, dadas las prestaciones que ofrece, sumamente interesante. Espero que este lenguaje te guste tanto como a mí. Algunas veces, los de Microsoft hacen algo bien 😛 . De hecho, para este tipo de proyectos, yo empleo, cada vez con más frecuencia, el Visual Studio Code, un IDE gratuito, bastante bueno, de los chicos de Redmond, que puedes obtener en este enlace. Sin embargo, en estos artículos nos centraremos en el código, no en el funcionamiento del IDE, salvo que, puntualmente, haya algún aspecto específico que me parezca interesante comentar.

EL ESCENARIO

Vamos a preparar un directorio en el que meter nuestro primer proyecto TypeScript. Lo vamos a hacer a partir de la raíz de nuestros proyectos web. En mi caso, como trabajo con Windows y Xampp, la ruta raíz de trabajo es c:/xampp/htdocs/. Si tú usas, por ejemplo, Wamp, tu ruta raíz podría ser c:/wamp/www/.  En un equipo Linux, por ejemplo, seria /var/www/html/. En cualquier caso, vamos a crear un directorio llamado hola_mundo_ts.

Lo primero, al igual que cuando trabajamos con gulp, es inicializar el package.json, tecleando, en la consola (en la raíz de nuestro proyecto), lo siguiente:

npm init -y

A continuación, lo que tenemos que hacer es instalar el transpilador de TypeScript de forma local al proyecto. En el artículo anterior aprendimos a instalarlo de forma global al equipo (con el modificador -g). Sin embargo, es posible que tengas problemas para usarlo desde un proyecto concreto, por lo que, en cada nuevo proyecto, lo instalaremos de forma local al mismo. Es un poco al estilo de lo que ocurre con gulp. En teoría, teniéndolo instalado globalmente funciona sin problemas, pero, en algún caso concreto, podría no ser así. Por lo tanto, una vez creado el directorio del proyecto, abre la consola de mandatos y teclea:

npm install typescript

Ahora teclea en la consola (sin salir de la raíz de tu proyecto), lo siguiente:

tsc --init

La consola te responderá algo parecido a lo siguiente:

message TS6071: Successfully created a tsconfig.json file.

Te informa de que se ha creado un fichero llamado tsconfig.json. Ábrelo con tu editor de textos favorito. Casi al principio vas a encontrar la siguiente línea:

"target": "es5",

Modifícala para que quede así:

"target": "es2015",

Esto te permitirá transpilar tus códigos TypeScript al estándar ES6, en lugar de a versiones anteriores de JavaScript.

ATENCIÓN. Transpilar a ES6 (JavaScript 2015) tiene sus ventajas y sus inconvenientes. A día de hoy las últimas versiones de los navegadores soportan perfectamente este estándar. Sin embargo, si crees que tu usuario target medio puede estar empleando, por ejemplo, un IE10, o versiones relativamente antiguas de los navegadores más habituales, deberás dejar en valor del atributo target en es5. Eso producirá, al transpilar a JavaScript, un código final más «tosco» (aunque perfectamente operacional). Sin embargo, si piensas que la mayoría de los visitantes de tu web tendrán navegadores actualizados, puedes ponerlo como hemos indicado, para transpilar a ES6 (te valen los valores es2015 o, en su lugar, es6).
ATENCIÓN. Lo que hemos hecho hasta ahora es preparar el proyecto para poder emplear TypeScript. Estos pasos sólo debes llevarlos a cabo una vez por cada proyecto nuevo. A partir de ahora, tu proyecto ya está preparado para usar TypeScript y poder transpilarlo a JavaScript.

HOLA, MUNDO

Vamos a crear, en la raíz de nuestro proyecto, un simple archivo de pruebas para ver de qué estamos hablando. Lo primero es crear un simple index.html:

Cómo ves en la primera línea resaltada (la 10), se llama a un archivo JavaScript que aún no existe, por lo que, si tratas de cargar esta página en tu navegador, no cargará nada. Abre la consola de tu navegador, porque la usaremos en seguida. Estás viendo un error, porque la línea 12 llama a una función (saludar()), que aún no existe.

Ahora crea un archivo llamadohola_mundo.ts (los archivos de TypeScript siempre se guardan con la extensión .ts). Su código es tan simple como el siguiente:

Cómo ves, no tiene nada especial. La verdad, cómo código es un muy soso, y la sintaxis tampoco aporta nada nuevo, de momento. Es sólo sintaxis vulgar de JavaScript de toda la vida. Aún así, nos va a venir bien para ver el proceso.

En la consola de mandatos de tu ordenador (que está en tu directorio del proyecto), teclea:

tsc hola_mundo

Al cabo de unos segundos, se ha transpilado el código, y se ha creado un archivo llamado hola_mundo.js. Como ves, dada la simplicidad extrema de esta primera prueba, el código es el mismo que el original en TypeScript, pero ya es un archivo JavaScript. Si ahora recargas tu página HTML, ves en la consola del navegador el saludo Hola, mundo. Ya no hay errores, y ha funcionado como esperábamos.

ATENCIÓN. Aunque el código de este primer ejemplo es tan simple que no hay diferencia entre la sintaxis de TypeScript y JavaScript, observa que el transpilador inicia el archivo JavaScript con la instrucción «use strict»; lo cual es algo bueno, ya que, por razones de buenas prácticas de programación, debemos acostumbrarnos a «forzar» a JavaScript a que nos exija siempre la declaración de variables. Esto es algo que, seguramente, ya conoces (o deberías), pero, si deseas conocer más al respecto, puedes leer este artículo.

OPCIONES DE TRANSPILACIÓN

El ejemplo anterior ha sido muy pobre (yo diría casi decepcionante), en el sentido de que no nos ha enseñado nada específicamente sobre TypeScript. El objetivo era, simplemente, empezar a familiarizarnos con la idea de crear un archivo en TypeScript y ver qué y cómo es la transpilación. Sin embargo, no tiene ningún sentido, en un proyecto, tener en el directorio raíz del mismo todos los archivos TypeScript que vayamos a usar, y sus correspondientes transpilaciones.

Vamos a modificar la estructura de nuestro proyecto, de forma que tengamos, dentro de la raíz del mismo, al menos dos directorios, llamados ts y js. En el primero almacenaremos los archivos TypeScript y le diremos al transpilador que almacene los JavaScript en el segundo directorio. Por lo tanto, vamos a empezar por eliminar hola_mundo.js (el JavaScript), y mover hola_mundo.ts al directorio ts.

A continuación, modificamos la línea 10 de index.html, sustituyéndola por la siguiente:

<script src='js/hola_mundo.js' language='javascript'></script>

Como ves, lo que hacemos es especificar la ruta relativa donde deberá buscarse el archivo JavaScript.

Ahora, en la consola del ordenador, y desde la raíz del proyecto, tecleamos:

tsc --outDir js

Al no especificar un nombre de fichero TypeScript, el transpilador busca todos los de este tipo que hay en todas las ubicaciones desde la raíz del proyecto, de forma recursiva, con lo que va a encontrar nuestro archivo ts/hola_mundo.ts. La opción --outDir nos permite especificar el directorio de salida de las transpilaciones que, en este ejemplo, es js. Si el directorio no existe, el transpilador lo creará.

ATENCIÓN. El transpilador puede grabar los archivos JavaScript de salida en el directorio que le indiquemos y, cómo hemos mencionado, si no existe dicho directorio, este será creado. Sin embargo, si trabajas en un sistema Linux, recuerda que el directorio raíz de tu proyecto debe tener los adecuados permisos de escritura. En entornos Windows no debes, en principio, preocuparte de esto.

Otra opción interesante es la vigilancia permanente de archivos TypeScript. Al igual que en gulp podíamos programar una tarea para que se ejecutara cada vez que hacíamos cambios en los archivos «vigilados», el transpilador de TypeScript puede lanzarse para que se quede en modo vigilancia, de modo que, si modificamos alguno de nuestros códigos TypeScript se regeneren los archivos JavaScript correspondientes. Para hacer esto, escribe, en la consola de tu ordenador el siguiente mandato:

tsc --outDir js -w

Se inicia un proceso de transpilación en tiempo real, de modo que, si ahora cambias lo que sea en el archivo original de TypeScript y grabas los cambios (o si tu editor está en modo de «guardado automático»), el archivo JavaScript se actualiza automáticamente. Esto es muy útil durante la fase de desarrollo, cuando estamos corrigiendo constantemente cosas. El inconveniente (si quieres llamarlo así), es que la consola del sistema queda bloqueada, no permitiéndote teclear otros mandatos. Si necesitas interrumpir la transpilación vigilada y recuperar el control de la consola puedes hacerlo con CTRL-C.

Las opciones del transpilador que acabamos de ver son las más llamativas, y las que más usaremos, por lo menos en los primeros artículos. Más adelante iremos viendo otras opciones. De todos modos, si quieres echarle un vistazo general a las posibilidades de esta herramienta, puedes teclear en la consola la siguiente línea:

tsc --help

La respuesta será parecida a la siguiente:

CONCLUYENDO

Llegados a este punto ya estamos familiarizados con las bases del desarrollo en TypeScript. Por supuesto, es mucho aún lo que nos queda por aprender (todo, en realidad), pero ya sabemos por dónde empezar a trabajar. Los códigos de este artículo los tienes en este enlace. No te he incluido los archivos JSON, ni la ruta node_modules, para que, siguiendo las instrucciones del artículo te los crees tú mism@. En sucesivos artículos, como esto es algo rutinario, te los incluiré, pero no en este.

En el próximo artículo hablaremos sobre los tipos de datos de TypeScript. Sigue pendiente de la próxima publicación.

   

Deja un comentario