Issue with vue-class-component: encountering TS2339 error when trying to call a method within

Question

Issue with vue-class-component: encountering TS2339 error when trying to call a method within

My vuejs application is being built using vue-cli-service.

After a successful build, I encountered TS2339 errors in my webstorm IDE:

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

The error message in Test.spec.ts reads as follows, appearing in both the editor and typescript window:

Error:(14, 21) TS2339: Property 'method' does not exist on type 'Vue'.

Despite the error message, the test runs successfully at runtime when calling test.method().

typescript vue.js vuejs2 vue-class-components

Answer 1

Answer №1

After reviewing Steven's response, it became clear to me that shims-vue.d.ts is essential for utilizing components as typescript classes. However, the issue lies in them being recognized solely as Vue instances. This fact is evident when examining the contents of this file:

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

Currently, the most effective solution I have found is to define an interface implemented by my component:

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

Answer 2

After reviewing Steven's response, it became clear to me that shims-vue.d.ts is essential for utilizing components as typescript classes. However, the issue lies in them being recognized solely as Vue instances. This fact is evident when examining the contents of this file:

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

Currently, the most effective solution I have found is to define an interface implemented by my component:

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

Answer 3

Answer №2

Upon discovering that Vue files can utilize other Vue files as their declared classes, I decided to experiment by declaring Jest files as Vue components too. To my surprise, it worked seamlessly without the need for additional test-only interfaces.

This process involves two simple steps. First, append the .vue extension to Jest's test configuration in your package.json:

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

Next, rename your test files to have the .test.vue extension and enclose them within a <script> block:

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

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

// Your tests go here...
</script>

With this setup, you can now reference wrapper.vm as the actual declared component class type, ensuring compatibility with Vetur/Typescript in both the IDE and the compiler output.

Answer 4

Upon discovering that Vue files can utilize other Vue files as their declared classes, I decided to experiment by declaring Jest files as Vue components too. To my surprise, it worked seamlessly without the need for additional test-only interfaces.

This process involves two simple steps. First, append the .vue extension to Jest's test configuration in your package.json:

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

Next, rename your test files to have the .test.vue extension and enclose them within a <script> block:

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

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

// Your tests go here...
</script>

With this setup, you can now reference wrapper.vm as the actual declared component class type, ensuring compatibility with Vetur/Typescript in both the IDE and the compiler output.

Answer 5

Answer №3

Don't forget to include these lines above your function call.

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

If you want to combine the current Test interface, you can do it like so:

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

I'm not saying you should follow this practice, but your code will work...

The appropriate solution is to augment Vue's definition so that typescript will recognize your method. However, Vue should handle this automatically. Have you included the shims-vue.d.ts file? That's where the typescript magic happens.

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

In my experience, I've faced challenges with the Vue class syntax and resorted to using traditional syntax to avoid typescript errors:

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

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

The shims file helps Vue integrate with your components.

shims-vue.d.ts

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

Dealing with Multiple Vue Instances

There are times when Vue is imported from various sources causing issues with typescript.

Consider adding this to your tsconfig file.

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

In some cases, I've even had to include a webpack alias for this (however, this may cause build problems and is not a direct solution to your issue):

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

Answer 6

Don't forget to include these lines above your function call.

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

If you want to combine the current Test interface, you can do it like so:

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

I'm not saying you should follow this practice, but your code will work...

The appropriate solution is to augment Vue's definition so that typescript will recognize your method. However, Vue should handle this automatically. Have you included the shims-vue.d.ts file? That's where the typescript magic happens.

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

In my experience, I've faced challenges with the Vue class syntax and resorted to using traditional syntax to avoid typescript errors:

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

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

The shims file helps Vue integrate with your components.

shims-vue.d.ts

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

Dealing with Multiple Vue Instances

There are times when Vue is imported from various sources causing issues with typescript.

Consider adding this to your tsconfig file.

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

In some cases, I've even had to include a webpack alias for this (however, this may cause build problems and is not a direct solution to your issue):

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

Issue with vue-class-component: encountering TS2339 error when trying to call a method within

Answer №1

Answer №2

Answer №3

Dealing with Multiple Vue Instances

Similar questions

Creating table structure dynamically using Node.js

What is the best way to create and implement custom declaration files that are not available on @types or DefinitelyTyped?

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

The Vue input components are failing to render properly following the integration of different projects

How can I make sure that another function will only be executed after the completion of a function in

Creating a factory class in Typescript that incorporates advanced logic

Utilizing a JSDoc comment from an external interface attribute

The Vue-router is constantly adding a # symbol to the current routes, and it's important to note that this is not the typical problem of hash and

Merging two arrays in Typescript and incrementing the quantity if they share the same identifier

Learn how to showcase specific row information in a vuetify data table on Vue.js by implementing icon clicks

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Utilize Aframe to easily view and upload local gltf files

What causes functions operating on mapped objects with computed keys to not correctly infer types?

Send a variable from a next.js middleware to an API request

Displaying a disabled div depending on the dropdown selection in Angular Material

Encountering a challenge when upgrading to eslint version 9.0.0

Allowing the use of a string as a parameter in a Typescript constructor

I have encountered limitations with useFormik where it does not accept null values for initialValues, even while utilizing a validationSchema

My Babel-Loader seems to be failing in converting the vendor code to be compatible with IE8+. What might be causing this issue?

A useful tip for adding a blank line in a specific index of an array is to utilize the character while iterating through the array with a v-for loop to generate a list