使用 TypeScript 处理 Vue 3 中的空引用的最佳方法？

Question

变量以空引用开始，例如它可能是以下之一：

const myString = ref();
const myString = ref('');
const myString = ref<string>();
const myString = ref<string | null>();
const myString = ref<string | null>(null);
const myString = ref<string | undefined>();
const myString = ref<string | undefined>(undefined);
const myString = ref<string | null | undefined>();

然后它被赋予一个值：

myString.value = "I am a string";

然后再次为ref 分配一个空值，例如它可能是以下之一：

myString.value = '';
myString.value = null;
myString.value = undefined;

这些的哪种组合最适合在 Vue 3 中使用？

或者也许你会做别的事？

当在野外使用时，我正在寻找与 Vue 3 的最大兼容性、TypeScript 类型安全性以及没有 Eslint 错误。

Answer 1

如文档所示，没有ref参数会导致推断的联合类型，并且需要更少的代码来实现结果：

// inferred type: Ref<number | undefined>
const n = ref<number>()

undefined在这种情况下和之间的区别null主要是语义上的。ref<string | null>(null)如果需要确定某个值是有意还是无意为空，则使用它可能会有所帮助，这可能有利于调试目的。而且它们在 JSON 中的行为也不同，如果一个值应该被序列化，那么这null是一个更好的选择。

ref('')如果值是否已初始化或只是空并不重要，并且存在需要处理null或undefined值的可选链接的字符串方法调用，则可以使用，例如myString.value?.toLowerCase().