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.

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:

Alternative for OPA tests when “Given”/”When”/”Then” should still be used (only a draft):
- also note how Pages and Journeys are different

[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 ?

[manupiu]

Great session, what does it mean for customers using Fiori? Does existing Fiori elements will be migrated to Typescripts?

[hothachnguyen]

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?

[ChươngLê-ym]

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!

[CerxMe]

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

[misterx]

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