SAPUI5 and TypeScript: A good match?
In this blog post I am going to talk about the experiences we had coding a project using TypeScript along with SAPUI5 framework.
A brief introduction of TypeScript
As we’ve got to know TypeScript and its features, we wondered if we could apply it to a project and improve productivity, code readability and quality. We decided to give it a try, and faced several challenges.
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.
Please open images in new tab to better visualize them.
- We dropped Hungarian notation, since types are explicitly defined, allowing us to choose better names for our variables
- TypeScript’s module system is cleaner than SAPUI5’s.
- Template literals
- Async, await for asynchronous code
- You get instant feedback while you type your code, like what happens with other typed languages such as ABAP or Java.
- When you hover code, you get additional useful information about the artifact
OData entities to TypeScript definitions
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.
SAPUI5 Module System
- We assume sap.ui exists.
- We assume sap.ui.getCore() returns an object of type “sap.ui.core.Core”
- We assume “sap.ui.core.Core has a function called “getModel” which can be called without parameters and returns an object of type “sap.ui.model.Model
Type definitions are a way to formally define these assumptions so TypeScript can also work with them and help you catch errors. This way, the compiler can perform static checks instantly to see if my code makes sense.
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.
Also, we’ve also had work generating and manually writing correct type definitions for SAPUI5. It would be nice if this was provided by SAPUI5 team.
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.
We are having a nice experience with TypeScript and will use it again in future endeavors.