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

Question

情况：

我有一个项目，我正在尝试为其创建 mixin，并且 mixin 中的方法与来自组件和其他方法的数据发生反应。我的所有组件都从 veture 收到错误，指出组合的 vue 实例上不存在该方法。代码有效，我可以看到 mixins 正常工作，但我很好奇我应该怎么做才能摆脱我在项目中看到的 linting 错误。我在 vscode 中看到 Vetur 对代码的投诉，但是，我也在控制台中看到对 ts-lint 的投诉。

问题与期望

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

详细信息和代码

带有 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 错误的屏幕截图

我

Answer 1

问题是 Typescript 不够聪明，无法知道 Vue 中的 mixins 到底是什么。您有 2 个选择：

由于 mixin 扩展了 Vue，在您的组件中，您可以使用 YourMixin.extend 而不是 Vue.extend。请注意，此解决方案仅适用于单个 mixin。
如果一个组件中有多个mixin，你可以检查这个dependency。

可以在 forum 上找到进一步的阅读。

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

How to fix linter issues with mixins in vue-typescript?

typescript

vue.js

tslint

vetur

情况：

问题与期望

详细信息和代码

带有 Mixin 的 Vue 组件代码

Vetur 错误的屏幕截图

控制台中 tsLint 错误的屏幕截图