Verwendung von TypeScript in einer SharePoint Hosted App

Ich halte Typescript für eine wirklich gute Programmiersprache. Javascript ist gut, aber Typescript erweitert das altbekannte Javascript um ganz besonders praktische Features wie Klassen, Namespaces und eine starke Typisierung. Dadurch lässt sich zum Einen der Code in großen Projekten besser strukturieren, zum Anderen fallen durch die statische Typisierung Fehler, für deren Behebung man in reinem Javascript noch Stunden mit Debugging verbracht hat, direkt auf.

Warum also Typescript nicht auch in einer App für SharePoint benutzen? Da man in einer Provider-Hosted App um Typescript hinzuzufügen vorgehen kann wie in einer ganz klassischen ASP.Net MVC Webanwendung werde ich hier nur beschreiben, wie man Typescript zu einer SharePoint Hosted App hinzufügen kann. Da muss leider ein bisschen getrickst werden um den Typescript Compiler zum Laufen zu bekommen. Deshalb hier eine kurze Anleitung:

1. Zuerst wird ganz normal das passende Nu-Get-Paket für den Typescript Compiler installiert. Dies geschieht durch Eingabe des Folgenden Befehls in die Paketmanager-Konsole:

   Install-Package Typescript.Compiler
   

2. Wer schon einmal mit Typescript gearbeitet hat wird die Notwendigkeit kennen, sogenannte Typings für bestimmte Bibliotheken zu installieren. In einem Typing ist im Grunde definiert, welche Typen bestimmte Elemente von Javascript-Bibliotheken haben um diese in Typescript verwenden zu können. Um die JSOM-Schnittstellten benutzen zu können um mit dem SharePoint zu kommunizieren muss das SharePoint.d.ts Typing installiert werden. Dies geschieht mit folgendem Befehl:

   Install-package sharepoint.typescript.definitelytyped
   

3. Soweit so gut, aber leider reicht das noch nicht. Die Nuget-Pakete für Typescript wissen leider nicht von sich aus, wie sie mit SharePoint Apps umgehen müssen. Deshalb muss noch zusätzlich eine kleine Änderung in der Projektkonfiguration vorgenommen werden:
   • Rechtsklick auf das Projekt und Auswahl von “Unload Project”
   • Erneuter Rechtsklick auf das Projekt und Auswahl von “Edit .csproj”
   • Folgende Zeilen müssen hinter dem letzten schließenden -Tag eingefügt werden:

   <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
       <TypeScriptTarget>ES3</TypeScriptTarget>
       <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
       <TypeScriptSourceMap>true</TypeScriptSourceMap>
     </PropertyGroup>
     <PropertyGroup Condition="'$(Configuration)' == 'Release'">
       <TypeScriptTarget>ES3</TypeScriptTarget>
       <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
       <TypeScriptSourceMap>false</TypeScriptSourceMap>
     </PropertyGroup>
     <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
   

Die oben stehende Meldung muss mit “Ja” bestätigt werden, dann wird automatisch der richtige TypeScript Compiler verwendet.

4. Zusätzlich muss noch oben in den jeweiligen Typescript-Dateien eine Referenz auf die jeweiligen Typings – im Beispiel nur die SharePoint.d.ts, im echten Leben wahrscheinlich auch Knockout.js und Jquery – hinzugefügt werden, damit diese sich kompilieren lassen:

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

Jetzt sollten sich die Typescript-Dateien kompilieren lassen. Ob das funktioniert hat lässt sich einfach nachprüfen, indem im Projekt einfach alle Dateien eingeblendet werden. Tauchen gleichnamige .js-Dateien neben den Typescript Dateien auf, hat alles seine Richtigkeit und sollte funktionieren.