[FEATURE REQUEST] Support typescript decorators

[coderjinhui]

In ts config

...
"experimentalDecorators": true,
...

in ts code

class BigButton extends Button {
...
    @someDecorator()
    fun1() {}
...
}

What to expect:

We hope the decorator will be compiled in target js file

Current:

In js file, the decorator only imported but not used

More info:

I try to write a babel plugin to handle the decorator, but when the babel visit the ClassMethod node, what I found:

1. node.decorators is null
2. the function name should be fun1, but what I get is _fun1

But when I remove the transform-ui5 preset, all information is correct.

[texttechne]

Hi @coderjinhui,

you also need to install this babel-plugin and reference it in your .babelrc.

The adaptation of your tsconfig.json only tells TS that a specific syntax is valid, but it doesn't perform the transformation itself.

[coderjinhui]

Hi @texttechne

Here is our babel config

{
	"presets": ["@babel/preset-env", "transform-ui5", "@babel/preset-typescript"],
	"plugins": [
		["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
	],
	"sourceMap": false,
	"ignore": [
		"**/*.d.ts"
	]
}

As we try to use decorators, the code always not work after compile.
And we check the compiled code, decorators only imported in sap.ui.define, but no place use it.

So I try to figure out the problem, I write the custom babel plugin to handle all the decorators by my self.
Below is part of my code:

......
visitor: {
      ClassMethod(path) {
        const { node } = path;
        // check the decorators
        const decorators = node.decorators || []; // node.decorators always null
        const name = getFunctionNameFromNode(node); 
        // name here always with "_" prefix, 
        // e.g. I have a class method "sendRequest", 
        // but what I get is "_sendRequest"
......

[texttechne]

I only toyed around with it shortly, so I can't really confirm if method level decorators do work. But it obviously worked for me, probably in combination with Mobx annotations.
See my comment there: The mentioned commit made it possible for the first time...

Also, as far as I can recall, the specification for decorators has changed.
Are you confronted with the old decorator style or the new one? In other words, what is your exact use case for decorators?
See https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy for example; might as well serve as entry into the discussion.

As side note, showing your package.json is always helpful...