Question

我有一个Vue / TypeScript类，该类在另一个Vue / TypeScript类上调用公共方法。它可以与tsc或WebPack一起编译并正常运行。但是在使用汇总和汇总插件版本进行编译时，出现了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

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

另外，该错误的另一个可能原因是，您正在使用以下代码段告诉打字稿在使用this。$ refs.popover时不要抛出错误。

 public $refs!: {
   popover: Popover
 }

也许不是写this.popover.close()，而是写this.$refs.popover.close()？

尝试一下

Datepicker.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
    }
}

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

1 个答案: