Shorn Shorn - 24 days ago 8
TypeScript Question

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

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

Answer Source

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' ]