Einbinden von TypeScript in SharePoint Hosted Add-Ins

Die Visual Studio Projektvorlage „SharePoint-Hosted App“ beinhaltet nach dem Erstellen standardmäßig keine TypeScript Unterstützung. Nach dem Erstellen von einem neuen Add-In Projekt ist es zwar möglich eine TypeScript Datei anzulegen allerdings fällt beim Bauen der Solution auf, dass für diese Datei keine JavaScript Datei erzeugt wird.

Einbinden von TypeScript

Damit die entsprechende JavaScript Datei wie erwartet erstellt wird muss TypeScript in der Projektdatei eingebunden werden. Dies erfolgt durch Hinzufügen der folgenden Zeile in der Projektdatei .csproj:

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

Für die Bearbeitung der .csproj muss das Projekt zunächst geschlossen werden. Dies ist in Visual Studio im Kontextmenü von dem Solution Explorer über den Punkt „Unload Projekt“ möglich. Im Anschluss kann die Projektdatei über das Kontextmenü von dem Solution Explorer über „Edit SharePointApp1.csproj“ bearbeitet werden.

Microsoft.TypeScript.targets

Nach Anpassung der Projektdatei kann das Projekt über den Punkt „Reload Project“ aus dem Kontextmenü vom Solution Explorer wieder geladen werden.

Erstellt man nun eine TypeScript Datei wird die dazugehörige JavaScript Datei direkt nach dem Speichern erzeugt bzw. aktualisiert und enthält immer den dazugehörigen JavaScript Code.

SharePoint Type Definition hinzufügen

Um in der neu Angelegten ts Datei die JavaScript Bibliotheken von SharePoint mit IntelliSense verwenden zu können wird die Type Definition „sharepoint.TypeScript.DefinitelyTyped“ benötigt. Diese kann als NuGet package in dem Projekt hinzugefügt werden.

NuGet package sharepoint.TypeScript.DefinitelyTyped