Typescript error : Type 'HTMLElement | null' is not assignable to type 'string | HTMLElement | undefined'.

[messenjer]

Overview of the problem

Oruga version: 0.8.5
Vuejs version: 3.4.19
OS/Browser:

Description

When I upgrade to oruga 0.8, I have a typescript error.

Steps to reproduce

src/pages/MyPage.vue:260:49 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'string | HTMLElement | undefined'.

260 const loadingComponent = oruga.loading.open({ container: eltRef.value });

Expected behavior

As in the documentation, you must be able to have container === null

oruga/packages/docs/.vitepress/theme/examples/loading/programmatically.vue

Line 16 in 9693d7c

setTimeout(() => loadingComponent.close(), 3 * 1000);

function openLoading() {
    const loadingComponent = oruga.loading.open({
        fullPage: isFullPage.value,
+        container: isFullPage.value ? null : elementRef.value,
    });
    setTimeout(() => loadingComponent.close(), 3 * 1000);
}

Actual behavior

error TS2322: Type 'HTMLElement | null' is not assignable to type 'string | HTMLElement | undefined'.

[mlmoravek]

Sorry, I can't reproduce this type error :/

[messenjer]

No worries, thanks for Oruga ;-)

[messenjer]

Sorry, I didn't see that you'd changed your comment, after I replied. I've got the error in my project, I'll look into making a reproduction.

[messenjer]

Hello,

I've updated a branch of my project where I'm testing the version 0.8 of bulma to the new version 0.8.6.

I have fewer errors.

However, I still get this error in vscode, or with vue-tsc.

Here are some screenshots.

The type of oruga.loading.open: (method) open(params: ProgrammaticProps): ProgrammaticExpose

The error:

I think a solution would be to change the container type here to accept null.

https://github.com/oruga-ui/oruga/blob/134a72ce0acfda00a4ac1aa288de4b10ca2d242d/packages/oruga/src/components/loading/Loading.vue#L69C1-L72C7

    /**
     * DOM element where the loading component will be created on (for programmatic usage).
     * Note that this also changes fullPage to false.
     */
    container: {
-        type: [Object, String] as PropType<string | HTMLElement>,
+        type: [Object, String] as PropType<string | HTMLElement | null>,
        default: () => getOption("loading.container", "body"),
    },

I cannot reproduce it in a simple example.

But I think there is an issue in my repro because, the type of oruga.loading.open is (method) open(params: Readonly<any>): ProgrammaticExpose with a Readonly<any> instead of ProgrammaticProps

My repro : https://stackblitz.com/~/github.com/messenjer/oruga-typeerror

Regards

Mathieu

[mlmoravek]

@messenjer Try deleting the node_modules folder, the package-lock.json, reinstalling all dependencies and then restarting your ide. This solves the any as type problem for me.
And also try to update vue-tsc and and the volar extension.

However, i will consider adding null to the container prop type.