Vue Typescript使用默认值为复杂对象定义 prop

new9mtju  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(217)

我正在尝试强类型并为组件中的对象属性给予默认值。该属性称为Entry。Entry结构是

interface Entry {
  id: number;
  body: string;
  emoji: Emjoi | null;
  createdAt: Date;
  userId: number;
}

这是使用SFC(单文件组件),组合API和<script setup>
但我似乎无法使用withDefaults获取属性的默认值
我浏览了Vue.js文档,找到了可以在www.example.com上使用的类型脚本https://vuejs.org/guide/typescript/composition-api.html#typing-component-props,对于数组,你可以这样做:

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

但我尝试对一个对象执行相同的操作,但出现了错误

interface Props {
  entry: Entry;
  userName: string;
}

const entryDefault: Entry = {
  id: 1,
  body: "",
  emoji: null,
  createdAt: new Date(),
  userId: 1,
};

const props = withDefaults(defineProps<Props>(), {
  entry: () => 
    {
      id: 1,
      body: "",
      emoji: null,
      createdAt: new Date(),
      userId: 1,
    },
tvmytwxo

tvmytwxo1#

错误是没有为条目添加返回。正确的代码如下所示:

const props = withDefaults(defineProps<Props>(), {
  entry: () => {
    return {
      id: 1,
      body: "",
      emoji: null,
      createdAt: new Date(),
      userId: 1,
    };
  },
  userName: "Unknown",
});

谢谢
莫里茨·林格勒求助

相关问题