onedevatlasBeta
Browse the atlas
AllUI5CAPABAPBTP
All UI5FreestyleFiori elementsWeb Components
CapabilityDeveloper Experience

TypeScript support

Writing UI5 apps and libraries in TypeScript — the type definitions, the module syntax the loader expects, and the build step that gets from one to the other.

Overview

SAP SHIPSby design
Freestyle →

@openui5/sap.ui.core The OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.

@ui5/mcp-server SAP's MCP server for UI5 development: ten tools that scaffold an app or a card, read the project in front of the agent, and run the linter and the manifest validator against it.

Fiori elements →

@ui5/mcp-server SAP's MCP server for UI5 development: ten tools that scaffold an app or a card, read the project in front of the agent, and run the linter and the manifest validator against it.

Web Components →

@ui5/webcomponents SAP's UI elements as standard custom elements, ui5-button among them, implementing SAP Fiori design and usable from plain HTML, React, Angular or Vue.

Not covered: It stops at the types. Getting TypeScript through the UI5 build is a tooling extension, not part of the framework.

SourceSAPUI5 — TypeScript Supportchecked
THE COMMUNITY ADDS

Build tasks and a Babel transform from UI5 community and independent authors turn TypeScript into the sap.ui.define syntax the loader expects, ui5-task-transpile among them, and a task generates declaration files for a library written in JavaScript. ui5-community-jsx-runtime types views written as .tsx, and SAP's UI5 MCP server hands an agent the guidelines for converting a JavaScript app or control to TypeScript.

ui5-task-dts-generatorbabel-preset-transform-ui5@ui5-community/jsx-runtimeui5-task-transpile

Artifacts7

7 of 7 artifacts
ArtifactSignals
Build tools3
babel-preset-transform-ui5Babel transformer from modern ES or TypeScript to UI5 module syntax
Signals
none
ui5-task-dts-generatorUI5 builder task generating d.ts type declarations
Signals
none
ui5-task-transpileUI5 Tooling task transpiling TypeScript and ES modules
Signals
none
MCP servers1
@ui5/mcp-serverMCP server for UI5 development with ten tools
Signals
Functional boundary
Packages3
@openui5/sap.ui.coreFramework core: module loader, MVC runtime, binding, routing, theming
Signals
none
@ui5-community/jsx-runtimePlugin-based JSX runtime for UI5 views written as .tsx
Signals
Functional boundary
@ui5/webcomponentsSAP's UI elements as standard custom elements
Signals
Functional boundary

Content4

Group by
Piece, what it offers
TypeScript support4
UI5 Views, Reimagined: Type-Safe TSX for a Modern Dev Experience
YouTube — SAP Developers playlists, Peter Muessig, Talk
TypeScript Sheriff: How can I use TypeScript in the SAP ecosystem? (Part 2 of 3)
SAP Community, MikeDoyle, part 2 of 3, BlogThe reasoning
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 3/3
SAP Community, Mike Zaschka, part 3 of 3, BlogThe reasoningRunnable code
1 stale part
debug a CAP app with UI5 TypeScript UI component with VS Code
SAP Community, Volker Buzek, BlogRunnable code
@ui5-community/jsx-runtime1
UI5 Views, Reimagined: Type-Safe TSX for a Modern Dev Experience
YouTube — SAP Developers playlists, Peter Muessig, Talk

Seen working9

ArtifactSignals
Samples9
hacking-away-sampleappUI5con 2022 demo of an end-to-end TypeScript UI5 setup with CAP
none
SAP-samples/ui5-typescript-control-libraryUI5 control library written in TypeScript with full tooling setup
none
SAP-samples/ui5-typescript-helloworldSmall UI5 app with a guide to its TypeScript setup from scratch
none
SAP-samples/ui5-typescript-tutorialTutorial on TypeScript for UI5 apps via a weather-lookup app
none
ui5-monorepo-showcasepnpm workspace developing a UI5 app, library and plugin together
No license
ui5-tsappTypeScript UI5 app consuming custom UI5 CLI extensions together
none
ui5-tsapp-webcTypeScript UI5 app consuming @ui5/webcomponents
none
ui5-tslibTypeScript UI5 library with build, linting and Karma tests
none
ui5-tsmoduleTypeScript UI5 module consumed through ui5-tooling-modules
none

Details

Coverage
statecore and community, UI5
assessed
relationshipnarrow by design
domainDeveloper Experience
SourceSAPUI5 — TypeScript Supportchecked
For your agent
Ref
capability:ui5-typescript
JSON
/capabilities/ui5-typescript.json
MCP
Connecting an agent