Typescript: What's the difference between an optional field and a union with undefined? : <p>I want to define an interface with optional fields.  I thought the following were synonymous.</p>

<p><code>(A)</code>:</p>

<pre><code>interface State {
  userDetails: undefined | string | DataStructure | Error;
}
</code></pre>

<p><code>(B)</code>:</p>

<pre><code>interface State {
  userDetails?: string | DataStructure | Error;
}
</code></pre>

<p>But when I go to initialise the state, <code>(A)</code> forces me to explicitly set the field as undefined, like so: </p>

<pre><code>static readonly initialAppState: AppState = {
  userDetails: undefined
};
</code></pre>

<p>But with <code>(B)</code> I can just omit the field completely:</p>

<pre><code>static readonly initialAppState: AppState = { };
</code></pre>

<p>If I try to omit the field when using definition <code>(A)</code> Typescript will complain saying:</p>

<pre><code>Property 'userDetails' is missing in type
</code></pre>

<p>Why do I have to set the field explicitly when using definition <code>(A)</code>?
What's the difference between the two definitions that forces this different requirement when initialising?</p>

<p>Typesript version: 2.3.4</p>
