Typescript + Babel Plugin

[lucasheim]

Hello! I've been trying to create a minimal example using UI5 + Typescript + babel-plugin-ui5-next + https://github.com/ui5-next/types, but I'm having some problems that I'd like to know if you have inputs.

1 - Component Metadata In your example in https://github.com/ui5-next/ui5g (at least the Walkthrough one), you define your component metadata as a property, like this:

This is being a big problem for me as I haven't been able to create a typescript class variable syntax that outputs this code. I've tried:

private metadata = { manifest };
// transpiled code has metadata as a property being initialized in constructor. When going through your plugin, Component is not able to read the manifest

static metadata = { manifest };
// transpiled code has metadata being set after class definition with Component.metadata = { manifest}. Same error happens.

const metadata = { manifest }; // before class definition
// transpiled code has metadata out of class scope and the same error happens;

I imagine you know much better than me the inner workings of this metadata property, do you have any suggestions?

2 - Can I use just this plugin? As I said, I was trying to create a repo with the minimal infrastructure possible, so I didn't want to use all gulp tasks and wanted to focus just on TS -> JS transpile & JS -> UI5JS babel transformation, but I imagine several other things happen your gulp 'pipeline', because I got many of my javascript files to be really close to the ones on your sample project, but when I ran babel using ONLY the babel-plugin-ui5-next, I got errors like this:

When removing my export default from classes, it worked, but the JS files on your sample are export default, so I don't really understand if I need to go through other transformations before. A lot of the code I was testing for the Typescript transpiling I ended up copying and pasting to the ui5wt generated app so I could test if the transpiled JS ended up being a valid app.

If you've ever created a typescript sample with these tools you've created, I'd love to take a look. Just so you understand why I'm really interested in all your projects: currently we use UI5 and Typescript in my team, but we had to create a custom Typescript fork and this hinders us a bit, as we don't get the newest features. Besides that, using JSX and ES6 seems like the future for me, so I'm really hyped about all these things you've already made. I don't have a lot of knowledge in the inner workings of the frameworks, but I'm happy to help whenever possible.

For the code I'm making, it's available here: https://github.com/lucasheim/base-ts-ui5-jsx-project One thing to notice, one package I'm using, custdev-sapui5-infra-util is only available on SAP npm registry.

Thanks for the help!

[Soontao]

Got it. I'm on vacation today so that here is a quick reply.

In fact, now, babel plugin only support es6 syntax with flow type, and I think the only important thing is that ide integration (type doc, auto important), so that I created this module.

But I guess you want to create an strict-type ui5 project, it's an interesting idea, cause I don't think there are necessary to do strict type check for frontend, and it will reduce developers code flexibility.

All in all, there maybe have two solutions to introduce type check into ui5.

• Enhance babel-plugin-ui5-next (with babel-transform-tyoescript), directly compile ts to js. And just use ts tool to check type.
• Use flow type in js to check type.

From my mobile device, have a nice day or good night. :)

[Soontao]

I will do some feasibility check, maybe take 2 or 3 days. See you later.

[lucasheim]

Thanks @Soontao, you're a hero. I think strict typing is a tradeoff, losing flexibility to gain quality and being less error-prone when developing. Besides that, flexibility ends up being illusional a lot of times if you take into account possible runtime errors that could be type-checked.

[Soontao]

This plugin is compatible with Babel 7, so that this plugin could process typescript syntax now.

[Soontao]

• [x] Unit-T DD (IN PROGRESS)
  • [x] Basic Component/Control/Enum Tests
  • [x] More tests
• [x] Enhance babel-plugin-ui5-next, add typescript transform logic. (IN PROGRESS)
  • [x] Enum
  • [x] Generic
  • [ ] Namespace
  • [ ] Global
• [x] Rewrite gulpfile & build logic.
  • [x] gulpfile, include & exclude typescript
  • [ ] check before build
• [x] Test & fix plugin & make typescirpt project running. (IN PROGRESS)
  • [x] Create example project. (IN PROGRESS)

[Soontao]

Hello @lucasheim,

I've released a pre-alpha version for ui5 in typescript, and you just create a new ui5 typescript project with the skeleton Walk Through (Typescript) of generator-ui5g.

Attention, current generator only generate a project which COULD transform typescript to ui5 source, but NOT do the type check, user should to add script like tsc --noEmit before build to do the typescript type check.

Here are Transform Tests for Tyepscript

Here is A Guide Video

And, addtional, i've checked the custdev-sapui5-infra-util module in SAP internal github, and it's a grunt based build system, AND, if you want to integrate this babel plugin to grunt tasks, just reference my gulpfile tasks and re-define the tasks in the custdev-sapui5-infra-util, even you don't need to change the babelrc file.

If you have any other ideas, just add comments here.

Thanks

[Soontao]

closed by almost finished