SharePoint 2013 TypeScript Definitions out now on Codeplex

Project Description
High-quality (documented and strongly typed) TypeScript declarations for SharePoint 2013 JavaScript Object Model (CSOM) + lots of examples.


  1. Client Side Object Model (CSOM) core classes
    • SP namespace (ready)
    • SP.WebParts (ready)
    • SP.Utilities (work in progress) – DateUtility and HttpUtility classes aren’t ready yet
    • SP.SOD (ready)
  2. Social object library
    • SP.Sharing (ready)
    • SP.UserProfiles (ready)
    • SP.Social (ready)
  3. SharePoint Client Side Rendering
    • SPClientTemplates (ready)
  4. Workflows
    • SP.Workflow (ready)
    • SP.WorkflowServices (ready)
  5. SharePoint UI elements:
    • SP.UI.Notify (ready)
    • SP.UI.Status (ready)
    • SP.UI.Menu (ready)
    • SP.UI.ModalDialog (ready)
    • SP.UI.ApplicationPages – some useful stuff here nobody knows about e.g. ClientPeoplePickerWebServiceInterface! (ready)
    • CalloutManager (ready)
    • SP.UI.TileView (planned)
    • SP.UI.Controls (planned)
    • SP.UI.ComboBox (planned)
  6. SharePoint Search
    • Microsoft.SharePoint.Client.Search (ready)
  7. Business Connectivity Services
    • SP.BusinessData (ready)
  8. SharePoint Managed Metadata
    • SP.Taxonomy (ready)
  9. SharePoint Publishing Infrastructure
    • SP.Publishing (planned)

Please, contribute your definitions!

Show me some examples!

Besides the definitions, the project also contains many great examples of SharePoint JavaScript CSOM usage. No doubt, all of them are made with TypeScript!

Client Side Rendering – Conditional formatting on-fly

And there is only that much of code:

Csr.override(171, 1)
    .onPostRender((ctx: SPClientTemplates.RenderContext_InView) => {
        for (var i = 0; i < ctx.ListData.Row.length; i++) {
            var listItem = ctx.ListData.Row[i];
            var percentComplete = parseFloat(listItem['PercentComplete.']);
            var row = document.getElementById(GenerateIIDForListItem(ctx, listItem));
            if (row) {
                if (percentComplete > 0.8)
           = '#f8502a';

(this example leverages our tiny CSR Lightweight library extension, which is included along with the definitions in case you might want to use it).

And don’t forget, you get all benefits of the intellisense and strong typing here.

Certainly this is not the only sample we have. We have the whole bunch of them: starting from basic CSOM operations and ending with Client Side Rendering and Workflow Services. Some of the samples were adopted from MSDN, some are hand-made.

You can either download or explore all of the samples here on CodePlex.

How to add definitions to existing project

  1. Install the TypeScript add-in.
  2. Edit csproj source file (right-click on your project in VS -> Unload project, right click again -> Edit YourProject.csproj) and include the following code:
    <Import Project="$(MSBuildExtensionsPath32)MicrosoftVisualStudiov$(VisualStudioVersion)TypeScriptMicrosoft.TypeScript.targets" />
  3. Download the definitions file provided by this project (SharePoint.d.ts).
  4. Add the SharePoint.d.ts file to your project. Make sure that “DeploymentType” for it set to “NoDeployment”.
  5. Add a new TypeScript file to the project. You can add it either to a module (recommended) or to a SharePoint Mapped Folder. Set the “DeploymentType” for the .ts file to “NoDeployment”, and make sure it is set to “ElementFile” (module) or “TemplateFile” (Mapped Folder) for the .js file
  6. Reference the SharePoint.d.ts by adding the following code to your .ts file (the path is relative to your .ts file):
    /// <reference path="SharePoint.d.ts"/>
  7. Enjoy!

About Authors

Andrey Markeev is SharePoint Server MVP, online expert, active blogger, published author, frequent speaker. He works as a Senior SharePoint Consultant at NED Software Consulting Oy (Helsinki, Finland).

Stanislav Vyshchepan is SharePoint Server MVP, Solutions Architect at i-Teco (Moscow, Russia), Certified Trainer and SharePoint Development coach.

Leave a Reply

Your email address will not be published. Required fields are marked *