Steps to Learn Developing UI5 Apps in TypeScript
This is how we recommend you as experienced UI5 application developer to learn programming UI5 apps in TypeScript.
It should not be understood as a strict curriculum to follow, but rather as recommendation. You might already know parts or not need other parts for your work.
Condensed Summary
- Don’t be afraid of “learning a new language” - it isn’t. It’s just JavaScript plus some type information.
- Get familiar with TypeScript by reading “TypeScript for JavaScript Programmers” and “The TypeScript Handbook”.
- Learn about modern JavaScript modules and classes, because you use them to write UI5 apps in TypeScript.
- Follow the UI5 TypeScript Tutorial to get end-to-end hands-on experience developing UI5 apps in TypeScript.
- Read this step-by-step documentation for creating a UI5 TypeScript setup from scratch, so you understand how the transpilation works.
- In case you get to develop controls, learn it here for single controls in an app and here for entire control libraries in TypeScript.
For additional experience, you can see some realistic TypeScript app code explained.
In any case, keep in mind that https://sap.github.io/ui5-typescript is the primary source of information regarding the use of UI5 with TypeScript, providing many additional resources, and important news can be found in the release notes.
The same, but with more explanations
Step 1: Don’t be afraid
Don’t be afraid of having to “learn a new language”: TypeScript is not a new language, but basically JavaScript with some additional type information on top.
Some suggest thinking of TypeScript as a linter (code checker) - one with type assertions written in the code. Which is not far off as TypeScript only checks the code at development time and is not in the game anymore at runtime.
Not only will most of what you write still be JavaScript, you will thanks to the transpiling even be allowed to write more modern JavaScript.
Step 2: Get familiar with TypeScript
The first step should be to read the “TypeScript for JavaScript Programmers” introduction written by the authors of TypeScript. It builds on your JavaScript knowledge and within few minutes gives an impression what TypeScript adds on top.
You should not stop there, though, but follow the recommendation to continue reading “The TypeScript Handbook” - the most important sections being the top-level topics like “Everyday Types”, “Functions”, “Object Types”, “Classes” and “Modules”, but also “Mapped Types” below “Type Manipulation”.
There are plenty of other TypeScript introductions, of course, which might also be valuable.
The “TypeScript Playground” is a great place to try things out quickly.
Step 3: Get familiar with modern JavaScript
Application code written in TypeScript needs to be transpiled to JavaScript, anyway. While during this transpilation many (not all) modern JavaScript features can be compiled to also run in very old browsers, the browsers currently supported by UI5 anyway offer great support for modern JavaScript features.
However: the UI5 type definitions actually sort of enforce using two of these modern JavaScript features - in particular ES modules (import/export instead of sap.ui.require(...) or sap.ui.define(...)) and ES classes (class Button {...} instead of Control.extend("Button", {...})).
Hence, read the documentation on modules and classes.
But it might still be a good opportunity to catch up on other useful JS language features you might have missed. The features explained in this introduction are actually not sooo new (ES2015), but still rarely seen in UI5 application code. Plus, the article has first-hand information about feature support by Babel (the transpiler also used in UI5 TypeScript projects).
Step 4: Get hands-on experience of UI5 and TypeScript
Do the exercises in the UI5 TypeScript Tutorial to get end-to-end hands-on experience how UI5 apps are developed in TypeScript. Within about two hours, it covers everything from creating the app from scratch (using the Easy-UI5 Generator) to developing controls in TypeScript and integrating third-party libraries.
Step 5: Understand how the transpilation setup works
In the tutorial, the setup is automatically created by the template. But it is good to know how it works even when you don’t need to do the setup on your own. Hence, read this step-by-step documentation for creating a UI5 TypeScript setup from scratch. It explains all the bits and pieces that control the transpilation and project structure.
The tiny app in the repository also brings these pieces to life.
Step 6: Learn developing controls in TypeScript - in case you need to
In case you get to develop controls in TypeScript, there is an introduction to developing custom controls as well as one for developing entire control libraries in TypeScript.
Step 7: Peek into a more realistic app
In 2020 we have developed a small UI5 app using OData V4 that has been used productively by more than 100,000 end-users. A sample app very close to that one and explaining what’s going on in the code has been published later and then converted to TypeScript.
Apart from simply looking at the code, you can also read this documentation highlighting some of the code parts with respect to TypeScript usage, and providing some more general explanations, including steps for converting apps to TypeScript.
Parts of this (very first) documentation might be overlapping with the other sources above, but other parts are unique.
Step 8: Know where to get more information
In general, https://sap.github.io/ui5-typescript/ is the primary source of information regarding the use of UI5 with TypeScript. It provides additional information, like how to report issues in the type definitions, links to further resources, like blog posts, videos etc., and keeps getting updated.
The release notes are the place to stay informed about new features and changes.
Legal Information & Privacy Statement
This site is hosted by GitHub Pages. Please see the GitHub Privacy Statement for any information how GitHub processes your personal data.
Please note the SAP terms of use.