打字稿中的条件返回类型

Question

I'm trying to loop over an array of functions (doing network calls) that return different types of configuration objects. Based on this configuration I'm rendering react components with different props. But I'm struggling to get typescript to co-operate in this.

Here's a simplified example of what I had so far;

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);
});

Whenever I loop over the array of config functions and call it, It seems to complain that none of the properties defined on the ConfigObject are present. Any tips/guidance here?

Answer 1

This is expected behavior. Your ConfigObject is either FirstConfig or SecondConfig . Before accessing their distinct properties you must resolve their type or if the property exists in that type.

There are different ways you can achieve this.

1. Define a custom type guard for checking a type.

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

sandbox link

2. Check if property exists in the object

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

3. Add a common property for all config types by which you can verify it's type

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

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

then you can check types like this

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

sandbox

4. Have a type for all configurations with properties set as optional

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

In this case you can write your initial code:

  const { a, b } = getConfig();

  console.log({ a, b });

sandbox