SharePoint Programming With TypeScript - Object Oriented Approach

Introduction

In this article, you will learn about implementing basic TypeScript examples on SharePoint, using classes and variables, using Visual Studio.

In my previous article, you have learned TypeScript basics and prerequisites to be available on Visual Studio for SharePoint TypeScript programming.

SharePoint Programming with TypeScript - Part 1

In my other article, I have explained about implementing TypeScript basic examples in SharePoint Visual Studio SharePoint Project.

SharePoint Programming With TypeScript - Part Two

Here, we will learn how to retrieve SharePoint site details, using class, constructor, function and variables with the help of TypeScript. In this way, the programmers can develop the components in an object oriented programming language. With the help of ECMAScript approach in TypeScript, the developers can build Applications in object oriented class based approach.

Defining Class

Let us define a class with the members. The members can be variables, constructors and functions. The class name in the example is GetSiteInfo. It has four members, which are as follows.

Property called context, which is of type 'SP.ClientContext'
Property called web, which is of type 'SP.Web'
Constructor is used to set the default values. In this case, the client context and Web objects are set.
Function to get necessary information.

The class is instantiated with the help of the object. During instantiation,

The properties will be loaded.
The constructor will set the necessary data for the properties.

In the constructor, the context object and Web object needs to be set, using the respective methods.

In the function, define the local variables for context and Web. Using the local context variable, the Web object is loaded and the query needs to be executed. The code will be very similar to ECMAScript programming. You can also write your custom logic to get the necessary information.

Using the class object, the function is called with dot operator. Afterwards, the necessary information is displayed.

The class will look, as shown below. The TypeScript sample, mentioned below gets the site title and displays it on the console.

class GetSiteInfo {
public context: SP.ClientContext;
public web: SP.Web;
constructor() {
this.context = SP.ClientContext.get_current();
this.web = this.context.get_web();
}
public GetLists() {
var webInfo = this.web;
var contextInfo = this.context;
contextInfo.load(webInfo);
contextInfo.executeQueryAsync(function () {
console.log(webInfo.get_title());
}, function () {
});
}
}

The necessary SharePoint core files need to be loaded before executing/referring to the class. TTypeScript code shows the logic to load and calls the function defined in the class, mentioned above.

$(document).ready(function () {
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
SP.SOD.executeOrDelayUntilScriptLoaded(() => GetData(), 'SP.js');
}, 'SP.RunTime.js');
});
function GetData() {
let getSite = new GetSiteInfo();
getSite.GetLists();
}

Note

Finally the type script needs to be translated to JavaScript. JavaScript file only should be uploaded and referred to from SharePoint pages. This has been explained in detail in my previous articles.
The sample code is attached in this article.

The snapshot, shown below shows the console output on the Browser.

Summary

Thus, you have learned about implementing the class, constructors and methods of TypeScript on SharePoint programming.