title: Object unions don't work as expected in TypeScript
body: <p>Suppose I have a config interface and a variable which assigns the interface to it:</p>
  <pre><code>interface Config {
      plugins: {
          name1: {
              foo: boolean;
          },
          name2: {
              foo: boolean;
              bar: boolean;
          }
      }
  }
  
  const config: Config = {
      plugins: {
          name1: {
              foo: true,
          },
          name2: {
              foo: true,
              bar: false
          }
      }
  }
  </code></pre>
  <p>And a type <code>Options</code> being a union containing all values from <code>plugins</code> property</p>
  <pre><code>type Options = Config[&quot;plugins&quot;][keyof Config[&quot;plugins&quot;]];
  </code></pre>
  <p>which TS translates to <code>{ foo: boolean } | { foo: boolean; bar: boolean }</code><br />
  Now, when I try to use it, it fails:</p>
  <pre><code>const pluginOptions: Options = config.plugins.name2;
  const foo = pluginOptions.foo;
  const bar = pluginOptions.bar; // error here
  
  // Property 'bar' does not exist on type 'Options'.
  // Property 'bar' does not exist on type '{ foo: boolean; }'
  </code></pre>
  <p>However, raw object works..</p>
  <pre><code>const equal = JSON.stringify(config.plugins.name2) === JSON.stringify({ foo: true, bar: false });
  console.log(equal); // true, identical objects!
  
  const pluginOptions2: Options = { foo: true, bar: false };
  const foo2 = pluginOptions2.foo;
  const bar2 = pluginOptions2.bar;
  </code></pre>
  <p>If I add property <code>bar</code> to plugin <code>name1</code>, the error disappears.<br />
  My goal is to check if a correct object is passed to a variable, so in this case it should allow ONLY <code>{ foo: boolean }</code> or <code>{ foo: boolean; bar: boolean }</code>.<br />
  I have no idea why it is happening. I don't know why using <code>config.plugins.name2</code> doesn't work, but copying and pasting object works, even when they're both the same. Am i doing anything wrong here or is there any other way of achieving this?</p>
  <p><a href="https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgMIHsQ2Ac2QbwFgAoZM5ABwBsBXHUAZwC4CTz3kQ4BbCARhZFSHETHToWAI3FUIcEAG42I5AF8ANMpFdeAJkFaVZMROTT0s+UuFGykuFCky5iw+1WGPxLyQSYGYMh+WLgsGCF4ALysNpS09CDMMUY6-AaxRiYsYFA0EJoZ5Bpu5Kn6ybbG4tm5+SUi9o7I8FQMEPVqniQ+xCRgAJ4UKADyFGDA-sjR4dg4ANoARNR0jAsAunMA1hD96DBomLOLywkM62sKyAD0VwTN1WbO8mrIAD53WY8WLpeNTt-PHrBAJxFYgUbjfwsCETRJTIKHXAAOhOjCRZWswMCJnhqPBY1hDCRJkx-kCjVx8VAMP8SMalxuyGgUHQUBI7OIwO+SKo6BwAAoAFIAZWGADkkQEoKB6DB+vzgrMUVTEuieBBdABKKaRaIi8WSnIy4By-n4e6mHJ5dRmBwsFptNSa7WMq3tTlk0EJGmJco+hjw82fN02v7NOCtFCqUmJbHiXSUsH+3TE8QxkGNBPRPHJukOBm3EDoJlQFls4hAA" rel="nofollow noreferrer">TypeScript Playground</a></p>