Скачать или смотреть 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 https://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: https://github.com/SAP-samples/ui5-ty...
The exact version of the tutorial used in the Video: https://github.com/SAP-samples/ui5-ty...
Runnable version of the app after each exercise: https://sap-samples.github.io/ui5-typ...

Alternative for OPA tests when “Given”/”When”/”Then” should still be used (only a draft):
collect the pages: https://github.com/SAP-samples/ui5-ty...
pass them to OPA: https://github.com/SAP-samples/ui5-ty...
also note how Pages and Journeys are different

UI5 TypeScript Central Entry Page: https://sap.github.io/ui5-typescript/
UI5 TypeScript Support Release Notes: https://sap.github.io/ui5-typescript/...
ui5-tooling-transpile: https://www.npmjs.com/package/ui5-too...
ui5-tooling-modules: https://www.npmjs.com/package/ui5-too...
@ui5/ts-interface-generator: https://www.npmjs.com/package/@ui5/ts...