javascript - 打字稿中的条件返回类型

Question

我正在尝试遍历返回不同类型的配置对象的函数数组（进行网络调用）。基于此配置，我正在渲染具有不同道具的反应组件。但我正在努力让打字稿在这方面进行合作。

这是迄今为止我所拥有的简化示例；

type FirstConfig = {
  a: 'a';
};

type SecondConfig = {
  b: 'b';
};

type ConfigObject = FirstConfig | SecondConfig;
type ConfigFunction = () => ConfigObject;
const configArray: ConfigFunction[] = [() => ({ a: 'a' }), () => ({ b: 'b' })];

configArray.map(getConfig => {
  const { a, b } = getConfig();
  console.log(a, b);
});

每当我遍历配置函数数组并调用它时，似乎都在抱怨上面定义的属性ConfigObject都不存在。这里有任何提示/指导吗？

标签： javascriptreactjstypescript

Answer 1

这是预期的行为。你ConfigObject的要么是FirstConfig要么SecondConfig。在访问它们的不同属性之前，您必须解析它们的类型或者该属性是否存在于该类型中。

有不同的方法可以实现这一目标。

1. 定义用于检查类型的自定义类型保护。

const isFirstConfig = (config: ConfigObject): config is FirstConfig => !!(config as any).a;

沙盒链接

2. 检查对象中是否存在属性

const config = getConfig();
if ("a" in config) {
  // the config is of FirstConfig type here
}

3. 为所有配置类型添加一个通用属性，您可以通过该属性验证它的类型

type FirstConfig = {
  type: "first";
  a: "a";
};

type SecondConfig = {
  type: "second";
  b: "b";
};

然后你可以检查这样的类型

const config = getConfig();
if (config.type === "first") {
  console.log("first type");
  // config is FirstConfig type in this 'if' block
}

沙盒

4. 具有所有配置的类型，其属性设置为可选

type ConfigObject = {
  a?: "a";
  b?: "b";
};

在这种情况下，您可以编写初始代码：

  const { a, b } = getConfig();

  console.log({ a, b });

沙盒