我正在使用 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>
测试.spec.ts:
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 中,我在编辑器和 typescript 窗口中都遇到了这个错误:
Error:(14, 21) TS2339: Property 'method' does not exist on type 'Vue'.
但是测试没问题,所以test.method()
在运行时解析成功。
最佳答案
根据史蒂文的回答,我了解到 shims-vue.d.ts 是将组件用作 typescript 类所必需的。但问题是它们都被视为 Vue 实例。 查看此文件内容时,这一点很明显:
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
目前,我发现的唯一干净的方法是声明一个由我的组件实现的接口(interface):
模型.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>
测试.spec.ts:
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');
});
});
关于typescript - vue 类组件 : TS2339 when calling class method,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56457527/