Struggling with implementing TypeScript mixin in a Vue.js project?

Question

Struggling with implementing TypeScript mixin in a Vue.js project?

I recently made the switch from Vue.js to TypeScript, but now I am facing an issue with using mixins in TypeScript. I tried two different types of mixins, but unfortunately, none of them worked for me and I keep getting error ts2339. I couldn't find a solution on https://v2.vuejs.org/v2/guide/typescript.html#Basic-Usage.

Here is the first mixin:

//mixin.ts
import {ViewState} from "@/types";
import {mocked_view_state} from "@/api/mock/profile.device.group.mock";

export const ProfileDeviceGroup = {
  methods: {
    resetViewState(): ViewState {
      return mocked_view_state;
    }
  }
};

And here is the second one:

//mixin.ts
import Vue from "vue";
import {ViewState} from "@/types";
import {mocked_view_state} from "@/api/mock/profile.device.group.mock";

const ProfileDeviceGroup = Vue.extend({
  methods: {
    resetViewState(): ViewState {
      return mocked_view_state;
    },
  }
});
export default ProfileDeviceGroup;

So, does anyone have any suggestions on how to resolve this problem?

..............

Update:

..............

After trying out vue-typed-mixins, the initial problem was resolved. However, a new issue has emerged as shown in the image below: https://i.sstatic.net/3tKJ8.png

typescript vue.js vuejs2 mixins vue-mixin

Answer 1

Answer №1

Consider incorporating a package such as vue-typed-mixins or transitioning to the Vue"class component approach and utilizing implements.

@Component
export default class ComponentUsingMixins extends Vue implements MyMixin {}

If you are working with vue-property-decorator, it offers native support for mixins:

@Component
export default class ComponentWithMixins extends mixins(MyMixin) {}

Answer 2

Consider incorporating a package such as vue-typed-mixins or transitioning to the Vue"class component approach and utilizing implements.

@Component
export default class ComponentUsingMixins extends Vue implements MyMixin {}

If you are working with vue-property-decorator, it offers native support for mixins:

@Component
export default class ComponentWithMixins extends mixins(MyMixin) {}

Answer 3

Answer №2

After creating an issue on Vue-typed-mixins's GitHub page (https://github.com/ktsn/vue-typed-mixins/issues/4), it seems that the problem is not yet resolved and the author believes it should be addressed by Webstorm and Vuetr plugin developers, rather than being a Vue-typed-mixins issue. However, I still think that the problem may be related to the Vue-typed-mixins plugin. I remain hopeful that the issue will be fixed soon and would like to extend my gratitude to the author of Vue-typed-mixins, as well as the Webstorm and Vuetr teams.

For those, like myself, who are looking for solutions while working with Vue + Typescript, there appears to be a viable alternative in using the Vue2-composition-api. Some teams have reported success with this approach and assured me that it works well with TypeScript, eliminating the need for mixins altogether. Is Vuejs2.x composition api fully compatible with typescript?

Fingers crossed that it all comes together...

Answer 4

After creating an issue on Vue-typed-mixins's GitHub page (https://github.com/ktsn/vue-typed-mixins/issues/4), it seems that the problem is not yet resolved and the author believes it should be addressed by Webstorm and Vuetr plugin developers, rather than being a Vue-typed-mixins issue. However, I still think that the problem may be related to the Vue-typed-mixins plugin. I remain hopeful that the issue will be fixed soon and would like to extend my gratitude to the author of Vue-typed-mixins, as well as the Webstorm and Vuetr teams.

For those, like myself, who are looking for solutions while working with Vue + Typescript, there appears to be a viable alternative in using the Vue2-composition-api. Some teams have reported success with this approach and assured me that it works well with TypeScript, eliminating the need for mixins altogether. Is Vuejs2.x composition api fully compatible with typescript?

Fingers crossed that it all comes together...

Answer 5

Answer №3

Just discovered something cool in the vue-router type definition file that allows you to globally add necessary types for your mixin by extending the ComponentCustomProperties interface within the @vue/runtime-core module.

