vue-class-component : TS2339(콜링 클래스 메서드)

vue-class-component : TS2339(콜링 클래스 메서드)

vue-cli-service를 사용하여 vuejs 애플리케이션을 빌드하고 있습니다.

빌드는 성공했지만 웹스톰 IDE에서 TS2339 오류가 나타납니다.

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

Test.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 창 모두에서 다음 오류가 나타납니다.

오류:(14, 21) TS2339: 유형 'Vue'에 'method' 속성이 없습니다.

그래도 테스트는 괜찮으니까test.method()실행 시 정상적으로 해결됩니다.

문의하기 전에 추가해 주세요.

// tslint:disable-next-line 
// @ts-ignore 

기존 테스트인터페이스를 다음과 같이 결합할 수도 있습니다.

const test = wrapper.find(Test).vm as Test & {method()};

실제로 해야 한다는 말은 아니지만, 당신의 코드는...

이 문제를 해결하는 올바른 방법은augment Vue's그렇게 정의하다typescript이 메서드를 받아들입니다.하지만 그것은 Vue에 의해 자동으로 일어나야 한다.파일도 포함해서요? 거기서 활자 마법을 부리나요?

https://vuejs.org/v2/guide/typescript.html

그러나 Vue 클래스 구문 사용에 문제가 있어 텍스트가 다음과 같이 불평하는 것을 피하기 위해 구식으로 돌아가야 했습니다.

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        methods: {
          method(): string {
            return 'hello';
        }
    })
</script>

shims 파일은 Vue가 컴포넌트를 사용하여 자신을 확장하는 방법입니다.

shims-vue.d.ts

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

여러 Vue 인스턴스

가끔씩Vue여러 소스로부터 포함되어 있기 때문에, 타이프 스크립트가 엉망이 됩니다.

이 항목을 추가해 보십시오.tsconfig파일.

{
    "paths": {
      "@/*": [
        "src/*"
      ],
      "vue/*": [
        "node_modules/vue/*"
      ]
}

이 경우 웹팩 에일리어스를 추가해야 하는 경우도 있습니다(단, 이 건물은 발행된 건물이기 때문에 문제를 해결할 수 없습니다).

        'vue$': path.resolve(__dirname, 'node_modules', 'vue/dist/vue.esm.js'),

Steven의 답변에 따르면 component를 typecript class로 사용하기 위해서는 shims-vue.d.ts가 필요하다는 것을 알 수 있었습니다.그러나 문제는 이들 모두가 Vue 인스턴스로 간주된다는 것입니다.이것은, 다음의 파일의 내용을 보면 알 수 있습니다.

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

현시점에서는 컴포넌트에 의해 구현된 인터페이스를 선언하는 방법밖에 없습니다.

model.ts:

export interface ITest {
    method(): void;
}

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

Test.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');
    });
});

Vue 파일은 다른 Vue 파일을 선언된 클래스로 사용할 수 있다는 것을 알게 되었고, 그 결과 Jest 파일도 Vue 컴포넌트로 선언하게 되었습니다.놀랍게도, 테스트 전용 인터페이스를 추가할 필요가 없어졌습니다.

두 가지 단계가 있습니다.첫 번째로,.vueJest 테스트 구성에 대한 접미사를 지정합니다.package.json:

{
  "jest": {
    "testMatch": [
      "**/__tests__/**/*.test.ts",
      "**/__tests__/**/*.test.vue"
    ],
  }
}

둘째, 테스트 파일 이름을.test.vue포장해서<script>블록:

<script lang="ts">
import 'jest';

import { shallowMount } from '@vue/test-utils';

// Tests here...
</script>

, 그럼 에는 '어울릴 수 .wrapper.vmVetur/Typescript IDE입니다.

언급URL : https://stackoverflow.com/questions/56457527/vue-class-component-ts2339-when-calling-class-method