在Vue中指定数据值的类型打字稿

问题描述

我仍然迷失在Vue（3）+ Typescript中，试图指定某种类型的数据属性。我添加了.d.ts文件，但无济于事。我正在尝试：

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

结果是：

'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]')

如果我在Modeler中定义methods实例，则一切正常：

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

我已将模块声明为bpmnjs.d.ts：

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

知道我在做什么错吗？

解决方法

最终使其正常工作：

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