To include all type definitions, simply add this to your mixin.ts file:

declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        initializeViewState: () => ViewState;
    }
}

I've tested this feature in vscode with vue3 single-file-components and occasionally had to reload the vscode window to apply all type changes to the runtime-core successfully.

Answer 6

Just discovered something cool in the vue-router type definition file that allows you to globally add necessary types for your mixin by extending the ComponentCustomProperties interface within the @vue/runtime-core module.

To include all type definitions, simply add this to your mixin.ts file:

declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        initializeViewState: () => ViewState;
    }
}

I've tested this feature in vscode with vue3 single-file-components and occasionally had to reload the vscode window to apply all type changes to the runtime-core successfully.

Answer 7

Answer №4

Discovered a new method for obtaining typings for mixins in a Vue-TypeScript project using vue-property-decorator:

// your-mixin.ts
import Vue from "vue"
import { Component } from "vue-property-decorator"

@Component
export default class YourMixin extends Vue {
    // Ensure all properties and methods are public.
    // If there are certain properties that should not be altered, mark them as readonly
    public readonly test: string = "test"

    public get sampleNumber(): number {
       return 1
    }

    public sampleMethod(): void {
        
    }
}

// your-component.vue
import { Component, Mixins } from "vue-property-decorator"
import YourMixin from "@/mixins/YourMixin"

@Component
export default class YourComponent extends Mixins(YourMixin) {
    // For Components with only one mixin, no additional steps are needed,
    // but if there are multiple mixins, you must redefine the mixin properties without instantiation:

    public test!: string
    public sampleMethod!: CallableFunction

    // TypeScript may throw errors when setting a method's type as (arg: string) => void,
    // In such cases, use the generic CallableFunction instead of specifying the argument type
}

Answer 8

Discovered a new method for obtaining typings for mixins in a Vue-TypeScript project using vue-property-decorator:

// your-mixin.ts
import Vue from "vue"
import { Component } from "vue-property-decorator"

@Component
export default class YourMixin extends Vue {
    // Ensure all properties and methods are public.
    // If there are certain properties that should not be altered, mark them as readonly
    public readonly test: string = "test"

    public get sampleNumber(): number {
       return 1
    }

    public sampleMethod(): void {
        
    }
}

// your-component.vue
import { Component, Mixins } from "vue-property-decorator"
import YourMixin from "@/mixins/YourMixin"

@Component
export default class YourComponent extends Mixins(YourMixin) {
    // For Components with only one mixin, no additional steps are needed,
    // but if there are multiple mixins, you must redefine the mixin properties without instantiation:

    public test!: string
    public sampleMethod!: CallableFunction

    // TypeScript may throw errors when setting a method's type as (arg: string) => void,
    // In such cases, use the generic CallableFunction instead of specifying the argument type
}

Struggling with implementing TypeScript mixin in a Vue.js project?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Firebase causing Nuxt async to fail on page reload

What is the best way to transfer attributes from a sub-menu item to its parent in the hierarchy?

How can we avoid duplicating injectors in a child class when extending a class that already has injected services?

Tips for passing parameters from an anchor click event in TypeScript

Error occurs after upgrading React app to vite due to node-fetch issue

The Vue component fails to display the updated data even after the prop data has been modified

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

What is the best way to find the index of a row in a Bootstrap Vue table?

Perplexed by the implementation of "require(...)" in TypeScript

Tips for receiving an array input in a GraphQL resolver

Implementing data sorting in Vue and ASP.NET: A beginner's guide

Display tab content in Vue.js upon clicking

Definition file for mapbox-gl-draw in Typescript, also known as d.ts file

Learning the process of dynamically binding an id to an HTML tag in Vue.JS

Typing input props based on conditions

Ionic 5 plugin not loading correctly on iOS devices

Integrating social login using vue-authenticate with passport in a Node.js environment

Timed up 10-second countdown with vue.js

NG0900: Issue encountered while attempting to compare '[object Object]'. Please note that only arrays and iterable objects are permitted for comparison

Combining the power of Vue.js and .NET Core for a powerful M