SharePoint Blog

Using TypeScript for SharePoint App Development

This post is the first one in a series on developing SharePoint 2013 Apps using TypeScript. I’ve become a big fan of TypeScript, as it allows me to write cleaner JavaScript code, inspires me because I can think in object oriented patterns like for example Observable etc., helps me organize (and re-use) my code in libraries and gives me the full power of Intellisense in Visual Studio (Express). This first post is about setting up your development environment. No code will be written yet. We’ll come to this later.

With the release of TypeScript 9.1.1 things have become slightly more “difficult” for SharePoint developers. The generated .js file is no longer available directly under the .ts file we’re creating. This means that it’s also not automatically included in the package. Also, the usage of a require framework like CommonJS or require.js is now mandatory.

Step 1 – Download the TypeScript Plugin for Visual Studio

Head over to http://www.typescriptlang.org/#download and follow the instructions to download the plugin for Visual Studio 2012.

Slide1

Step 2 – Create a development site

I like to create Host Named Site Collections using the PowerShell command below. Specifiying the template to be “DEV#0? gives you an App Development optimized template.

New-SPSite “http://apptastic.is-sp2013.local” -HostHeaderWebApplication “http://dev” -Name “Developer Site” -Description “SharePoint App Developer Site” -OwnerAlias “is-sp2013\administrator” -language 1033 -Template “DEV#0?

Slide2

Step 3 – Create a SharePoint App Project

  1. Click Add > New Project > App for SharePoint 2013
  2. Enter Name and choose location > OK

Slide3

Step 4 – Specify the App Settings

  1. Choose (and validate) our development site for debugging
  2. Select “SharePoint-hosted” as way to host your App

Slide4

Step 5 – Add TypeScript Targets (1/2)

TypeScript by default will compile into ordinary JavaScript. However, to make that happen you need to update your project’s .csproj file.

  1. Right click on your project node in the solution explorer
  2. Click to unload the project
  3. Click Edit .csproj

Slide5

Step 6 – Add TypeScripts Targets (2/2)

Scroll to the bottom of the project’s .csproj file and just below the SharePoint targets, add the following xml snippet, save your changes and reload the project.

<PropertyGroup Condition=”‘$(Configuration)’ == ‘Debug’”>
<TypeScriptTarget>ES3</TypeScriptTarget>
<TypeScriptIncludeComments>true</TypeScriptIncludeComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition=”‘$(Configuration)’ == ‘Release’”>
<TypeScriptTarget>ES3</TypeScriptTarget>
<TypeScriptIncludeComments>false</TypeScriptIncludeComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<Import Project=”$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets” />

Slide6

Step 7 – Download Require.js

To be able to create TypeScript modules (in separate files) you need a framework like CommonJS or require.js. Simply head over to http://requirejs.org/docs/download.html and download the latest version. Alternatively you can also get require.js using the NuGet Package Manager.

Slide7

Step 8 – Clean up the Scripts Directory

This is just a matter of personal taste, but I like to put .js files in folders for the sake of keeping on top of things.

Step 9 – Add a TypeScript file: App.ts

  1. Since we want to write our App purely using TypeScript we first should delete the default App.js file.
  2. Now right-click on the Scripts-Folder and add a new TypeScript file and enter App.ts as file name

Slide8

Step 10 – Add the generated .js file to your project

Since the latest release 9.1.1 the auto-generated .js file (which is the compiled JavaScript version of our TypeScript file) is no longer automatically added below our .ts file. Hence Visual Studio is not aware it’s around and for that reason it doesn’t end up in the App Package. There are probably better ways to solve this shortcoming, but I simply like to add the auto-generated .js files to my project.

Step 11 – Update the references in the App’s default page

So far we’ve update our project folder structure and added require.js. Hence we need to update the references in Default.apsx as follows:

  1. Update the path to jQuery (I moved it into the /Scripts/Vendor folder)
  2. Update the reference to App.js since it should be called via require.js and not directly (or else the require.js framework cannot perform its importing-tasks) as follows: <script type=”text/javascript” src=”../Scripts/vendor/require.js” data-main=”../Scripts/App”></script>

Slide9

Step 12 – Add TypeScript Definitions for jQuery and SharePoint using NuGet

We’re almost done with our preparations. We only need to get the TypeScript definition files for SharePoint and jQuery using NuGet. Simply open the NuGet Package Manager and search for “TypeScript SharePoint” and you’ll find both .d.ts files:

  1. jQuery.TypeScript.DefinitelyTyped
  2. SharePoint.TypeScript.DefinitelyTyped

Ps, a big Thank You to Boris Yankov: https://github.com/borisyankov/DefinitelyTyped

Slide10

In the next post I’ll be creating a simple App that will call a REST service …

  • mavawie

    Test comment

Copyright ©2012. All Rights Reserved.