Home

UNDER CONSTRUCTION!

Overview

VSCode Typescript Tools for UI5 is a selection to get UI5 to work with Typescript. Typescript is a superscript of Javascript which allows a rich development experience by having Intellisense, Code Completion, Code Lense, etc. at hand to speed up the development process.

The extension supports among other things

• Typescript declarations
• XML Linting for views and fragments
• i18n Label creation and management
• Connection of events and controllers

The Typescript decalrations are generated from the documentation of UI5 plus some typescript specific benefits. This means they just can get as well as the developers of openUI5 maintained their documentation. If you have problems and wrong declarations, please report them at the [https://github.com/SAP/openui5/issues](openUI5 repository).

Getting started with Typescript and UI5

To get started with typescript you can use the declarations found in the openUI5 typescript generator repository. Or you can build the generator using .NET and Visual Studio Community edition and generate them from the current version.

Note that the generated declarations will not work out of the box, as the generator does not handle the overloads correctly so far.

Advantages of Typescript

Typescript is a superset of javascript. It will compile to native Javascript (ES3 - ES6) code. The major benefit of typescript is during design time. As the name sais, it has Types and, thus, will check at design time, if the programmer uses the correct types, which will decrease the necessity of excessive unit testing.

But what advantages does it have using UI5 typescript declarations? Many users of UI5 will use the tools provides by SAP. If you use only openUI5 without any non-prorietary IDE it will lack design time checks, if the code is all right. Let us take the JSON Model for an example. You can instantiate a JSON model using

let model = new sap.ui.model.json.JSONModel({
    property1: 5,
    property2: "Hello World"
});

let hello = model.getData().property2;

But if you use the method model.getData() you will have no intellisense available at all. One feature of typescript is the introduction of generics. See the extended JSONModel:

type Partial<T> = {
  [P in keyof T]?: T[P];
};

namespace sap.ui.model.json {
  class JSONModel<T> extends sap.ui.model.ClientModel {
    constructor(oData?: T|Partial<T>, bObserve?: boolean);
    extend(sClassName: string, oClassInfo?: any, FNMetaImpl?: any): any;
    getJSON(): string;
    getProperty(sPath: string, oContext?: any): any;
    getProperty(sPath: string, oContext?: any);
    loadData(sURL: string, oParameters?: any|string, bAsync?: boolean, sType?: string, bMerge?: boolean, bCache?: string, mHeaders?: any);
    setData(oData: T);
    setData(oData: Partial<T>, bMerge: boolean);
    setJSON(sJSONText: string, bMerge?: boolean);
    setProperty(sPath: string, oValue: any, oContext?: any, bAsyncUpdate?: boolean): boolean;
    getData(): T
  }
}

We can now declare a generic JSONModel using a type in the constructor, which gives us code completion and intellisense. So you know or let others know what data they may expect from this json model:

interface IMyType {
  property1: number,
  property2: string
}

let model = new sap.ui.model.json.JSONModel<IMyType>({
  property1: 2,
  property2: "Hello World"
});

let hello = model.getData().property2;

This is just one example. As the project will grow and the generator will get better, this benefits will be available for Events and other classes, too. Furthermore, the whole API documentation will be at your service in your IDE making exploring UI5 as easy as eating pie.