Hello World en TypeScript, el lenguaje en el que se construirá Angular 2

En marzo, durante la primera KeyNote del evento ng-conf 2015, se hizo un anuncio bomba por parte del equipo de Angular: la elección de TypeScript como el lenguaje con el que se va a construir la próxima versión del framework.

Sin duda una buena noticia al unir fuerzas y conocimiento la gente de Google con la gente de Microsoft, y que puede ser el inicio del fin de la guerra absurda que sostiene Google con todo lo que huela a Redmond y que tantas incomodidades está produciendo entre los usuarios.

Qué es y hacia donde va

TypeScript es un lenguaje de programación de código abierto desarrollado y presentado por Microsoft hace unos tres años. Es un superconjunto de JavaScript que esencialmente añade capacidades de POO como es el tipado estático y objetos basados en clases.

Extiende la sintaxis de JavaScript, por medio de un lenguaje propio que compila ficheros en lenguaje JavaScript original, asegurando la compatibilidad con todos los navegadores, servidores y sistemas operativos.

S. Somasegar, vicepresidente corporativo de la División de Desarrollo de MS, describió en su blog el roadmap que va a seguir en los próximos meses el desarrollo de TypeScript, y que tiene como principales hitos la compatibilidad con ECMAScript 6 añadiendo sintaxis y características; la implantación de ECMAScript 7 y de comunicaciones asíncronas similares a async/await; y la evolución de la infraestructura esperando incrementos del rendimiento hasta cuatro veces superiores a la versión 1.0.

Para un seguimiento más detallado lo mejor es acceder al repositorio de TypeScript en GitHub, pudiendo aportar al proyecto o simplemente ir probando las nuevas versiones.

Nada mejor que un ejemplo práctico

Al tener instalada la versión de Visual Studio 2013 update 2 o el novísimo 2015 CTP6, tengo integrado en mi IDE las librerías de TypeScript, y puedo probar en primera persona la construcción de un sencillo Hello World, experimentado las diferencias que ya se pueden encontrar en esta primera aproximación.

Como era de esperar, cuando utilizo la plantilla que trae Visual Studio de un proyecto del tipo TypeScript veo que voy a utilizar dos ficheros + uno: el HTML, el de javascript y en el que realmente voy a trabajar, el .ts.

La descripción funcional es muy sencilla. Quiero ver un textbox en donde introducir mi nombre, y un botón para que – cuando lo pulse - el sistema me muestre un texto que diga “Hola + nombre introducido”.

Para ello primero preparo el HTML

    

 

  

     
   


    

        
        Saluda
        

        
    

En donde no tengo mucho que comentar más que la llamada al fichero app.js que es en donde se va a compilar mi código introducido en app.ts.

El fichero en donde codifico es el app.ts en donde introduzco la función que se lanza al pulsar en el botón. He tenido que quitar el SyntaxHighlighter porqué me añadía un cierre de los tag de casteo que no ha habido forma de quitar.

function saluda()
{
    var usuario = (document.getElementById("nombreUsuario")).value;
    (document.getElementById("lblSaludo")).textContent = "Hola " + usuario;
};
// Este cierre de tags lo añade syntaxhighlighter. 
// Al ser un cast, no es necesario este cierre. 
// Pero el editor los pone automáticamente

Lo cual, una vez compilado, me va a dar como resultado el siguiente fichero javascript.

function saluda() {
    var usuario = document.getElementById("nombreUsuario").value;
    document.getElementById("lblSaludo").textContent = "Hola " + usuario;
};

//# sourceMappingURL=app.js.map
 

Las principales diferencias

Lo primero a señalar es que, como he dicho antes, no se trabaja con el fichero javascript ya que es el resultado de la compilación del ts. Por lo cual en Visual Studio lo que veo es una pantalla partida en vertical en donde tengo el código TypeScript a la izquierda y el código js resultante a la derecha.

Lo segundo es que este es un lenguaje tipado y así tengo que definir el objeto que estoy utilizando para poder obtener las propiedades o métodos que soporta. Así en el ejemplo tengo que identificar al objeto con el id “nombreUsuario” como un objeto del tipo Input () para poder acceder a su value.

Si no hiciera esta conversión, el compilador me da un error y no me deja continuar.

Otra cosa que nos va a facilitar mucho la vida a los que utilicemos este lenguaje, es que utiliza todas las capacidades de compilación y depuración de Visual Studio, similar a la de cualquier lenguaje .NET. Y es una auténtica gozada el poder poner un punto de control en cualquier sitio y hacer un resumen de inspección u obtener la pila de llamadas de un código javascript.

En resumen, yo me he empezado a poner las pilas.

Más información | Repositorio de TypeScript en GitHub, Somasegar's blog
En GenbetaDev | Domina fácilmente TypeScript

Imagen | Yuri Yu. Samoilov