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

【问题标题】：Missing return Type on Function in Vue 3 with Typescript使用 Typescript 在 Vue 3 中的函数上缺少返回类型
【发布时间】：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 中？你能分享一个重现问题的链接吗？

标签： javascript typescript vue.js vuejs3

【解决方案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 工作正常），则问题应该得到解决

【讨论】：