"TS2339：与汇总捆绑时，属性'XX'在类型'Vue'上不存在

Question

我有一个Vue/TypeScript类，它在另一个Vue/TypeScript类上调用公共方法。它与tsc或WebPack一起编译并运行良好。但是当使用rollup和rollup插件vue进行编译时，我得到一个错误，即类型“vue”上不存在属性“close”

复制链接：https://repl.it/@orobert91/PropertyDoesNotExistOnTypeVue

爆米花。vue：

import { Component } from "vue-property-decorator";
import Vue from "vue";

@Component
export default class Popover extends Vue {
    public close() {
        this.isShown = false;
    }
}

日期选择器。vue：

import Popover from "components/commonControls/Popover.vue";
import { Component } from "vue-property-decorator";
import Vue from "vue";

@Component
export default class DatePicker extends Vue {

    public $refs!: {
        popover: Popover
    }

    public get myMethod() {
        this.$refs.popover.close(); //COMPILATION ERROR HERE
    }
}

tsconfig。json配置文件：

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "es6",
        "target": "es6",
        "jsx": "react",
        "jsxFactory": "h",
        "strict": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "declaration": true,
        "declarationDir": "./dist",
        "baseUrl": "./src",
        "outDir": "./dist",
        "plugins": [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

rollup.config.js配置文件：

import vue from 'rollup-plugin-vue';
import resolve from 'rollup-plugin-node-resolve';
import cleaner from 'rollup-plugin-cleaner';
import copy from 'rollup-plugin-copy';
import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/index.ts',
    output: {
        format: 'esm',
        file: 'dist/index.js'
    },
    external: ['vue'],
    plugins: [
        resolve(),
        tsPlugin({
            typescript: ttypescript
        }),
        vue(),
        cleaner({
            targets: [
                './dist/'
            ]
        }),
        copy({
            targets: [
              { src: 'src/laravel-mix', dest: 'dist/' },
            ]
        })
    ]
};




Answer 1

匿名用户

我认为您可能有这个问题，因为您没有在您的D组件中注册Popover组件atepicker.vue

此外，出现错误的另一个可能原因可能是，您正在使用下面的代码片段来告诉typescript在使用此代码时不要抛出错误$裁判。爆米花。

 public $refs!: {
   popover: Popover
 }