TypeScript es una extensión del lenguaje JavaScript desarrollada por el prestigioso creador/programador Anders Hejlsberg, quien ya posee un destacado currículum de lenguajes de programación, entre ellos, los tan importantes Tubo Pascal, Delphi y C#.

En el presente artículo trataremos lo esencial del nuevo lenguaje de programación y desarrollaremos un ejemplo, basándonos en el entorno de programación de Visual Studio 2012.

Fuentes de información oficiales

Para más información acerca del lenguaje puede acudirse, inicialmente, a las siguientes fuentes oficiales en Internet:

• www.typescriptlang.org
• typescript.codeplex.com (lugar de descarga)
• go.microsoft.com (especificación en PDF)
• www.ecmascript.org
• www.ecma-international.org

Lo más notable del lenguaje

De la propia especificación del lenguaje –que se puede obtener de la dirección URL que hemos dado más arriba-, se desprende y así resaltamos lo siguiente:

1. Se trata de un superconjunto de JavaScript
2. Cada programa TypeScript tiene su correspondiente en JavaScript y viceversa
3. Opcionalmente, puede proporcionar un mapeado de las fuentes que permita su depuración
4. Incluye ya propuestas dadas para ECMAScript en su versión 6 –la última aprobada es la 5.1-, como son las clases y los módulos –véase más abajo-
5. Incluye ya la inferencia de tipo en la declaración de variables y funciones. Se trataría de una de las columnas vertebrales del nuevo lenguaje –nótese su propio nombre-
6. Define declaraciones ambiente que son visibles en el ámbito del archivo TS, pero no se propagan en el archivo JS correspondiente, para así poder asimilarse a declaraciones explícitas en navegadores o en librerías específicas, como por ejemplo JQuery
7. El lenguaje en sí es débilmente tipado –tipificado, si se prefiere- y se permiten declaraciones en tiempo de ejecución, de modo que no se atiene a una rigidez de declaraciones tales como en C# o Java
8. Un módulo es un objeto totalmente anónimo, todo lo que se encuentre dentro de él estará oculto al mundo exterior, a menos que se haga visible de manera explícita. Dentro se pueden definir variables, funciones, objetos, clases e interfaces. En el correspondiente archivo JS se traducirán en componentes de un objeto encapsulado
9. Una interfaz es un conjunto de declaraciones de tipo, sin implementaciones de contenido; por ejemplo declaraciones de simplemente el tipo de variables y funciones –pero sólo eso, el tipo-. Son de validez exclusiva en tiempo de compilación y su utilidad principal estriba en la documentación y validación del tipado –o tipificación- correcto(a) de las declaraciones de variables, funciones, …
10. El soporte de clases abarca bastante de lo que cabría esperar –dentro de su simplicidad, que no es momento de tratar-, herencia, accesibilidad pública y privada y sobrecarga, básicamente

Un ejemplo basándonos en Visual Studio 2012

Para hacer desarrollos con TypeScript no necesitamos más que el compilador en línea de comandos y un editor de textos, como podría ser el modesto Bloc de notas; lógicamente, para un mejor y más cómodo trabajo nos alegrará saber que podemos, ya en el momento presente, apoyarnos en Visual Studio, en sus versiones 2012, tanto las profesionales como las gratuitas –Express-. Nosotros pasaremos a implementar un ejemplo con éste entorno visual.
En primer lugar hemos de instalar el complemento –plug-in- de desarrollo de TypeScript para Visual Studio 2012 en sus diversas versiones. Se trata de una tarea sencilla en la que primeramente deberemos ir al sitio de Internet:

http://www.microsoft.com/en-us/download/details.aspx?id=34790

Una vez instalado, desde el entorno de desarrollo de Visual Studio 2012 crearemos un nuevo proyecto como es costumbre.

Pero en vez de seleccionar uno predeterminado, en el área de búsqueda escribimos Typescript.

En el área de nuevos proyectos seleccionamos HTML Application with TypeScript –una aplicación HTML estándar, sin más, basada en un documento HTML simple y JavaScript, codificado con TypeScript- le damos el Nombre deseado y hacemos clic en el botón Aceptar.

Ya de vuelta en el entorno de trabajo de Visual Studio 2012, nos encontramos que se han creado cuatro archivos que comentaremos seguidamente:

• apps.tc: el archivo TypeScript de trabajo
• apps.js: el equivalente archivo JavaScript, sobre el que no deberíamos trabajar
• apps.css: la hoja de estilos de la aplicación
• default.html: el documento HTML principal de la aplicación

Hacemos doble clic sobre apps.ts para editarlo. A la vez se abre el árbol que nos deja ver el archivo apps.js equivalente de la solución –también podríamos trabajar sobre él, pero romperíamos la secuenciación de compilación del proceso; no deberemos hacerlo-.

Modificaremos el archivo apps.ts según nuestros intereses. En nuestro ejemplo será para adecuarlo a nuestro idioma. Inicialmente codifica una secuencia de comandos para mostrar la fecha actual en formato inglés UTC.

Seleccionamos todo su contenido y los sustituimos por el listado siguiente:

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;

constructor (element: HTMLElement) {
this.element = element;
this.element.innerText += "Ahora estamos a: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toLocaleDateString();
}

start() {
this.timerToken = setInterval(() => this.span.innerText = new Date().toLocaleDateString(), 500);
}

stop() {
clearTimeout(this.timerToken);
}

}

window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};

De igual manera, en el archivo default.html seleccionamos su contenido y lo sustituimos por el listado de más abajo:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML Aplicación</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h1>TypeScript HTML Aplicación</h1>

<div id="content"/>
</body>
</html>

Por último, en el archivo app.css podremos hacer nuestras modificaciones pertinentes, por ejemplo, fijar un color de fondo del documento:

body
{
font-family: 'Segoe UI', sans-serif;
background-color: yellow;
}

span {
font-style: italic
}

Finalmente, hacemos clic sobre el botón de Internet Explorer –o del navegador que tengamos instalado por defecto- en la barra de herramientas-,o bien pulsamos la tecla F5.

En la caja de diálogo que se nos abre, "Depuración no habilitada", podremos seleccionar:

• Agregar un nuevo archivo Web.config y realizar una depuración
• Ejecutar sin depuración, tal como si hubiéramos pulsado la combinación de teclas Ctrl+F5
• Tomada la decisión, terminaremos haciendo clic en "Aceptar" y se nos mostrará nuestro resultado en el navegador de Internet por defecto que hayamos seleccionado.