| loio |
|---|
| 8439949bbdc34141bd2b9194f91d42c2 |
view on: demo kit nightly build | demo kit latest release
Frequently asked questions regarding TypeScript in OpenUI5.
TypeScript is an extension of JavaScript that enhances it with type information, enabling error detection through type checking and providing code assistance in numerous supporting code editors (such as code completion and inline documentation). It's important to note that browsers cannot directly execute TypeScript; a transpilation step is required.
We publish type definition files describing all the OpenUI5 APIs and types. With the help of these definitions, the TypeScript tools can do their job and support writing OpenUI5 apps in TypeScript.
For detailed information on developing applications with OpenUI5, see Developing Apps. To write OpenUI5 apps in TypeScript and take advantage of its benefits, you also need to add TypeScript and the OpenUI5 type definitions as dev dependencies. Additionally, you must set up the TypeScript transpilation step. The ui5-typescript-helloworld project can serve as copy template and provides a detailed step-by-step guide for setting up a TypeScript project.
How can I get an end-to-end hands-on impression of creating and developing a OpenUI5 app in TypeScript?
You can follow the ui5-typescript 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.
To start even faster, see one of the following app templates:
-
generator-ui5-ts-app: A plain app template that contains one view and basic routing setup and is explained in this blog post: Getting Started with TypeScript for UI5 Application Development. -
generator-ui5-ts-app-fcl: A more comprehensive template including a FlexibleColumnLayout and allowing OData service and entity configuration within the wizard.
You can follow the four steps explained in the Converting OpenUI5 Apps from JavaScript to TypeScript .
You can check the testing branch of the ui5-typescript-helloworld sample app.
Check the TypeScript Guidelines.
Check the js-with-typescript-support branch of the ui5-cap-event-app sample app. It explains how to add TypeScript-based benefits to an existing JavaScript app without actually switching to TypeScript development.
We provide type definitions, samples, and various tools. 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 in two different flavors. The two flavors are:
- The new type definitions (
types, used to be namedts-types-esmbefore version 1.113) which require the loading of dependencies as ES modules like import Button fromsap/ui/Button, encouraging the use of modern JavaScript language features. - The legacy type definitions (
ts-types) which allow the usage of global objects likesap.ui.Button. However, we do not recommend their usage.
These are the different type definition packages:
- The new type definitions: @openui5/types
- The legacy type definitions: @openui5/ts-types
- For versions before 1.113 the
typesdefinitions are available under a different name: @openui5/ts-types-esm
They are ready for use since version 1.116.