TypeScript in SharePoint
By Anatoly Mironov
By now TypeScript shouldn’t be something one has to introduce.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
If you haven’t already done it, go and see the intro video for TypeScript, check out a tutorial and visit the typescript playground. There are other javascript libraries which extend javascript and are compatible/compile to javascript: Dart and CoffeeScript. To be honest I had never time to try those. The fact that TypeScript is well integrated into Visual Studio which I happen to work within all the days (intellisense, compilation checks and more) did me curious. This post is actually not about TypeScript itself, but a test to use it in SharePoint. In this short “lab” I even had Web Essentials 2012 which automatically compile typescript files into plain javascript files on save. This is what I did: Install TypeScript and Web Essentials 2012 Create a SharePoint-hosted app: Create a new TypeScript file in the autogenerated “Scripts”-module and call it “Greeter.ts” Just save the file as it is. The new file is created: Greeter.js Now we don’t need to copy this file to the app, so remove Greeter.ts from the Elements.xml file (or comment it out): Open the Default.aspx from the Pages module and add the reference to the new javascript file:
<script src="../Scripts/Greeter.js"></script>
```Then deploy your app. Once it is deployed we can see in the dev tools that our code is there: [![](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-005.png "sp-app-005")](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-005.png)
#### Minifying the files...
Another tip is to minify the autogenerated javascript file. Right-click on the file -> Web Essentials -> Minify the files. [![](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-006.png "sp-app-006")](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-006.png) This will generate the Greeter.min.js file: [![](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-007.png "sp-app-007")](https://sharepointkunskap.files.wordpress.com/2012/10/sp-app-007.png)