1

I need some help getting started in customizing the compiler output of typescript, or to be more precise if it is even possible.

I have the openui5 framework, which syntax, for example extending classes, varies strongly from ES5+ standards. Also AMD works differently.

Here is an example:

I would like to import a module. In typescript it should be:

import { Button } from "sap/m/Button";

which puts out something like this in javascript:

var Button = require("sap/m/Button");

But what I need here is:

var Button = sap.ui.require("sap/m/Button");

Another example:

Properties are resolved with getter and setter functions. So when you extend a class you can give it a json object with properties:

properties: {
   "title" : "string",                         // a simple string property, default value is undefined
   "buttonText" : {defaultValue: "Search"},    // when no type is given, the type is string
   "showLogoutButton" : {type : "boolean", defaultValue : true},   // a boolean property where a default value is given
   "width" : {type : "sap.ui.core.CSSSize", defaultValue : "50px"} // a CSS size property where a default value is given
}

now openui5 will take the given property and generate the setters. For example for the "title" property the two functions will be generated:

getTitle();
setTitle(value);

But no ES 5 property.

So in typescript you cannot access your property like this:

let myclass = new MyClass(); myclass.title = "Hello World";

but you will have to use the getter and setter methods:

let myclass = new MyClass(); myclass.setTitle("Hello World");

What I would like to do here is to write this typescript code:

let myclass = new MyClass();
myclass.title = "Hello World";

which transpiles to this javascript code:

let myclass = new MyClass();
myclass.setTitle("Hello World");

I think I can do this on my classes using decorators, but you cannot use decorators in declaration files (d.ts). So I cannot use the base classes this way.

So here is my question:

Is it possible to extend the typescript transpiler and tell it to compile this stuff differently?

A push in the right direction would be much appreciated.

3
  • It really sounds like what you want is to wait for a new version of openui5. Commented Jun 16, 2017 at 9:22
  • Are there plans to come closer to ES standards? Commented Jun 16, 2017 at 9:33
  • No idea, you'd have to consult their roadmap, which is almost impossible to search for even if it exists, since apparently there's a widget named Roadmap. Commented Jun 16, 2017 at 9:47

1 Answer 1

2

You can make your own transpiler.

  1. by extending TypeScript source codes
  2. by script using TypeScript Language Service (docs TSLS) and Compiler API (docs Compiler API) you can process scripts and build own transpiler by simple way.
  3. write code as framework requires.
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for that answer. I read through the compiler api. So here is a follow-up question: If I extend the ts compiler, I would have to deploy the sources and run it through gulp, for example. There is no way to somewhat "attach" scripts to the typescript compiler?
I think it is impossible. You can write your own compiler which update sources and then call normal compiler.
Ok, great. As I want to include it in a vscode extension I think I can make that happen. Thank you very much for your help. I'll have a look at the compiler API.
If you know a better way feel free to post it, I'll flag it as answer, or tell us why you think this is unrealistic or it is bad. For now it pushed me in the right direction. I am always thankful for any constructive help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.