vue-class-component ：调用类方法时出现 TS2339

我正在使用 vue-cli-service 构建我的 vuejs 应用程序。

构建成功，但在 webstorm IDE 中，我收到一些 TS2339 错误：

测试.vue：

<template>
    <div>{{method()}}</div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class Test extends Vue {
        public method(): string {
            return 'hello';
        }
    }
</script>

测试规格：

import 'jest';
import {mount} from '@vue/test-utils';
import Test from '@/views/common/Test.vue';

describe('Test.vue', () => {
    let wrapper: any;

    beforeEach(() => {
        wrapper = mount(Test);
    });

    test('test method call', () => {
        const test = wrapper.find(Test).vm as Test;
        expect(test.method()).toEqual('hello');
    });
});

在 Test.spec.ts 中，我在编辑器和打字稿窗口中都收到此错误：

错误：(14, 21) TS2339：类型“Vue”上不存在属性“方法”。

但测试没问题，所以test.method()在运行时已成功解决。

根据 Steven 的回答，我了解到 shims-vue.d.ts 是使用组件作为打字稿类所必需的。但问题是它们都被视为 Vue 实例。 查看此文件内容时，这一点很明显：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

目前，我发现的唯一干净的方法是声明由我的组件实现的接口：

模型.ts：

export interface ITest {
    method(): void;
}

测试.vue：

<template>
    <div>{{method()}}</div>
</template>

<script lang="ts">
    import { Component } from 'vue-property-decorator';
    import Vue from 'vue';
    import {ITest} from '@/views/test/model';

    @Component
    export default class Test extends Vue implements ITest {
        public method(): string {
            return 'hello';
        }
    }
</script>

测试规格：

import 'jest';
import {mount} from '@vue/test-utils';
import {ITest} from '@/views/test/model';
import Test from '@/views/test/Test.vue';

describe('Test.vue', () => {
    let wrapper: any;

    beforeEach(() => {
        wrapper = mount(Test);
    });

    test('test method call', () => {
        const test = wrapper.find(Test).vm as ITest;
        expect(test.method()).toEqual('hello');
    });
});