如何使用 vue-typescript 中的 mixin 修復 linter 問題？

Question

情況：

我有一個項目，我正在嘗試為其創建 mixin，並且 mixin 中的方法與來自組件和其他方法的數據發生反應。 我從 veture 收到關於我所有組件的錯誤，指出該方法在組合的 vue 實例中不存在。 代碼有效，我可以看到 mixin 正在工作，但我很好奇我應該怎么做才能擺脫我在項目中看到的 linting 錯誤。 我在 vscode 中看到 Vetur 對代碼的抱怨，但是，我也在控制台中看到了對 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 錯誤的屏幕截圖

一世

Answer 1

問題是 Typescript 不夠聰明，無法知道 Vue 中的 mixin 到底是什么。 您有 2 個選擇：

1. 由於混入延伸Vue的，在你的組件，而不是Vue.extend可以使用YourMixin.extend 。 請注意，此解決方案僅適用於單個 mixin。
2. 如果一個組件中有多個 mixin，您可以檢查此依賴項。

進一步閱讀可以在 論壇上找到。