时间戳

首页 > 解决方案 > 如何在 Vue 3 Typescript 中定义可选数据

typescript - 如何在 Vue 3 Typescript 中定义可选数据

问题描述

我有来自 Vue 3 Typescript 代码库中的 API 的数据。当数据在传输中时，我想知道它丢失了。目前，这就是我的做法：

data() {
  return {
    apiData: null as DataType | null
  }
},
async mounted() {
  this.apiData = await getData()
}

问题是定义类型apiData: null as DataType | null很麻烦，而且感觉不对。除了这样的演员表之外，我还没有看到任何关于如何正确执行此操作的示例。

有没有更好的方法将对象的属性标记为可选类型？我知道接口，但我的对象是一种非常复杂的类型，可选数据只是它的一个属性......

谢谢您的帮助！

标签： typescriptvuejs3vue3-sfc-loader

解决方案

这可能是你能得到的最好的，就像数据属性和方法v3 指南一样：

这些 [data] 实例属性仅在首次创建实例时添加，因此您需要确保它们都存在于 data 函数返回的对象中。如有必要，对所需值尚不可用的属性使用 null、undefined 或其他一些占位符值。

如果你想让定义不那么麻烦，你总是可以定义一个类似opt<T>() => undefined as T | undefinedor的实用程序type Opt<T> = T | undefined。

data() {
  function opt<T>() { return undefined as T | undefined; }
  return {
    apiData: opt<DataType>(),
    foo: opt<Bar>(),
  }
},
async mounted() {
  this.apiData = await getData()
}

也就是说，如果您愿意添加另一个间接层，您可以Partial<YourData>在对象中保存的实例上安装可选属性data。因为Vue 可以代理“深度”嵌套属性访问，这应该让 Vue 有机会对更多属性的添加/删除做出反应，而无需预先定义它们。

interface OptionalData {
  prop1: string;
  prop2: number;
  apiData: DataType;
}

data() {
  return {
    optionalData: {} as Partial<OptionalData>
  }
},
async mounted() {
  this.optionalData.apiData = await getData()
}

当然，如果您必须对许多可选字段的存在或不存在做出反应，您的组件可能会变得难以理解。如果你发现你经常需要这种模式，它可能表明你有机会将你的组件重构为多个更小的组件，或者创建一个更丰富的模型对象来抽象出一些复杂性。

推荐阅读