如何使用 vue-typescript 中的 mixin 修复 linter 问题？

Question

Situation:

I have a project that I'm trying to create mixins for and the methods in the mixin react with data from the component and other methods. I'm getting errors on all of my components from veture stating that the method doesn't exist on the combined vue instance. The code works and I can see the mixins working but I'm curious as to what I should do to get rid of the linting errors I'm seeing in my project as well. I'm seeing Vetur complaints on the code in vscode, however, I'm also seeing complaints on ts-lint in the console.

Question and Expectations

What are causing these errors and how can I fix them? It's popping up multiple times for the components that use the same code and I thought mixins would be a good idea for re-usable code but it's becoming a hassle.

Details and Code

Vue Component Code with the Mixin

export default Vue.extend({
  name: 'RecentRequests' as string,
  data() {
    return {
      requests: [] as Request[],
      workflows: [] as Workflow[],
      environment: `${process.env.VUE_WEB_API}`,
      search: '',
    }
  },
  async created() {
    await RequestService.getRequest().then((response) => {
      this.$data.requests = response.Data;
    }).catch((err) => {
      this.$data.requests = null;
      this.$data.topFive = null;
      this.$store.dispatch('updateErrorMessage', {message: `${err}`});
      this.$store.dispatch('updateError');
    });
    await WorkflowService.getWorkflow().then((response) => {
      this.$data.workflows = response.Data;
    }).catch((err) => {
      this.$data.requests = null;
      this.$data.topFive = null;
      this.$store.dispatch('updateErrorMessage', {message: `${err}`});
      this.$store.dispatch('updateError');
    });
  },
  mixins: [globalMixins],
  computed: {
    filteredRequests() {
      let searchTerm = this.search.toLowerCase();
      let topFive: any = this.topFive()
      if(this.search === null || this.search === '') {
        return topFive
      } else {
        return topFive.filter((item: any) => {
            return item.WorkflowDisplayName.toLowerCase().includes(searchTerm);
        });
      }
    }
  },
  methods: {
    topFiveRequests() {
      // combine workflows first before running
      this.combineRequestsAndWorkflows(this.$data.requests, this.$data.workflows);
      // make copy of requests array
      const requestsCopy = this.$data.requests.map((x: Request) => x);
      // sort array by most recent
      const mostRecentRequests = requestsCopy.sort((a: any, b: any) => {
        const dateA: any = new Date(a.timeRequested);
        const dateB: any = new Date(b.timeRequested);
        return dateB - dateA;
      });
      const result = mostRecentRequests.splice(0, 4);
      return result;
    },
  },
})
</script>

Screenshot of error with Vetur

Screenshot of Error with tsLint in the console

I

Answer 1

The problem is Typescript is not smart enough to know, what mixins actually are in Vue. You have 2 options:

1. Since mixin extends Vue, in your component, instead of Vue.extend you can use YourMixin.extend . Note that this solution would work only in case of a single mixin.
2. In case of more than one mixin in a component, you can check this dependency .

Further reading can be found on the forum .