"Unresolved variable or type…" using `@types/openui5`

OpenUI5 version: 1.97.0

In IDEA 2021.3, I’ve added @types/openui5 of 1.97.0 to the list of the JavaScript libraries. I’ve checked the content of sap.ui.core.d.ts, it does contain the definition of UIComponent. But at the same time, IDEA is not capable of resolving the sap.ui.core.UIComponent:

I’ve opened a ticket at IDEA: https://youtrack.jetbrains.com/issue/WEB-52649, but would like to understand is it an IDEA issue or the @types/openui5 definitions one?

[codeworrior]

It could be an option to additionally generate definition files which just re-add the globals and point the defined modules. These definitions could be loaded in addition to combine supported definitions and straightforward notation. But we won’t have capacity for this anytime soon.

Ehm, do you remember? We tried that in the beginning, and it didn’t work out. Initially, this was our preferred approach over having two separate type worlds which can’t be mixed. If I remember it correctly, one of the problems was that the necessary imports are not allowed in ambient files (only in modules) and another one was the dual type-and-value nature of e.g. enums that we didn’t manage to re-export in namespaces. IIRC (2), there had been many discussion around similar topics in the web community and they all ended up in going either way (globals or modules).

Well, but if someone has a good proposal how to achieve this, I would be glad to give it a second try.

[akudev]

Hi @pubmikeb Have you had a look at https://github.com/SAP-samples/ui5-cap-event-app/blob/js-with-typescript-support/README.md? In particular this section: https://github.com/SAP-samples/ui5-cap-event-app/blob/js-with-typescript-support/README.md#provide-type-information-for-loaded-dependencies

The @types/openui5 definitions do no longer support using global variables like sap.*. This is to promote using modern JavaScript language features like ES modules in newly written TypeScript apps. For JavaScript coding supported by those type definitions this unfortunately means that the type references in JSDoc need to be written in a module import way as well, as explained in the last link above:

/**
 * @param {typeof import('sap/ui/core/mvc/Controller').default} Controller
 * @param {typeof import('sap/m/MessageBox').default} MessageBox
 * @param {typeof import('sap/m/MessageToast').default} MessageToast
 * @param {typeof import('sap/m/InputBase').default} InputBase
 * @param {typeof import('sap/ui/model/Filter').default} Filter
 * @param {typeof import('sap/ui/model/FilterOperator').default} FilterOperator
 */
function (Controller, MessageBox, MessageToast, InputBase, Filter, FilterOperator) {

Please try typing the function parameters in this way!

If, e.g. for existing applications, you still need to use the global names, you can try using the @openui5/ts-types package of type definitions. This flavor of the UI5 type definitions still supports the globals and should be equivalent to (actually better than) the prior @types/openui5 pakages. However, it’s not the flavor which is in our focus for the future, so switching over to the module way would be a good thing in new projects.

Regards Andreas