Crear una aplicación Web con Typescript y Visual Studio Code

En este post veremos el procedimiento necesario para crear una aplicación web con Typescript y Visual Studio Code, adicionalmente, veremos cómo versionar este proyecto en GitHub.

Paso 1: Crear nuevo proyecto con Visual Studio Code.

Para esto creamos una nueva carpeta, en mi caso «typescript-poo«, posteriormente abrimos esta carpeta con Visual Studio Code: file -> open folder y seleccionamos la carpeta que acabamos de crear para el proyecto.

Paso 2: Crear archivo tsconfig.json,

En el archivo tsconfig.json, especificamos como debe comportarse Typescript. Este archivo, debe verse como sigue:

Paso 3: Crear una tarea de compilación en Visual Studio Code

En proyectos de grande mediana complejidad, vamos a disponer de muchas clases Typescript, debemos crear una tarea que automáticamente transpile todas estas clases a Javascript. Para esto, abrimos la paleta de comandos del Visual Studio Code con el comando «Ctrl + Shift + P«, luego buscamos y seleccionamos la acción «Configure Task Runner» y posteriormente seleccionamos tsconfig.json. Con lo anterior, habremos creado una tarea llamada tasks.json en Visual Studio Code, cuya responsabilidad será transpilar todos los archivos Typescript a JavaScript.

Realizado los pasos anteriores, se habrá creado la nueva tarea en la carpeta oculta .vscode que contiene el archivo tasks.json, como se ve a continuación:

Paso 4: Versionar el proyecto Typescript en GitHub

Nos descargamos el cliente Git desde: https://git-scm.com/downloads, descargamos el instalador según nuestro sistema operativo y lo instalamos.

Para versionar el proyecto que hemos creado en GitHub, debemos crear una cuenta e instalar el cliente GitHub como lo explico en este Post: Como versionar un proyecto Angular 2 en GitHub y Visual Studio Code.

Para facilitar la vida, VS Code dispone de una terminal desde donde podremos ejecutar los comandos que vayamos necesitando. Para abrir esta terminal, vamos a view -> Integrated Terminal.

Una vez en la terminal, agregamos nuestro Proyecto a GitHub con los siguientes pasos:

1. Ejecutamos el comando git init
2. Asociar la carpeta local con el repositorio en GitHub, ejecutamos el comando: git remote add origin [Url del repositorio]
   
3. Ejecutar commando «git add .» es importante no olvidar el espacio ni el punto al final.
4. Hacemos el primer commit con el comando: git commit -m «First commit»
5. Subimos los cambios del commit a GitHub con la instrucción: git push -u origin master

Paso 5: Crear la clase «Artista»

Una vez hemos versionado el proyecto en GitHub, procedemos a crear la clase Artista con typescript. La estructura de nuestro proyecto queda como sigue:

Paso 6: Instalar Typescript

Para instalar el compilador de Typescript, simplemente ejecutamos el comando: «npm install -g typescript«.

Paso 7: Compilar el proyecto

Ahora, vamos a compilar el proyecto, para ello ejecutamos la siguiente combinación de teclas desde el VS Code: «Ctrl + Shift + b«. Con esta instrucción estamos ejecutando la tarea que creamos previamente en el paso 3, Podremos ver que, al compilar exitosamente, se han creado algunos nuevos archivos:

Es aquí donde entra Typescript, compilando el archivo original «artista.model.ts» y como resultado de la compilación ha producido los siguientes archivos:

1. artista.model.js: Archivo Javascript que finalmente ejecutará el navegador web.
2. artista.model.js.map: El compilador de Typescript, ha creado un archivo Javascript con un código que posiblemente no entendemos muy bien. Con el archivo .map podremos depurar o hacer seguimiento al código original Typescript.

Para quitar visualmente los archivos .js.map de nuestro VS Code, vamos a File -> Preferences -> User Settings:

Se desplegará el archivo de configuración settings.json donde podemos especificar la opción de excluir cierto tipo de archivos, en este caso vamos a excluir los archivos cuyo nombre termine en «.js.map» con la siguiente línea: «**/*.js.map»: true

Cuando editamos un archivo causamos un error de sintáxis, VS Code inmediatamente nos informará al respecto, como podemos ver en la siguiente imagen:

Se puede observer que en la línea 10 falta cerrar el paréntesis de la función alert(), lo que claramente es un error de sintáxis. Typescript nos ayuda a identificar esos errores cuando compilamos con Ctrl + Shift + b, en la esquina inferior izquierda, el indicador de errores nos informará la cantidad de problemas que tenemos, indicándonos el archivo, la línea y la descripción del problema encontrado. Esta es una gran ventaja de trabajar con un transpilador como Typescript, ya que, a diferencia de JavaScript, podemos descubrir errores de sintáxis en tiempo de compilación y no en ejecución, ahorrando con esto tiempo y esfuerzo.

El código está disponible aquí.