请教一个 vue3 中 ref 的问题

[sunmoon1983]

我有一个自定义的数据类型

export interface ICategoryFormData {
    id: number;
    cate_name: string;
    parent_id: number;
}

在页面中有一个变量formData

import { ref } from 'vue';

const formData = ref();

再我在我想给 formData 一个ICategoryFormData类型的默认值应该怎么做？ 能想到的一个方法就是这样

const data :ICategoryFormData={
	id:0,
	cate_name:'',
	parent_id:0,
}
const formData = ref<ICategoryFormData>(data);

现在问题来了，我不想每次都初始化一个data变量,如果ICategoryFormData中字段特别多，那么我就要手写很多，很多，所以我想问下，有没有什么更简洁的方法不用初始化ICategoryFormData就能给定formData 一个默认值呢？

[noe132]

const categoryFormDataRef = (data = {
id:0,
cate_name:'',
parent_id:0,
}) => ref(data)

const formData = categoryFormDataRef()

[sunmoon1983]

@noe132 你这还查初始化呀！每个字段都要赋一遍值

[shakukansp]

ts 并不能对运行时造成影响
你去掉 ts 怎么给它默认值，加上 ts 就还是怎么给，只是多了类型

[doommm]

没太懂。写一个工厂函数，返回一个 ICategoryFormData 类型的默认值，然后用到的地方调用一下就行了？或者写一个实现 ICategoryFormData 接口的 class ，但本质上是一样的，初始化的值需要你至少手写一次

[Bingchunmoli]

声明 interface 然后 export

[wleven]

const formData = ref<ICategoryFormData | undefined>()
调用的时候用可选链 formData?.id

[thinkershare]

编译器没有获取足够的信息, 并不知道自动给你填充足够的类型.
实在想跳过去可以这么做: ref({} as unknow as ICategoryFormData)

[molvqingtai]

as

[codingguy]

const formData = ref<Partial<ICategoryFormData>>({ })
提交时候
const values = formData.value as ICategoryFormData

[7gugu]

用 partial 套一下？

[tedding]

typescript 建议 不要在 interface 命名使用前缀 I ，对于 ICategoryFormData 可以 声明一个 class 代替，用的时候 实例化这个 class 来初始化你需要赋值的变量。class 可以 代替 interface 表示 变量的类型 使用。

[Biwood]

写类型的同时写一个常量用于保存默认值，如

export const DEFAULT_CATEGORY_DATA: ICategoryFormData = {
...
}

使用的时候直接 import 过来，用展开符或者 cloneDeep 函数复制一份即可

const formData = ref<ICategoryFormData>({ ...DEFAULT_CATEGORY_DATA })

可以不用每次都写一遍

[Zzzz77]

定义类型的时候 export 一个默认值出去，其他地方都 import 它就好了啊，再怎么样肯定也要手写一次呀

[chenjiangui998]

直接
```
const formData = ref<ICategoryFormData>(); // 实际是可选类型, 编译也是可选类型

const formData = ref({} as ICategoryFormData); //实际是可选的, 编译是 ICategoryFormData
```