Martin's Blog - Developer Infos zu SharePoint, ASP.NET, BI und anderen Technologien




powered by Component Software GmbH

TypeScript in SharePoint-Hosted Apps nutzen

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.

image

Die nun angezeigte Datei “TypeScript1.js” kann mit dem Menü Punkt “Include in Project” in das Projekt aufgenommen werden.

image

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.

image

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 :

image

7. Schritt

zu guter letzt ist eine kleine Testfunktion in TypeScript hilfreich.

image

Die durch TypeScript entstandene JavaScript Datei muss noch in der ASPX-Datei eingebunden werden und die Funktion aufgerufen werden.

image

und am Ende: Die erfolgreiche Anzeige:

image

Kommentare sind geschlossen

Copyright © 2019 Martin Groblschegg - Impressum