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

Question

情况：

我有一个项目，我正在尝试为其创建混入，并且混入中的方法会与组件和其他方法中的数据反应。我从veture得到所有组件的错误，指出该方法在组合的vue实例上不存在。代码可以正常工作，我可以看到mixins正常工作，但是我很好奇该如何消除我在项目中看到的掉毛错误。我看到Vetur对vscode中的代码有抱怨，但是，我也看到控制台中对ts-lint的抱怨。

问题和期望

是什么导致这些错误，如何解决？对于使用相同代码的组件，它会多次弹出，我认为mixins对于可重用的代码是个好主意，但现在却变得很麻烦。

详细信息和代码

带有Mixin的Vue组件代码

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>

Vetur错误的屏幕截图

控制台中tsLint错误的屏幕快照

I

Answer 1

问题是Typescript不够聪明，无法知道Vue中实际上有什么混合。您有2个选项：

1. 由于mixin扩展了Vue，因此可以在您的组件中使用Vue.extend代替YourMixin.extend。请注意，此解决方案仅在单个mixin的情况下有效。
2. 如果一个组件中有多个mixin，则可以检查此dependency。

可以在forum上找到更多的读数。