Cómo usar TypeScript en un proyecto SharePoint/Office 365

Uno de los problemas que tenemos los «tradicionales» desarrolladores de .NET (y por lo tanto de SharePoint), es el poco feeling que se siente por un lenguaje como JavaScript. Es un lenguaje no del agrado de muchos de ellos principalmente porque no se conoce su esencia y se quiere imitar el funcionamiento de un lenguaje totalmente diferente como C# o Java. Ahora bien, dada la importancia que ha cobrado JavaScript hasta el punto de ser el lenguaje referencia en cuanto a Web se refiere, cada vez surgen más generadores de JavaScript o llamados transpiladores. Lo que hacen es escribir en un lenguaje y su resultado es la generación de JavaScript (bien escrito y sin errores). Transpiladores como CoffeScript, WebShaper o el propio TypeScript. De estos tres, ¿cuál es la principal diferencia del lenguaje que se utiliza bien uno propio, F# o JavaScript? ¡Lo vemos!

¿Qué es TypeScript?

Es un super conjunto de JavaScript, con lo cual todo lenguaje JavaScript funciona tal cual pero se establece una organización y un tipado que facilita el mantenimiento y escalabilidad de la aplicación. Es un lenguaje Open Source creado por Microsoft y por el que está apostando bastante. Hasta tal punto que ha sido un nexo de unión entre Google y Microsoft para la creación de la versión 2 de Angular. Dentro del equipo que ha trabajado en la creación está Anders Hejlsberg, diseñador de C#.

¿Qué beneficio nos aporta?

• Principalmente podemos tener la tranquilidad de que todo el código que hemos escrito está semánticamente bien escrito. Podemos decir que sino compila es que algo hemos realizado mal (de igual forma que en otros lenguajes).
• El JavaScript generado está perfecto y cumpliendo con toda la potencia que nos da.
• Se puede modular de forma sencilla
• Se puede utilizar todos los Frameworks JS disponibles

¿Cómo utilizarlo en SharePoint/Office?

Como requisito previo, hay que instalar el plugin de TypeScript en Visual Studio. TypeScript se puede utilizar con la versión 2013 y con la versión 2015. También se puede utilizar desde cualquier IDE como puede ser Sublime, Code, etc..

En primer lugar, nos creamos el proyecto bien Farm Solution o App Solution. Una vez el proyecto está creado, sobre el fichero del proyecto editamos el mismo y añadimos antes de que se cierre la etiqueta Project el siguiente fragmento de código:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptNoImplicitAny>true</TypeScriptNoImplicitAny>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptNoImplicitAny>true</TypeScriptNoImplicitAny>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

Este fragmento de código lo que le indica a Visual Studio es que cuando dentro del proyecto exista un fichero de TypeScript (extensión .ts), se tiene que compilar con el compilador apropiado. Además tiene una serie de parámetros para la generación del mismo como versión EcmaScript que va a generar. ¡¡Ojo!! con esto porque SharePoint 2013 es compatible con Navagadores como IE8 que no soporta EcmaScript 5. Otra de las opciones que tiene es si todas las variables tienen que tener un tipo definido.

Realizando esta modificación dentro del proyecto podemos utilizar TypeScript de forma que ahora cada vez que generemos un fichero TS automaticamente cada vez que guardemos nos generará el fichero JS correspondiente.

¿Cómo utilizar JSOM en TypScript?

Uno de los puntos fuertes que tiene TypeScript es que se puede integrar con librerias de terceros. Para ello tan solo hace falta una definición de los tipos que tiene esa librería y añadirlos a nuestro proyecto. Por fortuna la comunidad ya se ha encargado de agregar todos los tipos de las librerías más populares y se puede descargar vía Nuget o en la siguiente url http://definitelytyped.org/

Una vez ya tenemos el fichero de los tipos, el siguiente paso es agregarlo dentro del fichero TypeScript que estamos desarrollando. Para ello, hay que arrastrar el fichero sobre el mismo o bien agregar esta linea :

/// <reference path="../../typings/sharepoint/sharepoint.d.ts" />

Añadiendo esta referencia dentro de nuestro fichero tenemos Intellisense con todas las opciones que trae la API (con la ventaja de es una API no muy documentada):

Ahora bien, aquí tienes un ejemplo de cómo poder consultar una lista:

      var result: Array<superHeroes> = new Array<superHeroes>();         
            var list: SP.List = this._web.get_lists().getByTitle("SuperHeroes");
            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
            var collListItem:SP.ListItemCollection = list.getItems(camlQuery);     
            this._context.load(collListItem);
            var context = this._context;
            return new Promise<Array<superHeroes>>(function (resolve:any, reject:any ) {
                context.executeQueryAsync(
                    function () {
                        var listItemEnumerator = collListItem.getEnumerator();

                        while (listItemEnumerator.moveNext()) {
                            var oListItem: SP.ListItem = listItemEnumerator.get_current();
                            var itemInfo: superHeroes = new superHeroes(oListItem.get_id(), oListItem.get_item('Title'), oListItem.get_item('Photo'), oListItem.get_item('Sexo'));
                            result.push(itemInfo);
                        }
                        return resolve(result);
                    },
                    function () {
                        return reject("error");
                    });
            });           
        }

Conclusión

TypeScript es un lenguaje muy potente, que tiene las ventajas de lenguajes de servidor tipado, modular y más mantenible. Junto con la ventaja de los lenguajes de cliente como son mayor velocidad y flexibilidad. Todo esto puede evitar muchos dolores de cabeza dentro de nuestros desarrollos ya que los Transpiladores (como TypeScript) nos dan el beneficio de una generación correcta del lenguaje de cliente como JavaScript.

P.D: Para conocer más acerca de TypeScript como lenguaje podeis leer estos articulos escritos por mi blog en Geeks.ms