Prerequisites To Build SharePoint Solutions With Typescript

1. TypeScript was developed and introduced by Microsoft.
2. TypeScript is object oriented programming language which is considered as a super set of JavaScript.
3. TypeScript cannot be used directly on SharePoint platforms.
4. TypeScript code has to be precompiled to JavaScript before deploying it on SharePoint.
5. TypeScript has compiler (tsc) to compile the code from TS to JS. The compiler produces a JavaScript file from a TypeScript source file

We can install TypeScript for Visual Studio from Microsoft site (https://www.microsoft.com/en-us/download/details.aspx?id=48593). For other versions of Visual Studio, the download links are available from http://www.typescriptlang.org/index.html#download-links.

Create a new SharePoint 2016 - Empty project (or SharePoint 2013).

Fill in the site URL and select "Deploy as sandbox solution" option.

 

On Visual Studio, navigate to Tools -> NuGet Package Manager -> Manage NuGet Packages for solution. Install the TypeScript plugins. The required plugins for executing TypeScript sample on SharePoint are -

jquery.TypeScript.DefinitelyTyped

Microsoft.TypeScript.Compiler

Microsoft.TypeScript.MSBuild

sharepoint.TypeScript.DefinitelyTyped 

microsoft-ajax.TypeScript.DefinitelyTyped

The above plugin also installs the TypeScript build/compiler components.

 

Edit the project file (Required if the compiler/build plugins are not available for Visual Studio)

From the solution explorer, right click the project and select "Unload Project" option

Again right click on the project and select edit project.

Paste the below code on the project file within the project tag. Save the project file.

 <PropertyGroup>

    <TypeScriptSourceMap>true</TypeScriptSourceMap>

  </PropertyGroup>

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

*From Solution explorer, right click the project and select reload project option. If the dialog box appears, close it and proceed loading the project.

*From Solution Explorer, right click the project and select properties option. TypeScript build option will appear on the properties.