TypeScript in a SharePoint Farm Solution

One of the good things about the holiday season is that I’ve got plenty of free time to catch up with new developments. I suppose one of the drawbacks of being a SharePoint Developer is that I tend to focus on all things SharePoint while ignoring potentially useful developments elsewhere. One such development is TypeScript. I stumbled upon this video on channel 9 and it really got me thinking about how useful the tool is for SharePoint development, especially in light of the changes in SharePoint 2013.

Much as I’m sure I’ll get slated for this statement: JavaScript is the future of user experience development. Sure it’s been around for a while and is creaking under the weight of the burdens placed upon it but there really is no other alternative that ticks all of the boxes. Evolutionary pressure will enhance the capabilities of JavaScript and undoubtedly address some of it’s shortcomings, however, while the interminable commercial wrangling continues at ECMA, TypeScript plugs a few significant holes and makes the language more suitable for ‘serious’ development.

In this post I’m going to look at how TypeScript can be used for SharePoint development. There are a few posts that tackle how TypeScript can be used for App development but I’m interested in building a farm solution that uses TypeScript to improve the quality of scripts that are used by my web parts.

Setup

The TypeScript compiler can be installed using the TypeScript for Visual Studio 2012 add-in. You can download it from here:http://www.microsoft.com/en-us/download/details.aspx?id=34790. For this article I’m using v 0.8.1.1.

Since TypeScript works by compiling TypeScript files into JavaScript files, we need to tell Visual Studio to run the TypeScript compiler. Although Installing the Visual Studio add-in gives us the ability to add TypeScript items to a project it doesn’t modify the project file to include the required compilation.

Steps to enable this are:

  1. Unload the project
  2. Edit the project file.
  3. At the end of the .proj file add the following xml:
<PropertyGroup>
  <TypeScriptSourceMap> --sourcemap</TypeScriptSourceMap>
</PropertyGroup>
<Target Name="BeforeBuild">
  <Message Text="Compiling TypeScript files" />
  <Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  <Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Save the changes and reload the project and we’re good to go.

Deploying TypeScript output to SharePoint

When I’m working on a SharePoint solution I like to keep any scripts that will be deployed to the Layouts folder in a single element rather than having them scattered around in web part elements etc. To show how TypeScript can be deployed I’ll demonstrate this approach although the process is pretty much the same if your scripts are contained in other elements.

1. Create an Empty Element – rename it to Scripts

2. Delete the Elements.xml file – we don’t need it when deploying to the file system

image

3. Add a new TypeScript file (You can find the TypeScript template by typing Ctrl-E  then typing ‘TypeScript’ and hitting enter). I’ve called my file chaholl.sample.ts

image

4. Once the new file has been added to the Scripts element we need to change the deployment settings for the compiled script file. Expand the chaholl.sample.ts node and select the chaholl.sample.js item.

5. Using the Properties pane set the Deployment Type to TemplateFile and expend the Deployment Location section to allow you to change the Path property to layouts\chaholl\Scripts\

image

The compiled JavaScript will now be deployed to the layouts folder when the wsp is installed.

Debugging

TypeScript makes use of SourceMap v3 to provide a mechanism for us to debug our compiled script using the original TypeScript code rather than the compiled JavaScript. To make this work we first need to compile our project. Hit Shift-F6 to rebuild.

If we now examine the chaholl,sample.js file we can see that the last line reads:

//@ sourceMappingURL=chaholl.sample.js.map

This is a reference to a mapping file that contains information necessary to map the compiled JavaScript back to our TypeScript file. (You can find out more about the SourceMap standard here). If we want to debug from SharePoint we need this mapping file to be deployed to the server as well. From the PROJECT menu select Show All Files. Notice that chaholl.sample.js.map appears in the Scripts element. To ensure that this file is deployed right-click on it and select ‘Include in Project’ and then use the Properties pane as before to deploy the file to the layouts folder,

image

We can now rebuild and deploy the package and our TypeScript generated files will be deployed and ready for debugging.

References:

http://www.typescriptlang.org/

http://www.ecma-international.org/publications/standards/Ecma-402.htm

http://channel9.msdn.com/Shows/Going+Deep/Anders-Hejlsberg-and-Lars-Bak-TypeScript-JavaScript-and-Dart

http://www.microsoft.com/en-us/download/details.aspx?id=34790

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?pli=1

  • I’m a big fan of Resharper. There’s a minor problem with the current version (7.1) in that it conflicts with the refactoring capabilities available in the Visual Studio add for TypeScript. If you’re interested in seeing Reshareper Support for TypeScript add your vote here – http://youtrack.jetbrains.com/issue/RSRP-330454

  • Going to try this and may be present it for the user group.  Question, would you package this as a resource within /Style Library/ (ghostableInLibrary) or in _layouts 

    • chaholl

      Hey John, I generally deploy my scripts to layouts because they form a core part of my product and I don’t want folks changing them. They’re also easier to debug there since it’s just a straight file copy. Having said that, there’s no reason why you couldn’t deploy to style library once development is complete.
      Btw, typescript 0.8.2 was released earlier this week. It features compile on save which makes for much smoother development experience.

      • johnnliu

        I decided to head down the _layouts for farm solutions, as that gives me great control, and a very quick deploy if I use CKSDEV’s copy to _layouts.

        But for sandbox solutions, I deploy to /Style Library/ and then rely on a feature receiver to go and publish them…  (still annoying).

  • Ryan Shripat

    Hi Charlie – when I deploy my TypeScript files in my WebPart, I get 401 errors for the .map files in the Network tab in Canary, even though I can access them directly in the browser. Any ideas? http://stackoverflow.com/questions/18511106/401-error-with-typescript-mapping-files-in-sharepoint-2010

    • chaholl

      Hi Ryan,
      To be honest I’ve given up on using .map files. I’ve found that they get cached in Visual Studio so you need to detach and reattach the debugger every time you make a change. Instead I debug using the .js file and make changes to the .ts file which is then automatically compiled and redeployed to SharePoint

      • Ryan Shripat

        Shucks – thanks anyway.

        Ryan