如何解决 vue-typescript 中混入的 linter 问题?

Posted

技术标签:

【中文标题】如何解决 vue-typescript 中混入的 linter 问题?【英文标题】:How to fix linter issues with mixins in vue-typescript? 【发布时间】:2020-04-02 00:17:03 【问题描述】:

情况:

我有一个项目,我正在尝试为其创建 mixin,mixin 中的方法与来自组件和其他方法的数据发生反应。我从 veture 收到所有组件的错误,指出组合的 vue 实例上不存在该方法。代码有效,我可以看到 mixins 有效,但我很好奇我应该怎么做才能摆脱我在项目中看到的 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 的错误截图

【问题讨论】:

【参考方案1】:

问题是 Typescript 不够聪明,无法知道 Vue 中的 mixin 到底是什么。你有两个选择:

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

可以在forum上找到更多阅读。

【讨论】:

感谢您的帮助。我会继续阅读这篇文章,以确保我对 typescript 的理解达到了我需要的水平。

以上是关于如何解决 vue-typescript 中混入的 linter 问题?的主要内容,如果未能解决你的问题,请参考以下文章

带有 webpack 别名的 Vue-typescript 错误,找不到路径

如何从 Rails 中的控制器混入和调用 link_to?

SASS混入

Jackson Faster XML:如何解析抽象类'孩子?混入?

mixin混入

Vue:混入插件和过滤器