[Vuejs]-Ts2339 error: how to use typescript mixin in vuejs project?

by

0👍

✅

based on this issue
https://github.com/ktsn/vue-typed-mixins/issues/4
which i created in vue-typed-mixins’s github, it is a not-fixed issue which the author believes webstorm and Vuetr plugin should fix, and its not related to vue-typed-mixins.
however i think the problem still is related to vue-typed-mixins plugin, but i hope the problem will be fixed soon and should thank the author of vue-typed-mixins team, and webstorm team and Vuetr.

for those who (like myself) want to keep going with vue+typescript, there seems to be a better way to pass these problems, which is vue2-composition-api, which some teams has been using and told me it was ok with typescript and has no problem since there is no need to use mixin anymore.
is vuejs2.x composition api fully compatibile with typescript?

i hope it work…

👤SeyyedKhandon

1👍

You can use a package like vue-typed-mixins or migrate to the Vue class component pattern and use implements.

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

If you’re using vue-property-decorator, that has built-in support for mixins as well:

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

0👍

Not sure if this is still relevant but I found out by looking at the vue-router type definition file that you can manually add all necessary types for your mixin globally by extending the ComponentCustomProperties interface within the @vue/runtime-core module.

You should be able to include all type definitions by adding this to your mixin.ts file:

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

However I’ve only tested this in vscode using vue3 with regular single-file-componants and sometimes it was necessary to reload the current vscode window to apply all type changes to the runtime-core.

👤felgro

0👍

Figured out a technique that allows you to get typings for mixins in a Vue-TypeScript project with vue-property-decorator:

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

@Component
export default class YourMixin extends Vue {
    // make all your properties and methods public.
    // any properties that you don't want changing, should be marked 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) {
    // in Components that have one mixin, you don't need to do anything else, 
    // but if it has more than one Mixin, reimplement the Mixin 
    // properties without instantiating them:

    public test!: string
    public sampleMethod!: CallableFunction

    // sometimes TypeScript complains if you set a method's type as (arg: string) => void
    // because for some reason it thinks you're gonna use the arg even though
    // we are just defining a type, so just use the generic CallableFunction instead
}
👤OzzyTheGiant

Leave a comment