typescpript_sample_20201124.ts

Hi @petermuessig ,

	wow, what a comprehensive answer! Thank you very much!!! These were exactly the pointers I was lacking.
		Especially the mentioned Babel plugin is brilliant: It does the heavy lifting for using a modern syntax and still achieves backwards compatibility. And it plays well with your middleware (no surprise there :-)).

		So I've tried to get this running and succeeded. My steps were:

	adapt your livetranspile middleware to also search for ts files, not just js files. I'm planning on submitting a PR for your middleware soon. Also I haven't adapted the build task, but this shouldn't be too hard either.
		wiring the new middleware in ui5.yaml
	Install the essential babel plugins
	babel-preset-transform-ui5
	plugin-proposal-class-properties for converting class properties
		@babel/preset-typescript
	Additionally all other useful transforms: proposal-object-rest-spread ...
		add TS types: @sapui5/ts-types
	install typescript
	configure typescript => tsconfig.json
	add "types": ["@sapui5/ts-types"] => global sap namespace is available then
	add "typeRoots": ["./ts-types"] => references a local folder ts-types for manual type patching
		declare modules manually in ts-types/index.d.ts
	Step 7 looks like:

		declare module "sap/ui/core/UIComponent" {
		  export default sap.ui.core.UIComponent;
	}
	declare module "sap/ui/core/mvc/Controller" {
		  export default sap.ui.core.mvc.Controller;
	}
	Would be great if the module declaration could be generated by the UI5 dts generator. But it's easy enough right now to do it manually...

		That's it. Example Component.ts:

```

		import UIComponent from "sap/ui/core/UIComponent";
		import ResourceModel from "sap/ui/model/resource/ResourceModel";
		import JSONModel from "sap/ui/model/json/JSONModel";
		import BindingMode from "sap/ui/model/BindingMode";
		import Device from "sap/ui/Device";

		/**
		 *  * @namespace sampleApp
		 *   *
		 *    * will result in UIComponent.extend("sampleApp.Component", { 
		 *     *   metadata: { manifest: "json" }, 
		 *      *   init: function() { ... }
		 *       * })
		 *        */
		export default class Component extends UIComponent {
			  public static metadata = {
					manifest: "json",
				};

				private contentDensityClass: string | undefined;

				public init() {
				// call the init function of the parent
			 		super.init();
			 // UIComponent.prototype.init.apply(this, arguments);

			 // i18n
			 this.setModel(new ResourceModel({ bundleName: "ewm.verladung.i18n.i18n" }), "i18n");

					 // set device model
					 const deviceModel = new JSONModel(Device, false);
					 deviceModel.setDefaultBindingMode(BindingMode.OneWay);
					 this.setModel(deviceModel, "device");

					 // init router
					 this.getRouter().initialize();
				 }

			 public getContentDensityClass() {
				 if (!this.contentDensityClass) {
					 if (!Device.support.touch) {
							 this.contentDensityClass = "sapUiSizeCompact";
					 } else {
						 this.contentDensityClass = "sapUiSizeCozy";
					 }
				 }
			 return this.contentDensityClass;
			 }
	 }

```