Using TypeScript for SharePoint App Development
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.
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?
Step 3 – Create a SharePoint App Project
- Click Add > New Project > App for SharePoint 2013
- Enter Name and choose location > OK
Step 4 – Specify the App Settings
- Choose (and validate) our development site for debugging
- Select “SharePoint-hosted” as way to host your App
Step 5 – Add TypeScript Targets (1/2)
- Right click on your project node in the solution explorer
- Click to unload the project
- Click Edit .csproj
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’”>
<PropertyGroup Condition=”‘$(Configuration)’ == ‘Release’”>
<Import Project=”$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets” />
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.
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
- Since we want to write our App purely using TypeScript we first should delete the default App.js file.
- Now right-click on the Scripts-Folder and add a new TypeScript file and enter App.ts as file name
Step 10 – Add the generated .js file to your 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:
- Update the path to jQuery (I moved it into the /Scripts/Vendor folder)
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:
Ps, a big Thank You to Boris Yankov: https://github.com/borisyankov/DefinitelyTyped
In the next post I’ll be creating a simple App that will call a REST service …