“TS2339：与汇总捆绑时，类型‘Vue’上不存在属性‘XX’”

Question

我有一个 Vue/TypeScript 类，它调用另一个 Vue/TypeScript 类的公共方法。它可以使用 tsc 或 WebPack 编译并运行良好。但是当使用 rollup 和 rollup-plugin-vue 进行编译时，我得到一个错误，Property 'close' does not exist on type 'Vue'.

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

Popover.vue：

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

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

DatePicker.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

我认为您可能遇到此问题是因为您没有在您的 Datepicker.vue 组件中注册 Popover 组件

另外，错误的另一个可能原因可能是您正在使用下面的这个 sn-p 来告诉 typescript 在使用 this.$refs.popover 时不要抛出错误。

 public $refs!: {
   popover: Popover
 }

也许你的意思是写this.$refs.popover.close()而不是this.popover.close()？

试试这个

日期选择器.vue

@Component({
  components: {
    Popover
  }
})
export default class DatePicker extends Vue {

    public $refs!: {
        popover: Popover
    }

    public get myMethod() {
        this.$refs.popover.close(); //using refs to access the DOM directly
    }
}