lmcarreiro / ui5-typescript-example

a Master-Detail demo app (the same available in SAPUI5/OpenUI5 SDK) using TypeScript with npm ui5ts package

ui5-typescript-example

A Master-Detail demo app (the same available in SAPUI5/OpenUI5 SDK) using TypeScript with npm ui5ts package.

How to run

git clone https://github.com/lmcarreiro/ui5-typescript-example.git
cd ui5-typescript-example
npm install
npm start

UI5 TypeScript example class

import UIComponent  from "sap/ui/core/UIComponent";
import models       from "typescript/example/ui5app/model/models";

@UI5("typescript.example.ui5app.Component")
export default class Component extends UIComponent
{
    public static metadata: any = {
        manifest : "json"
    };

    public init(): void {
        // set the device model
        this.setModel(models.createDeviceModel(), "device");
        // call the base component's init function and create the App view
        super.init();
        // create the views based on the url/hash
        this.getRouter().initialize();
    }
}

Progress

I've published an incomplete work, not all classes of this example app was converted to typescript yet. But it is running fine, without error, and the core idea of working ui5 with typescript is the npm ui5ts package, that already works.

I hope that the classes in this example that is already converted to typescript are enough for you to understand how to do it, and start using typescript in your own ui5 projects.

• /controller
  • App.controller.js -> App.controller.ts
  • BaseController.js -> BaseController.ts
  • Detail.controller.js -> Detail.controller.ts
  • ErrorHandler.js -> ErrorHandler.ts
  • ListSelector.js -> ListSelector.ts
  • Master.controller.js
• /localService
  • mockserver.js -> mockserver.ts
• /model
  • formatter.js -> formatter.ts
  • grouper.js -> grouper.ts
  • GroupSortState.js -> GroupSortState.ts
  • models.js -> models.ts
• /test
• Component.js -> Component.ts

References

• ui5ts npm package: https://www.npmjs.com/package/ui5ts
• ui5ts github repository: https://github.com/lmcarreiro/ui5ts
• OpenUI5 Master-Detail template: https://openui5.hana.ondemand.com/#/topic/8ed9339f3a99418e82a02f0fb4b5d6b9
• OpenUI5 Master-Detail template repository: https://github.com/SAP/openui5-masterdetail-app

ui5-typescript-example's Issues

Build Issues -jQuery/index.d.ts and sap.d.ts

I am getting below issues with jQuery/index.d.ts and sap.d.ts

I am the steps given in the Readme were performed but when I build the app using Mac in Visual Studio Code (Command+ Shift +B ) it is throwing these errors.

Thanks for your help.

[10:40:48 AM] Starting compilation in watch mode...

node_modules/@types/jquery/index.d.ts:117:5 - error TS2717: Subsequent property declarations must have the same type. Property 'support' must be of type 'JQuerySupport', but here hastype 'PlainObject'.

117 support: JQuery.PlainObject;
~~~~~~~

node_modules/ui5ts/ui5-types/1.48/sap.d.ts:94179:48 - error TS2304: Cannot find name 'IterableIterator'.

94179 protected cellGenerator(): IterableIterator;
~~~~~~~~~~~~~~~~

node_modules/ui5ts/ui5-types/1.48/sap.d.ts:94185:50 - error TS2304: Cannot find name 'IterableIterator'.

94185 protected columnGenerator(): IterableIterator;
~~~~~~~~~~~~~~~~

node_modules/ui5ts/ui5-types/1.48/sap.d.ts:94262:47 - error TS2304: Cannot find name 'IterableIterator'.

94262 protected rowGenerator(): IterableIterator;
~~~~~~~~~~~~~~~~

[10:40:51 AM] Found 4 errors. Watching for file changes.

Better Typings - questions and feedback

Hi @lmcarreiro,

I wrote a parser to get better typings from the UI5 Documentation to use with your decorator.

check it out here:
https://github.com/apazureck/UI5TypescriptDefinitionParser/tree/develop

I tried to use it with your repo. Thus, I forked it:
https://github.com/apazureck/ui5-typescript-example

The fork contains the typings.

1. I used declare module "foo" to be file system independent.
2. I also tried to distinguish modules and globals to urge the programmer to use import foo from "bar" and get more stable code without missing modules. So maybe some globals are missing. I started with sap/ui/Global and declared everything there as module AND namespace.
3. There are not much generics so far, I just added generic sap.ui.base.Event class and Model class, but more will follow when everything is working

So I have some problems:

The transpiler seems to create a wrong import in mockserver.ts. It imports import MockServer from "sap/ui/core/util/MockServer"; as MockServer_1 in javascript, but the MockServer_1 has this structure:

{
  default: {
    default: function (e,t,n) { ... }
    }
  }
}

Which causes the error:

TypeError: MockServer_1.default is not a constructor
mockserver.ts:30
    at Object.init (c:\dev\ui5-typescript-example\src\localService\mockserver.ts:30:23)
    at http://localhost:3000/:31:24
    at c:\dev\ui5-typescript-example\out\resources\sap-ui-core.js:88:2587
TypeError: Cannot read property 'Binding' of undefined
extensions::runtime:7
    at extensions::runtime:7:46
Error: "Natives disabled"
extensions::app:7
    at (anonymous) (extensions::app:7:22)
Error: "Natives disabled"
extensions::webstore:7
    at (anonymous) (extensions::webstore:7:22)

I used my gulp to automate the build. The output is in the out folder. Sources are still in the src folder.
You should be able to use the example with vscode:

> npm install
> gulp

F5 will attach the debugger. Make sure the chrome debug extension is installed.

I do not understand properly what is happening in the factory and why there are two default exports, maybe you can help me understanding this problem and adjusting the typings accordingly?

Thanks & regards