UI5 Library TypeScript Generator

[WouterLemaire]

Introduction

When building UI5 apps you will need to develop a custom UI5 control sooner or later. Doing this requires (or at least it is recommended to do so) to bundle those UI5 controls in a library. With TypeScript support for UI5 you do not only develop UI5 apps in TypeScript but most likely also UI5 Controls and libraries. For kickstarting your UI5 library and UI5 control there was no TypeScript generator yet, until now 😊.

 

Based on this TypeScript UI5 Library demo repository of Andreas Kunz and the already existing UI5 Library generator of Geert-Jan Klaps, I was able to create a TypeScript version of the UI5 Library generator.

TypeScript UI5 Libray and Control demo repo from Andreas: https://github.com/SAP-samples/ui5-typescript-control-library

UI5 Library generator of Geert-Jan: https://blogs.sap.com/2021/01/24/kickstart-your-ui5-library-development-with-the-ui5-library-generat...

Installation

The new TypeScript UI5 Library generator can be used from in the “Easy UI5” Generator, so you first have to install Yeoman:

npm i -g yo

The generator can be started with the following command:

yo easy-ui5 ts-library

Or just by selecting from the Yeoman menu:

Generate

In the “Easy UI5”  generator you’ll find “ts-library”:

Answer all questions:

Once all is completed, it will generate the library and immediately start installing all npm dependencies. In case npm start results in an error, try running npm install again.

In the end, you’ll have the following project generated to kickstart developing UI5 Controls in TypeScript:

All config files are generated following the recommendations of SAP.

Run

Run the command “npm run start” to test the library:

This will open the test page to see your control:

With this you should be good to go for building UI5 controls and Libraries with TypeScript!

Help

Feel free to provide feedback or add improvements by using pull requests on the GitHub repo of the UI5 TypeScript Library generator: https://github.com/ui5-community/generator-ui5-ts-library