使用可区分的联合类型而不是可选属性

Question

I'm currently in the process of rewriting a JavaScript codebase into Typescript. I've discovered that the data in a function is defined like MyProps below:

interface MyProps {
  type: string;
  foo?: unknown;
  bar?: unknown;
  someCommonProps: unknown;
}

The usage has been like this:

const myFunction = (props: MyProps) => {
  const { type, foo, bar, someCommonProps } = props;
  if (foo) {
    //Do something
  }
  if (bar) {
    //Do something else
  }
};

By further investigation I see that the interfaces/types could be defined more precisely like this:

interface Foo {
  type: "a" | "b" | "c";
  foo: unknown;
}

interface Bar {
  type: "d" | "e" | "f";
  bar: unknown;
}

type FooBar = Foo|Bar;

type MyProps = FooBar & {
  someCommonProps: unknown;
}

But by assigning the new MyProps to props, I will get an error on the first line of myFunction: Property 'foo' does not exist on type 'MyProps'. And similar with 'bar'. What is the best way to handle this without rewriting in a way that may introduce bugs?

Answer 1

With classes you can do this this way:

class Foo {
    type: 'a' | 'b' | 'c';
    foo: unknown;
}

class Bar {
    type: 'd' | 'e' | 'f';
    bar: unknown;
}

type FooBar = Foo | Bar;

type MyProps = FooBar & {
    someCommonProps: unknown;
};

const myFunction = (props: MyProps) => {
    if (props instanceof Foo) {
        // Do something
        console.log(props.someCommonProps);
    }
    if (props instanceof Bar) {
        // Do something else
    }
};

Answer 2

If your tags are string unions, you can use switch(props.type) and enumerate all values in the cases:

const myFunction = (props: MyProps) => {
  switch (props.type) {
    case 'a': case 'b': case 'c':
      let x = props.foo;
      break;
    case 'd': case 'e': case 'f':
      let y = props.bar;
      break;
  }
};

This can be tedious in the long run, here's one possible way to automate:

let FooTag = ['a', 'b', 'c'] as const;

interface Foo2 {
  type: typeof FooTag[number];
  foo: unknown;
}

function isFoo2(x: Foo2 | Bar2): x is Foo2 {
  return (FooTag as readonly string[]).indexOf(x.type) >= 0;
}
...

const myFunction2 = (props: MyProps2) => {
  if (isFoo2(props)) {
    let x = props.foo;
  }
  if (isBar2(props)) {
    let x = props.bar;
  }

Play

Answer 3

While not as elegant, I think this is the easiest way achieve this:

const myFunction = (props: MyProps) => {
  const { type, someCommonProps } = props;
  const foo = 'foo' in props ? props.foo : undefined;
  const bar = 'bar' in props ? props.bar : undefined;
  if (foo) {
    //Do something
  }
  if (bar) {
    //Do something else
  }
};

Also consider if you can do something like this:

const foobar = 'foo' in props ? props.foo : props.bar;