Learn to use TypeScript with UI5 [Tutorial]

If you know UI5 app development, but want to learn how to do it in TypeScript, this tutorial is for you. In 100 minutes, Andreas Kunz from the UI5 development team not only guides you through the UI5 TypeScript Tutorial, but also adds hints how to avoid pitfalls and provides some background information.
You can follow along on your own machine, the only prerequisites are NodeJS (v18.0+) and a TypeScript-capable code editor like Visual Studio Code.
NOTE: when using NodeJS version 21 (or above), you have to use at least easy-ui5 version 3.7.0.
The exercises can be found at github.com/SAP-samples/ui5-ty....
Overall, the video tutorial covers the following aspects:
- Short TypeScript Intro
- Create TypeScript app+setup from Easy UI5 Template
- Develop a weather app
- Use third-party packages from NPM
- Develop a Custom Control
- Testing
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome and Intro
01:49 TypeScript Overview
06:28 Tutorial Start
08:00 Exercise 0 - Get Prepared (Yeoman + Easy UI5)
09:24 Exercise 1 - Create TypeScript Application from Template and run it
12:12 Explanation of the Code (Exercise 2.1 handled early)
17:35 Exercise 1.3 - Run the App
20:00 Exercise 2 - Create the User Interface and Load Data
22:50 Exercise 2.3 - Load Data
27:09 Exercise 2.4 - Linting
31:44 Exercise 2.5 - Extend the User Interface
35:30 Exercise 3 - React on User Input
37:39 Exercise 3.2 - Add Controller Code
39:12 Using the new Event Types
46:27 Exercise 4 - Use Third-Party NPM Packages
50:37 Exercise 4.2 - Adding the Third-Party Package
54:40 Exercise 4.3 Using the Third-Party Package
1:03:22 Exercise 5 - Create and Use a Custom Control
1:09:52 Exercise 5.2 - Use the New Control in the UI
1:12:04 Exercise 5.3 - Generate Control Interface with the ts-interface-generator
1:19:10 Exercise 6 - Testing
1:23:03 Exercise 6.1 - Fixing the QUnit Test
1:26:38 Exercise 6.2 - Fixing the OPA5 Journey
1:35:07 Exercise 6.3 - Executing the Tests Using Karma; Code Coverage
1:38:21 Final Words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
The UI5 TypeScript Tutorial on GitHub: github.com/SAP-samples/ui5-ty...
The exact version of the tutorial used in the Video: github.com/SAP-samples/ui5-ty...
Runnable version of the app after each exercise: sap-samples.github.io/ui5-typ...
Alternative for OPA tests when “Given”/”When”/”Then” should still be used (only a draft):
- collect the pages: github.com/SAP-samples/ui5-ty...
- pass them to OPA: github.com/SAP-samples/ui5-ty...
- also note how Pages and Journeys are different
UI5 TypeScript Central Entry Page: sap.github.io/ui5-typescript/
UI5 TypeScript Support Release Notes: sap.github.io/ui5-typescript/...
ui5-tooling-transpile: www.npmjs.com/package/ui5-too...
ui5-tooling-modules: www.npmjs.com/package/ui5-too...
@ui5/ts-interface-generator: www.npmjs.com/package/@ui5/ts...

[@viquaronline]

Thank you for the tutorial 😊 please upload more such topics

[@IMaiaPT]

Very cool! Could you make a video showing an example of a Dialog created from a xml fragment file ? Also what extensions on vscode you recommend ?

[@NilsLutz]

there is a very good example for dialog creation from XML fragments in the official UI5 docs.

[@IMaiaPT]

@@NilsLutz I have done, it seems is the same like in js, I though I was going to have a problem asserting the fragment :p

[@AndreasKunz-SAP]

Regarding the VSCode extensions, I do not officially recommend anything specific and I also do not have a long and well-chosen list of them installed. However, some relevant ones I use are: the UI5 Language Assistant, which helps a lot with the controls and properties in XMLViews, GitLens, Markdown Preview GitHub Styling and "open in browser" (for the code coverage page in the video)

[@hothachnguyen2559]

Hello. Regarding reusing libraries, how can we generate them with static types? Moreover, if we incorporate these libraries into our projects, how do we ensure we can take advantage of all the TypeScript benefits?

[@ui5videos]

There has been an improvement recently. When you now build a TypeScript library like the one at github.com/SAP-samples/ui5-typescript-control-library, then in addition to the d.ts file created for each control by the ts-interface-generator, the build will also create a d.ts file for the rest of the control, using regular TypeScript compiler functionality. All these d.ts files are then referenced from an also generated index.d.ts file in dist, which you should point to from the "types" in package.json. Is this the "static types" you mean? In any case, this enables applications using your library as dependency to get all the type information for a smooth TypeScript experience.

[@user-ye3hb9cq7x]

Great video! But i have some problems when I'm doing Create App with Yeoman step When I run script and terminal give me error (env.lookup(...).filter is not a function) So what can I do to solve this issue Thank you so much!

[@ui5videos]

This error is known to happen with NodeJS 21 and easy-ui5 3.6.x. It has been fixed already, so simply use easy-ui5 3.7.0 (or use node 18 or 20). Sorry, we have answered earlier but somehow the previous reply was removed, maybe because it contained a link to a commit on GitHub. Anyway: hope this helps.

[@CerxMe]

Could you do this but for TypeScript developers with no UI5 knowledge?

[@AndreasKunz-SAP]

A TypeScript version of the "Walkthrough" UI5 tutorial is currently being created. Once it is done, it could be the base of such a video (but not promising anything).

[@misterx6443]

Is there a link to buy this exact UI5 T-Shirt ?

[@ui5videos]

The T-Shirt is available on spreadshirt.de. Just search for UI5 😉