使用 Typescript 在 Vue 3 中的函数上缺少返回类型

Posted 2023-02-23

【中文标题】使用 Typescript 在 Vue 3 中的函数上缺少返回类型

【英文标题】：Missing return Type on Function in Vue 3 with Typescript

【发布时间】：2022-01-04 10:12:12

【问题描述】：

我的代码是这样的，

    <template>
      <div>        
        <ul v-if="list.length !== 0">
          
            list
          
        </ul>
      </div>
    </template>
    <script>
    export default 
      props: 
        
        list: 
          type: Array,
          default: () => 
            return []
          ,
        ,
        
      ,
    
    </script>

我是否遗漏了什么，因为我在这一行遇到错误：

我也尝试了此页面的解决方案，但没有任何效果。

Vue 2 - How to set default type of array in props

【问题讨论】：

正如错误所说，您缺少函数返回类型default: () : Array => ...。你定义了 prop 类型，但没有定义函数返回类型。

你能发布一个解决方案吗？因为你上面写的代码不起作用。

Array 也需要一个元素类型或只是any，例如Array<number>。不幸的是，按照您的代码，我不知道这种类型应该是什么。

应返回字符串列表

@typescript/eslint 通常只在 TypeScript 上运行。为什么它会显示在您的 javascript 中？你能分享一个重现问题的链接吗？

【参考方案1】：

这不是错误，而是匿名函数应指示返回类型的警告。您的 IDE 会显示支票的名称，搜索它会转到带有 good examples 的页面。

警告应该这样修复：

list: 
  type: Array,
  default: ():Array => 
    return []
  ,
,

【讨论】：

现在显示新错误。类型注解只能在 TypeScript 文件中使用。

【参考方案2】：

正如错误所说，您缺少函数返回类型。你定义了 prop 类型，但没有定义函数返回类型。

它应该看起来像这样（代替任何你还应该指定类型）：

export default 
  props: 
    list: 
      type: Array,
      default: () : Array<any> => 
        return []
      ,
    ,
  ,

【讨论】：

显示错误 ==> 类型注解只能在 TypeScript 文件中使用。出乎意料。指定不同的类型。

如错误所说，将any 更改为string（如您在之前的评论中所说）。如果您仍然无法弄清楚，请在此处（在您的帖子中）或例如创建最小的工作示例。在代码沙箱上，因为你的项目一团糟，很难猜出你有什么。我不知道你的项目设置是什么。

【参考方案3】：

作为一般提示，我建议如果您使用 Vue 3 + Typescript，您应该利用 defineComponent 函数来包装您的组件选项对象，如下所述：https://v3.vuejs.org/guide/typescript-support.html#defining-vue-components。如果您使用推荐的 linting 设置（并且您的 IDE 工作正常），则问题应该得到解决