ts定义IProps类型，给Props（object类型的属性）赋值默认值的方式

最新推荐文章于 2024-09-23 22:06:56 发布

zpp979

最新推荐文章于 2024-09-23 22:06:56 发布

阅读量4k

点赞数 9

分类专栏：关于Vue及其搭配的组件库文章标签： typescript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41285537/article/details/129988020

版权

关于Vue及其搭配的组件库专栏收录该内容

5 篇文章

订阅专栏

文章讲述了如何在TypeScript中定义一个名为IPropsUpload的props接口，其中包括accept、multiple和options字段。options字段是一个UploadOptions对象，包含chunkSize和simultaneousUpload两个必填属性。为了给props的options赋默认值，文章推荐使用一个返回UploadOptions类型的函数，而不是直接使用对象字面量，因为后者会导致某些属性无法被识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义一个props的接口：

interface IPropsUpload {
    accept?: string,
    multiple?: boolean,
    options: UploadOptions,
}
// 其中options是一个对象，接收上传是自定义的一些options
type UploadOptions = {
    chunkSize: number,
    simultaneousUpload: number,
}

此时，定义一个props，再给props的options的两个必填属性赋初始默认值

const props = withDefaults(defineProps<IPropsUpload>(), {
    accept: '',
    multiple: false,
    options: () => ({
        chunkSize: 1024,
        simultaneousUpload: 3
    })
});

这样赋值之后，可以检测一下是否正确有效：
在这里插入图片描述
这里aa属性报错未定义，但是chunkSize属性未报错，由此可见我们定义的有效。

注意：options要使用一个返回UploadOptions类型函数的方式赋值，不要直接使用一个对象字面量赋值（像下面这样）

// ❌❌❌
const props = withDefaults(defineProps<IPropsUpload>(), {
    accept: '',
    multiple: false,
    options: {
        chunkSize: 1024,
        simultaneousUpload: 3
    }
});

在这里插入图片描述