如何将数组设置为 props 的默认值（Vue 组合 api + Typescript）

Question

使用 Vue 3（组合 api）+ Typescript ，我尝试在使用接口定义道具后设置它们的默认值。当我尝试[]在其中一个道具上设置默认值时，出现打字稿错误。如何设置默认的空数组？

<script setup lang="ts">

interface IProps {

  title: string;
  things: any[];
  productUrl: any;
}

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  things: [],            //<-- error (se below)
  productUrl: "",
});

错误：

Type 'never[]' is not assignable to type '(props: Readonly<IProps>) => any[]'.

它还说：

The expected type comes from property 'things' which is declared here on type 
'InferDefaults<Readonly<IProps>>'

Answer 1

对象或数组属性默认值必须从工厂函数返回。Vue 文档在prop 验证下提到了这一点

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  things: () => [],
  productUrl: "",
});