This page provides an overview of all official TypeScript-related resources in the UI5 world.
To get started quickly with a hands-on example, you can jump into the UI5 TypeScript Tutorial right away, or, for a more structured approach, follow the learning guidance outlined here.
- What is TypeScript about?
- What is the overall approach for using TypeScript in UI5 applications?
- How can I get an end-to-end hands-on impression of creating and developing an app?
- How to set up a new UI5 app for TypeScript development?
- How to convert an existing UI5 app to TypeScript?
- How to develop custom controls in TypeScript?
- How to test in TypeScript?
- How to use third-party libraries from npm in UI5 apps?
- What are the TypeScript projects and releases provided by the UI5 development team?
- Where to report issues? What is the support status?
- What does it mean that the type definitions are “in experimental beta state”?
- Where can I find release notes or news about changes in the UI5 type definitions?
- What is the future roadmap for TypeScript in UI5?
What is TypeScript about?
What is the overall approach for using TypeScript in UI5 applications?
How to set up a new UI5 app for TypeScript development?
By adding TypeScript and the UI5 type definitions as dev dependencies and setting up the transpilation step. This can be done in few minutes. The “ui5-typescript-helloworld” project can serve as copy template and provides a detailed step-by-step guide for setting up a TypeScript project.
To get started even faster, there are two Yeoman-/easy-ui5-based TypeScript app templates:
- A plain app template which contains one view and basic routing setup and is explained in this blog post
- A more comprehensive template including a FlexibleColumnLayout and allowing OData service and entity configuration within the wizard.
How can I get an end-to-end hands-on impression of creating and developing a UI5 app in TypeScript?
There is a 1-2-hours tutorial, starting from scratch using an app template, extending the resulting app, and also covering advanced topics later on, like control development and integrating third-party libraries from npm.
How to convert an existing UI5 app to TypeScript?
How to develop custom controls in TypeScript?
There is documentation and sample code in the “custom-controls” branch of the Hello World application which explains how custom controls can be implemented in TypeScript within UI5 applications. It makes use of a tool for generating TypeScript interfaces for the control API which has been released via npm in alpha state. There is also a sample project that demonstrates how flull-fledged control libraries can be developed in TypeScript.
How to use third-party libraries from npm in UI5 apps?
Third-part libraries written for running in a browser environment can be easily used with very natural
npm install and
import <moduleName> from 'dependencyName', resulting in code completion for those libraries and automatic transpiling into UI5’s own AMD-like module format.
Exercise 8 of the TypeScript tutorial shows how this is done, including the required setup of the ui5-tooling-modules extension for the UI5 tooling.
How to test in TypeScript?
This topic is not covered by samples and documentation yet. While using qunit is straightforward, the OPA APIs cause a few difficulties for which suitable solutions are still being worked on.
What are the TypeScript projects and releases provided by the UI5 development team?
Type definitions, samples, and various tools. In detail:
UI5 provides generated type definitions for the UI5 APIs, which let TypeScript understand all the involved types, so it can do its job. These definitions are provided both for OpenUI5 and for SAPUI5, in two different flavors each. The two flavors are:
- the legacy type definitions (“ts-types”) which allow the (discouraged!) usage of global objects like
sap.ui.Button. They are not in our focus anymore and receive less support, but may still be needed for old application projects.
- the new type definitions (“ts-types-esm”) which require the loading of dependencies as ES modules like
Multiplied out, as result, there are four different type definition packages:
The “new OpenUI5” types are additionally provided via npm as
@types/openui5 via DefinitelyTyped because that’s the standard package name and place to share type definitions and easier to consume. These definition files are identical to
@openui5/ts-types-esm, but the versioning within a minor release and how the jQuery and QUnit types are referenced are slightly different (this should usually not be noticeable, though).
For control development in TypeScript, the control interface generator is provided.
Where to report issues?
Note that there is no official support guarantee, as the type definitions and code samples are provided “as-is”. However, it is in our interest to improve them and fix issues, so please report them:
- Issues in sample app code or documentation in the repositories linked above should be reported in the issue tracker of the respective GitHub repository.
- Issues within the type definition files can in general be reported in the issue tracker of the “ui5-typescript” project.
- However, when those issues are clearly coming from missing or wrong API documentation within OpenUI5, they can be reported as OpenUI5 issues. However, not all typing constructs of TypeScript can be expressed as JSDoc and converted to TypeScript by our generator (e.g. adding generics), so this should be mainly done for straightforward cases.
Before reporting an issue, please check the list of known issues.
What does it mean that the type definitions are “in experimental beta state”?
It means that we might make changes which require adaptation on your side after consuming updated type definitions. But don’t let this statement make you shy away from using them! The needed adaptations will not be large and there isn’t going to be a lot of difference once the types are no longer called “beta”: there will be no 100% compatibility guarantee either. So basically the type definitions are ready for use.
Find all the details here.
To keep track of any significant changes, observe the Release Notes.
Where can I find release notes or news about changes in the UI5 type definitions?
In short: here.
There is not one specific changelog for the type definitions, as they are influenced by changes in three different areas:
- the JSDoc across all UI5 code, which is the source of API information
- the UI5 JSDoc parser (extending the original JSDoc parser), which parses and processes the JSDoc
- the UI5 type generator, which turns the processed API information into TypeScript type definitions
The former two are included in the general UI5 “What’s New” and Change Log (which contain also many changes not affecting the type definitions, though).
The type generator, on the other hand, influences how the types are generated and can hence have a huge impact as well, independently of any UI5 changes. It is currently not developed in this repository, but for the time being we list any significant or even breaking changes on the release notes page (also ones originating from the UI5 JSDoc or parser).
What is the future roadmap for TypeScript in UI5?
The current focus is on getting to a state that is recommended for productive use, working on the unfinished corners, like providing better support and guidance for topics like testing, but also on an overall improvement of the TypeScript usage experience, so we are reacting on feedback and issue reports.
- There are also type definitions describing the manifest.json files. They are published inside @ui5/manifest on npm.
- The UI5con 2021 session on TypeScript (recording available at YouTube) explains and demonstrates the overall approach for TypeScript and UI5
- The “UI5 NewsCast” Podcast session #27 (“Bringing TypeScript to UI5”) explains background, history and the work being done in UI5 for TypeScript support.
- Blog post by Volker Buzek: How to debug a CAP app with UI5 TypeScript UI component with VS Code
- Blog post series “My first experience with TypeScript in UI5” by Wouter Lemaire:
- Blog post by Lena Hammerer: Full Stack TypeScript App for Cloud Foundry – Sample Repository, including a complete sample app on GitHub, which uses the SAP Cloud Application Programming Model (CAP) for Node.js.
The type definitions provided for UI5 are in an experimental Beta State. Significant changes can occur, including potential breaking changes. See the respective section above for details on the status and the release notes for significant changes.
The type definitions and tools for TypeScript support are provided as-is. For reporting issues, please see the respective section above.
Copyright (c) 2023 SAP SE and ui5-typescript contributors.
This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.
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.