SharePoint Hosted Apps können nur mit JavaScript entwickelt werden. Als C#-Entwickler vermisse ich in JavaScript jedoch die Annehmlichkeiten einer typisierten-Sprache. Insbesondere vermisse ich die Intellisense-Unterstützung des Visual Studios. Auf meiner Suche nach einer Lösung bin ich über das TypeScript-Projekt von Microsoft gestolpert. ( http://www.typescriptlang.org/)
Auch wenn das TypeScript Add In für Visual Studio installiert ist, stellt man schnell fest, dass es in einer SharePoint-Hosted App nicht möglich ist eine TypeScript-Datei einzufügen. Da TypeScript aber nur ein PreCompiler ist, muss es doch irgendwie möglich sein das Visual Studio so zu konfigurieren, dass TypeScript in Apps unterstützt wird?
Hier die Anleitung:
1. Schritt
SharePoint App Projekt anlegen.
Als Deploymenttyp “SharePoint-hosted” auswählen.
2. Schritt
Zum Projekt im Ordner “Scripts” eine neue Datei hinzufügen und diese mit der Endung *.ts versehen. In meinem Beispiel nenne ich diese Datei “TypeScript1.ts”
3. Schritt
In der *.csproj Datei ist eine Erweiterung notwendig um den TypeScript-Compiler in das Projekt einzubinden. Startet man direkt mit einer TypeScript-Anwendung ist der folgende Eintrag bereits im Projekt-File inkludiert. Dort habe ich auch den Code gefunden. Wichtig ist es, vor der Änderung, das VIsual Studio zu schließen, sonst wird die Projektdatei vom VS wieder überschrieben.
Am Ende des .csproj Files, vor dem Closing-Tag für </Project> ist folgender Eintrag zu schreiben:
<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" />
4. Schritt
ebenfalls in der Visual-Studio Projektdatei ist die Datei “TypeScript.ts” so zu konfigurieren, dass sie mit Typescript compiliert wird.
In der Projektdatei ist folgende Zeile zu finden:
<Content Include="Scripts\TypeScript1.ts" />
Diese ist auszubessern auf:
<TypeScriptCompile Include="Scripts\TypeScript1.ts" />
5. Schritt
nun kann das Visual Studio wieder gestartet und das Projekt geladen werden. Das Projekt muss einmal kompiliert werden. Dadurch wird von TypeScript die Datei “TypeScript1.js” angelegt. Diese ist in das Projekt aufzunehmen. Hierfür müssen die ausgeblendeten Dateien angezeigt werden.
Die nun angezeigte Datei “TypeScript1.js” kann mit dem Menü Punkt “Include in Project” in das Projekt aufgenommen werden.
6. Schritt
Das Deployment der Dateien nach SharePoint muss konfiguriert werden. Derzeit wird die TypeScript Datei mittels Element.xml nach SharePoint deployed. Dies ist nicht notwendig.
Der Deployment-Type der Datei muss in den Properties der Datei von “ElementFile” auf “NoDeployment” geändert werden.
Für die Datei “TypeScript1.js” sollte bereits der Deployment Type “ElementFile” gesetzt sein und die Build Action sollte auf Content stehen. Dadurch wird das File in die Elements-Datei aufgenommen und mittels SharePoint-Module nach SharePoint deployed :
7. Schritt
zu guter letzt ist eine kleine Testfunktion in TypeScript hilfreich.
Die durch TypeScript entstandene JavaScript Datei muss noch in der ASPX-Datei eingebunden werden und die Funktion aufgerufen werden.
und am Ende: Die erfolgreiche Anzeige:
