Typescript: What's the difference between an optional field and a union with undefined?

Question

I want to define an interface with optional fields. I thought the following were synonymous.

(A):

interface State {
  userDetails: undefined | string | DataStructure | Error;
}

(B):

interface State {
  userDetails?: string | DataStructure | Error;
}

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

static readonly initialAppState: AppState = {
  userDetails: undefined
};

But with (B) I can just omit the field completely:

static readonly initialAppState: AppState = { };

If I try to omit the field when using definition (A) Typescript will complain saying:

Property 'userDetails' is missing in type

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

Typesript version: 2.3.4

---

Edit: If you found this question and the answer below interesting or relevant, you may want to know that TypeScript is changing in v4.4 to add the --exactOptionalPropertyTypes flag. This new flag will now cause an error on some of the original code that prompted me to ask this question.

Answer 1

Even at runtime there is a difference between a key with an undefined value and a key that doesn't exist. That TypeScript allows differentiating is not surprising.

Try this:

Object.keys({a: undefined});

If leaving a out and setting it's value to be undefined were the same thing then we'd expect the above to return an empty array, but in fact it returns

[ 'a' ]