SharePoint 2013 and TypeScript

The features of any programming language influence on the process of developing, debugging and testing code. Many web developers have faced JavaScript features during developing client code, the most unpleasant of which is the weak dynamic typing. The second feature is that despite the fact that JavaScript is an object-oriented programming language, it uses the OOP model based on prototypes, not classes, as in C #. This greatly complicates the development and reading of code for beginners or developers of server-side code.

Deploying  MS SharePoint 2013  applications (Office 365 applications are a separate topic) is a complex and fairly long process even in the development environment (compiling, assembling a wsp package, deploying  to a SharePoint farm, recycling a pool, re-enabling features). Therefore, any error in the client code not detected at an early stage becomes very expensive for the developer, and the development time can significantly increase. Due to the above features of the JavaScript language, most errors, even typos, cannot be detected at the compilation stage and this grows up to a big problem, and some elementary typos can be detected only at the testing stage.

In this situation, statically typed languages help developers. They have the following advantages:

• Improving the readability of the code;
• Promoting early detection of errors;
• Providing more explicit and reliable refactoring opportunity;
• Improving language support at the IDE level.

It is noteworthy that JavaScript itself can also be made statically typed, but with the help of auxiliary tools (such as TypeScript or Flow), one of which I will consider in this article. The first one is a programming language, with its own compiler into JavaScript code, the second one is a JavaScript code parser. Due to some advantages of using TypeScript (supported by Visual Studio, supporting classes, etc.), I chose the first one.

The full list of TypeScript features:

• It is a strongly typed language;
• Code written in TypeScript is compiled into JavaScript;
• It has backward compatibility with JavaScript. If you write clean JavaScript code the compiler will spit out your JS and will not throw Exception. You can write mixed code (for example, modules/methods using the TypeScript syntax, and implement methods without typing on pure JS)
• The language is developed by Microsoft;
• There is an ability to debug the code in browsers;
• You can create interfaces, modules, classes;
• You can inherit interfaces (including multiple inheritance), classes;
• You can describe your own data types;
• You can create generic interfaces;
• You can describe the type of the variable (or properties of the object), or describe witch interface the object must have implement;
• You can describe the method signature.

To enable the TypeScript in a SharePoint 2013 application project you need to do just a couple of steps:

1. Download and install the TypeScript compiler for the studio (https://www.microsoft.com/en-us/download/details.aspx?id=48593)
2. Connect the compiler to the project:

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

Then in the project settings there will be accessible an additional tab with the TypeScript compilation settings.

The client code distinction in projects of this type is that the SharePoint platform contains a bunch of its own modules and JavaScript API (JSOM, CSR) and you always have to use one or another of them. Fortunately, most of the kernel files are already described in the TypeScript types that are contained in the file SharePoint.d.ts (https://github.com/gandjustas/sptypescript). You can use the standard SharePoint JavaScript types in your TypeScript code  after including this file into your project.

For most of the common client-side code frameworks (such as JQuery, Angular, etc.) files with TypeScript types are also exist. They can easily be found and included in the project by the NuGet manager.

As I mentioned, common browsers have the ability of debugging the TypeScript code. You must include the .ts files and the .map (source map) files in the package by adding the following code:

<Target Name="AddTsToContent" AfterTargets="CompileTypeScript"Condition="'$(BuildingProject)' != 'false'"> <ItemGroup>

    <Content Include="@(TypeScriptCompile)" Condition="'$(TypeScriptSourceMap)' == 'true'" /></ItemGroup>
</Target>

Next, check Generate Source Map checkbox  in the TypeScript tab of the project settings for Debug configuration. The .map and .ts files will be included in the wsp installation package after compilation in Debug mode.

I want to pay special attention to the fact that using of the TypeScript language in SharePoint projects great helped me in the development of client code, even though it took some time to study the fundamental and overcome some difficulties of configuring SharePoint 2013 projects.