Uploaded May 2023 | Updated September 2026, 2 weeks ago
Let's talk TypeScript! Hubert Drecker will introduce us to odata2ts, a tool that generates TypeScript type definitions from OData metadata but also functions as an OData client with a typed query API. He will also tell us about a joint hackathon experiment using odata2ts with a mobx-based state management in UI5. Furthermore, Ilhan Myumyun will talk about the conversion of the UI5 Web Components code base to TypeScript and the newly introduced TypeScript decorators for defining component metadata. He will also go into the tooling support for developing custom UI5 web components in TypeScript.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:14 The odata2ts story (odata2ts.github.io/)
05:17 Key facts on odata2ts
05:53 Use cases for odata2ts
07:22 Generation process of odata2ts
08:56 Demo: Generate a TypeScript model interface using odata2ts
12:53 Demo: Generate a query object using odata2ts
14:08 Demo: TypeScript setup for developing UI5 applications using odata2ts (github.com/odata2ts/playground)
22:36 Demo: TypeScript setup for developing UI5 applications with MobX using odata2ts (github.com/odata2ts/playground)
28:38 Q/A: Why didn't you use the UI5 OData V4 model in the first place?
30:03 The beginning of TypeScript support in UI5 Web Components
31:24 Demo: Create a web application with TypeScript Using the new UI5 Web Components APIs
33:59 New practices developing UI5 Web Components in TypeScript
36:49 Demo: Developing UI5 Web Components in TypeScript
48:27 Closing words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
odata2ts generator: github.com/odata2ts/odata2ts
odata2ts documentation: odata2ts.github.io
odata2ts Playground: github.com/odata2ts/playground
Blog Post on type definition generators for OData by Andreas Kunz: blogs.sap.com/2023/04/13/ui5-and-typescript-how-to-generate-types-for-odata-services
Generated type in the sample repo: github.com/SAP-samples/ui5-cap-event-app/blob/typescript-odata2ts/packages/ui-form/gen/EventRegistrationServiceModel.d.ts
UI5 Web Component tooling: npmjs.com/package/@ui5/create-webcomponents-package
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
Let's talk TypeScript! Hubert Drecker will introduce us to odata2ts, a tool that generates TypeScript type definitions from OData metadata but also functions as an OData client with a typed query API. He will also tell us about a joint hackathon experiment using odata2ts with a mobx-based state management in UI5. Furthermore, Ilhan Myumyun will talk about the conversion of the UI5 Web Components code base to TypeScript and the newly introduced TypeScript decorators for defining component metadata. He will also go into the tooling support for developing custom UI5 web components in TypeScript.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:14 The odata2ts story (odata2ts.github.io/)
05:17 Key facts on odata2ts
05:53 Use cases for odata2ts
07:22 Generation process of odata2ts
08:56 Demo: Generate a TypeScript model interface using odata2ts
12:53 Demo: Generate a query object using odata2ts
14:08 Demo: TypeScript setup for developing UI5 applications using odata2ts (github.com/odata2ts/playground)
22:36 Demo: TypeScript setup for developing UI5 applications with MobX using odata2ts (github.com/odata2ts/playground)
28:38 Q/A: Why didn't you use the UI5 OData V4 model in the first place?
30:03 The beginning of TypeScript support in UI5 Web Components
31:24 Demo: Create a web application with TypeScript Using the new UI5 Web Components APIs
33:59 New practices developing UI5 Web Components in TypeScript
36:49 Demo: Developing UI5 Web Components in TypeScript
48:27 Closing words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
odata2ts generator: github.com/odata2ts/odata2ts
odata2ts documentation: odata2ts.github.io
odata2ts Playground: github.com/odata2ts/playground
Blog Post on type definition generators for OData by Andreas Kunz: blogs.sap.com/2023/04/13/ui5-and-typescript-how-to-generate-types-for-odata-services
Generated type in the sample repo: github.com/SAP-samples/ui5-cap-event-app/blob/typescript-odata2ts/packages/ui-form/gen/EventRegistrationServiceModel.d.ts
UI5 Web Component tooling: npmjs.com/package/@ui5/create-webcomponents-package
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
