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.
Hi Nathan. Cool post, is this Typescript fork available anywhere ?
Hello, it is available in the corporate GitHub. You can add it to your project by adding
It is only available internally at SAP, we don't have plans to open-source it for some time.
See also the extensive discussion and large amount of work done here: https://github.com/SAP/openui5/issues/88
There is also a set of typings available on DefinitelyTyped. It would be really helpful to the OpenUI5 and SAPUI5 communities if SAP would use and contribute back to these community projects.
These type definitions on DefinitelyTyped are currently not up-to-date, and in the case of my project, we used sap.ui.vk controls, which only exist in SAPUI5. Therefore, they were not a good fit for us... But I agree with you, it should 'definitely' get more attention 🙂
The cool thing about DefinitelyTyped is that you can send a pull request 😉 You could even add SAPUI5 types under a different module. It would be incredibly helpful to the community and the development of the ecosystem around these projects if SAP made the work it has already done available.
I know there are process issues around OSS contributions, so I don't fault the team, but those process issues really hamper UI5's development.
Please check this new mono-repo out:
Specifically the openui5 TypeScript signatures package on npmjs.com
Any feedback and/or contributions are highly welcome. 🙂
Please Note that this is in BETA state...
It's been a while since the last comment on this thread, but Typescript support has no official support from SAP, so every community drive solution counts a lot.
From the previous comments it seemed that your solution, creating a fork on Typescript, was never to be released to the public, but then this npm https://www.npmjs.com/package/typescript-ui5 was publish and now has the status deprecated.
Is it a working solution though? Any plans on developing it further or open source it? The community seems eager to help 🙂
Thanks for focusing on this aspect and sharing your findings.
It’s a pity that SAPUI5 implements its own module system, which is only used in SAPUI5 itself. Why not to use a standard and common approaches such as AMD or ECMAScript 2015 native modules?
It would be great to have an official TypeScript by SAPUI5, out-of-box, without some forks or work-arounds. This will allow reducing time to market for UI5-based solutions and provide more user-friendly development process, since with the TypeScript a developer can benefit from better IDE integration and get more modern JS code at the end.