My first experience with TypeScript in UI5 – Setup project

[WouterLemaire]

Around April SAP announced for the first time TypeScript Support for UI5. Since then, I’ve tried to use this in every new UI5 project where possible. Now it is time to share what my experience with TypeScript in UI5 in this blog post series:

• Introduction 


• Project setup (current)


• Adding a BaseController


• OData Model Service wrapper


• Using Classes and State/Model Manager


• Final part

In my first blog post I started with an introduction on what TypeScript is, how to get started and the challenges I faced: https://blogs.sap.com/2021/11/19/my-first-experience-with-typescript-in-ui5-introduction/ 

In this blog post I will share how I started my demo project which I will use in this blog post series as an example. I will generate a TypeScript UI5 project, add the Fiori tooling and connect it the northwind service as demo purpose.

You can follow this video or continue reading through the steps:

Generate project

For generating the project, I used the easy UI5 yeoman generator. This can be installed with the following command:

npm install -g yo generator-easy-ui5

As soon as this generator is installed you can type “yo” to get a list of all installed yeoman generators:

When you select “Easy UI5”, it will provide a list of ui5 generators:

“generator-ui5-ts-app” is the TypeScript generator.

Fill in all the questions and your first TypeScript in UI5 will be generated for you 😊

Thanks to the Easy UI5 generator you are up and running with TypeScript in UI5 in no time. All thanks to mariusobert !

The generator comes with additional configuration compared to a “normal” UI5 project to support TypeScript. One of the things you’ll notice is that it comes with more scripts for building and starting the app.

The build script will still build the full app but will first compile the TypeScript to JavaScript and put it in the webapp folder. It will create a webapp folder in case there is no. After that it will run the UI5 build command on the webapp folder as we are used to. On top of that the generator provides scripts for self-contained builds. Because of this we have now 5 build scripts 😊

Similar for the start script, to run locally the TypeScript code has to be compiled to JavaScript in the webapp folder. It is the webapp folder that is being served locally. The “watch:ts” script makes sure we always see the latest changes from TypeScript appearing in our browser. A simple refresh won’t do the job, every time you change code in TypeScript it needs to be compiled to JavaScript. “start:ui5” will serve the webapp folder which contains the compiled JavaScript code.

Running “npm start” starts both scripts in parallel.

The project comes with some more devDependencies. This is because the build:ts and watch:ts uses babel to compile TypeScript to JavaScript. It requires the babel cli, core and preset-env with the preset preset-typescript. The preset is also used in the babel configuration:

Next to that, it requires the ui5 types to provide you autocompletion in your IDE: “@openui5/ts-types-esm” which is configured in tsconfig.json:

devDependencies:

 

Add fiori tooling

I also add the fiori tooling to my project to configure my backend service. There are other UI5 Tooling extensions that can be used for this as well, you can find a full list here: https://ui5-community.github.io/ui5-ecosystem-showcase/

Why I use the Fiori tooling in this case? It does the job + offers SAP support 😊

Install Fiori tools as a devDepencency:

npm i @sap/ux-ui5-tooling -D

Register the Fiori tooling to the UI5 tooling as a UI5 depenency:

Configure Northwind service

Add the proxy configuration to “services.odata.org” by using the fiori tooling in the ui5.yaml file:

server:

  customMiddleware:

  - name: fiori-tools-proxy

    afterMiddleware: compression

    configuration:

      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted

      backend:

      - path: /v2

        url: https://services.odata.org/

Add the path to the northwind V2 OData service as a datasource in the manifest.json:

"dataSources": {

	"Northwind.svc": {

		"uri": "/V2/(S(mo4mpsdbi0fygmzhfv5ik5gf))/OData/OData.svc/",

		"type": "OData",

		"settings": {

			"odataVersion": "2.0",

			"localUri": "localService/metadata.xml"

		}

	}

}

Define the main model using the Northwind datasource in the manifest.json:

"": {

	"dataSource": "Northwind.svc",

	"type": "sap.ui.model.odata.v2.ODataModel",

	"settings": {

		"defaultOperationMode": "Server",

		"defaultBindingMode": "TwoWay",

		"defaultCountMode": "None"

	},

	"preload": false

}

 

The UI5 project is ready for the next steps developing UI5 with TypeScript!

 

You can already see how it looks by running npm start