[JavaScript] TypeScript ¿JavaScript tipado?

Seguro que si tienes una cuenta de Twitter, esta mañana y ayer te viste abrumado por un montón de tweets acerca de TypeScript.

¿Que es TypeScript?

Digamos que es un lenguaje tipado escrito en JavaScript y que al compilarlo genera código JavaScript plano listo para utilizar en cualquier navegador, host y sistema operativo.

¿Por donde empezar?

Lo primero que tienes que hacer es descargar e instalar la extenisón para Visual Studio 2012 aquí

Una vez instalada, create un proyecto web MVC 4:

image

Usa la template de Internet Application:

image

Una vez creada, sobre la carpeta de Scripts, añade un fichero del tipo TypeScript

image

Le ponemos un nombre

image

Y ya tenemos nuestro fichero ts creado con un código de ejemplo:

image

Tenemos intellisense:

image

Este código no se puede ejecutar en un navegador, es TypeScript y tendrás que aprender sobre este lenguaje aquí para que luego el compilador de TypeScript genere el JavaScript plano que utilizaremos en nuestra web.

Podemos observar en la ventana de navegación, que de nuestro fichero demo.ts cuelga otro fichero llamado demo.js que contiene el código JavaScript plano resultado de la compilación de nuestro TypeScript y que será el que añadiremos a nuestra vistas de MVC:

image

Como podéis observar, el código cambia bastante, los comentarios se eliminan, no hay palabras reservadas como constructor, interface, class, module… es el JavaScript que conocemos, que se ejecuta en el navegador y que no es tipado:

imageimage

Como no soy un experto en JavaScript, no puedo asegurar si ese código que genera el compilador de TypeScript es el más óptimo o no, claro está que nos puede ayudar a los que no somos expertos, pero yo aconsejaría siempre, verificar de alguna manera el código generado.

Por último, para compilar el ts, lo puedes hacer desde la consola de nuget con el comando tsc:

tsc demo.ts

o con este workaround para que cada vez que compiles desde Visual Studio 2012 se compile de nuevo el .js en base a los cambios que hagas en el fichero .ts, es añadir está línea a tu fichero .csproj

<Target Name="BeforeBuild">

 <Exec Command="&amp;quot;$(PROGRAMFILES)Microsoft SDKsTypeScript0.8.0.0tsc&amp;quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

</Target>

Un saludo.

Un comentario en “[JavaScript] TypeScript ¿JavaScript tipado?”

  1. Pues tiene buena pinta Luis. Que tal interactua con codigo javascript ya creado? Seriamos capaces de generar un modelo para el patron MVVM de javascript knockout??

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *