Vue3 + TypeScript 中数组prop默认值函数报缺少返回类型错误如何解决

错误原因 #

这个报错是TypeScript类型校验触发的，和Vue props数组默认值的标准写法无关，是你的TypeScript配置要求所有函数必须显式声明返回类型，而你当前的default箭头函数没有标注返回值类型导致的。

修复方案 #

给default函数加上对应数组类型的返回值注解即可，如果你还不确定数组内的元素类型，可以先用unknown泛型占位，代码示例如下：

<template>
  <div>        
    <ul v-if="list.length !== 0">
      {{ list }}
    </ul>
  </div>
</template>
<script lang="ts">
export default {
  props: {
    list: {
      type: Array,
      // 这里添加返回类型注解，知道元素类型的话可以替换unknown为对应类型
      default: (): Array<unknown> => {
        return []
      },
    },
  },
}
</script>

如果你明确知道数组的元素类型，比如是字符串数组，直接把Array<unknown>替换成Array<string>或者简写string[]即可，类型会更严谨。

如果你临时不想给所有函数加返回类型，可以调整tsconfig.json中的noImplicitReturns配置为false，但不推荐这么做，显式标注类型更利于后期维护。

内容的提问来源于stack exchange，提问作者DnD2k21