Specify type of data value in Vue (typescript)

Question

I'm still lost in Vue (3) + Typescript trying to specify a data property of a certain type. I've added a .d.ts file but to no avail. I'm trying this:

import Modeler from 'bpmn-js/lib/Modeler'
...
data() {
    return {
        modeler: {} as InstanceType<typeof Modeler> // ?????
    },
}
...
methods: {
    do() {
        this.modeler.importXML(someXML)
    },
}
...

This results in:

'get' on proxy: property '$pkg' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '[object Object]')

If I define the Modeler instance in methods things work just fine:

methods: {
    do() {
        const modeler = new Modeler({container: '#modeler'})
        modeler.importXML(someXML)
    },
}

I've declared the module as in bpmnjs.d.ts:

// bpmnjs.d.ts
declare module 'bpmn-js/lib/Modeler'

Any idea what I'm doing wrong here?

#1, module is a reserved contextual keyword, so you cannot use it as a type. In any case, you can cast your data properties. Since Typescript 1.6, the preferred method is using as. So in your case, you could cast it to something, such as: new Modeler({container: '#modeler'}) as InstanceType<typeof Modeler> — Ohgodwhy
– Ohgodwhy, Commented Nov 3, 2020 at 23:39
Thanks. Your type declaration suggestion seems to work, but now I bump into the next issue. I've updated my question accordingly. — Berco Beute
– Berco Beute, Commented Nov 4, 2020 at 15:46

Berco Beute · Accepted Answer · 2020-11-04 16:48:30Z

1

Finally got it working:

data() {
    return {
        modeler: markRaw({} as InstanceType<typeof Modeler>)
    }
}
...
mounted() {
    this.modeler = markRaw(new Modeler({container: '#modeler'}))
}

answered Nov 4, 2020 at 16:48

Berco Beute

1,2331 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Specify type of data value in Vue (typescript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related