Sapui5 and typescript a good match sap blogs electricity freedom system

Isn’t it awful when you write a new piece of code in JavaScript and refresh your application just to find out that you mistyped a property name, or a function name? Imagine if there was a way we could calculate all the time we wasted. Well, there isn’t, but there might be a way of avoiding these types of silly errors, and perhaps even more complex ones.

TypeScript is an open-source programming language maintained by Microsoft that compiles into JavaScript. It is a typed superset of JavaScript, which means that any valid JavaScript is also valid TypeScript. Its main feature is static typing, which allow features such as static checking and code refactoring when developing JavaScript applications.

Some of the examples below come from the seamless integration between Visual Studio Code and the TypeScript language. As both of them are maintained by Microsoft, VS Code is one of the best IDEs to go for when developing with TypeScript, even though there are plug-ins for other ones, such as Sublime or VIM.

We’ve also written a script to parse the metadata.xml from our OData services and generate TypeScript type definitions for the OData entities. This way we get auto-complete and validations even for operations on OData entities. Difficulties SAPUI5 Module System

SAPUI5 implements its own module system, which is only used in SAPUI5 itself. This means we could not run the generated JavaScript code out of the box with SAPUI5. Leonardo Carreiro’s ( https://github.com/lmcarreiro/) solution was to generate the code with AMD modules and use a script to “bridge” AMD modules into UI5 modules. The code can be seen here. However, this was not a valid solution for us, because most of the time we cannot control the environment in which our SAPUI5 applications run, and it seems more like a workaround than a definite solution. Thus, we made the decision of forking the TypeScript compiler and add support for the “ui5” module system. This way, our generated code runs out of the box with SAPUI5. Type definitions

Another challenge we faced was getting access to correct SAPUI5 type definitions. JavaScript libraries interfaces can be defined as type definitions in TypeScript. For example, if I have correct type definitions for SAPUI5, the TypeScript compiler will know that if I call “sap.ui.getCore().getModel()” in my code, it should return an object of type “sap.ui.model.Model”. In pure JavaScript, with that line of code, we make several assumptions:

There were no up-to-date TypeScript definitions for SAPUI5. What we did was use the ui5ts project to generate them. It parses the SAPUI5 designtime documentation and generates the equivalent definition files. The generator worked for most of the classes, and we manually corrected the places it didn’t. I like, I wish

Although the experience with the tool was good, we’ve also ran into some issues on the process. As mentioned before, because SAPUI5 don’t use any of the module types that TypeScript supports, we’ve had to fork the compiler. This took a lot of work, and we still need to manually merge the upstream changes of the original TypeScript every time because of that. It would be nice if SAPUI5 started supporting one of the standard module loaders commonly used.

Overall, by using TypeScript, we could write cleaner code, define our interfaces better to detect errors early and develop faster, due to the productivity boost provided by the seamless integration between Microsoft’s TypeScript and the Visual Studio Code editor.