'Auto complete of string unions inside discriminated objects

I am having string unions value inside an object discriminated by discrUnion:

type Discriminated =
  | {
      discrUnion: 'a';
      value: '1' | '2';
    }
  | {
      discrUnion: 'z';
      value: '8' | '9';
    };

I can now create a valid instance:

const test: Discriminated = {
  discrUnion: 'a',
  value: '1',
};

I can also create invalid instances:

const test2: Discriminated = {
  discrUnion: 'a',
  value: '8',
};

// or

const test: Discriminated = {
  discrUnion: 'z',
  value: '1',
};

Type checking works well here, and i am pointing out that type checking is not my problem.

My problem is that VS Codes auto completion offers me '1' | '2' | '8' | '9' for value, no matter what i set discrUnion to. What i actually expect is auto completion offering me '1' | '2' for discrUnion: 'a' and offering me '8' | '9' for discrUnion: 'z'.

Now, after several trial and error, i found out that when having at least 10 different options for discrUnion, the auto completion in VS Code actually starts making the job as i expect. Meaning, with 9 or less different options for discrUnion, i am still getting invalid values offered by auto completion for value, but after adding the 10th option, it works. Here's an example that offers correct auto completion on instantiation:

type DiscriminatedWithTenOptions =
  | {
      discrUnion: 'a';
      value: '1' | '2';
    }
  | {
      discrUnion: 'b';
      value: '1' | '2';
    }
  | {
      discrUnion: 'c';
      value: '1' | '2';
    }
  | {
      discrUnion: 'd';
      value: '1' | '2';
    }
  | {
      discrUnion: 'e';
      value: '1' | '2';
    }
  | {
      discrUnion: 'f';
      value: '1' | '2';
    }
  | {
      discrUnion: 'g';
      value: '1' | '2';
    }
  | {
      discrUnion: 'h';
      value: '1' | '2';
    }
  | {
      discrUnion: 'i';
      value: '1' | '2';
    }
  | {
      discrUnion: 'z';
      value: '8' | '9';
    };

So far, so good. But now, when i have an intersection of this second working example of DiscriminatedWithTenOptions with another type, auto completion again offers me invalid values that i don't want. Example:

type Intersected = DiscriminatedWithTenOptions & {anotherValue: number};

Instantiating Intersected leads to auto completion offering me invalid values again.

My questions:

  1. Why does auto complete for value only work with ten or more options for the discriminating union discrUnion?
  2. Why does auto complete for value not work when intersecting DiscriminatedWithTenOptions with another type?

UPDATE

I think that it is a typescript problem and not a VS Code problem, because the error message of tsc also differs:

Following code leads to following error:

type Discriminated =
  | {
      discrUnion: "a";
      value: "1" | "2";
    }
  | {
      discrUnion: "z";
      value: "8" | "9";
    };

const disc: Discriminated = {
  discrUnion: "a",
  value: "8",
};

enter image description here

And following code leads to another error:

type Discriminated =
  | {
      discrUnion: "a";
      value: "1" | "2";
    }
  | {
      discrUnion: "b";
      value: "1" | "2";
    }
  | {
      discrUnion: "c";
      value: "1" | "2";
    }
  | {
      discrUnion: "d";
      value: "1" | "2";
    }
  | {
      discrUnion: "e";
      value: "1" | "2";
    }
  | {
      discrUnion: "f";
      value: "1" | "2";
    }
  | {
      discrUnion: "g";
      value: "1" | "2";
    }
  | {
      discrUnion: "h";
      value: "1" | "2";
    }
  | {
      discrUnion: "i";
      value: "1" | "2";
    }
  | {
      discrUnion: "z";
      value: "8" | "9";
    };

const disc: Discriminated = {
  discrUnion: "a",
  value: "8",
};

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source