UI5-TypeScript

UI5-TypeScript is an npm mono-repo that contains tooling to support TypeScript in SAPUI5 and OpenUI5 Projects. This tooling can enable:

• Better IDE integration for UI5 projects (e.g content assist).
• Using TypeScript compiler to perform type checks on UI5 application code.
• More easily implementing UI5 applications and controls in TypeScript thus enjoying the general benefits of TypeScript.

It currently contains two public packages:

• @ui5/dts-generator A generator which transforms the UI5 api.json format to TypeScript type definition (*.d.ts) format. This is useful to enable the type-safe usage of a UI5 control library written in JavaScript in code that uses TypeScript.

• @ui5/ts-interface-generator A tool supporting control development in TypeScript. It is used at development time and generates type definitions for the control API methods which are only created at runtime by the UI5 framework.

How to obtain the UI5 TypeScript signatures?

The UI5 type signatures are created and published as part of the UI5 build process. They are available for SAPUI5 as well as OpenUI5. The SAPUI5 type definitions can be obtained like this:

With npm

npm install @sapui5/types --save-dev

With Yarn

yarn add @sapui5/types --dev

NOTE: the type definitions define ES6-style module names for the entities. They require the usage of modern JavaScript syntax with ES modules and classes, which requires an additional transformation step that can be run together with the anyway required TypeScript transpilation.

Before the type definitions were generated in ES module style, they did declare all APIs with their global names, which are discouraged to be used and will no longer be available in UI5 2.x. The dts-generator still has the capability to generate this legacy "globals" version of the type definitions, for compatibility reasons. These legacy definitions are released as "ts-types" instead of "types", but will no longer be produced for UI5 2.x.

Find all information about using UI5 with TypeScript at https://sap.github.io/ui5-typescript!

Usage

To see the suggested project setup for TypeScript development with the types packages, please check out the TypeScript Hello World app. It not only can serve as copy template, but also includes a detailed step-by-step guide for creating this setup from scratch.

The TypeScript branch of the "UI5 CAP Event App" sample demonstrates a slightly more complex application, using the same setup. It comes with an explanation of what UI5 TypeScript code usually looks like and what to consider.

As mentioned, the best resource for using UI5 with TypeScript is https://sap.github.io/ui5-typescript.

See the demos directory for consumption examples of the legacy signatures.

Support

For issues caused by the generators please open issues on GitHub.
However, issues in the UI5 type definitions which are also present in the API documentation originate from the JSDoc comments in the original OpenUI5/SAPUI5 code, so please directly open an OpenUI5/SAPUI5 ticket in this case.

Contributing

See CONTRIBUTING.md.