在Vue（打字稿）中指定数据值的类型答案

【问题标题】：Specify type of data value in Vue (typescript)在Vue（打字稿）中指定数据值的类型
【发布时间】：2020-11-03 22:29:02
【问题描述】：

我仍然迷失在 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]')

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

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

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

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

知道我在这里做错了什么吗？

【问题讨论】：

#1，module 是保留的上下文关键字，因此不能将其用作类型。在任何情况下，您都可以转换您的数据属性。从 Typescript 1.6 开始，首选方法是使用 as。因此，在您的情况下，您可以将其转换为某些内容，例如：new Modeler({container: '#modeler'}) as InstanceType<typeof Modeler>
谢谢。您的类型声明建议似乎有效，但现在我遇到了下一个问题。我已经相应地更新了我的问题。

标签： typescript vue.js bpmn.io

【解决方案1】：

终于搞定了：

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

【讨论】：