Shorn Shorn - 5 months ago 50
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.


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


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

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

static readonly initialAppState: AppState = {
userDetails: undefined

But with
I can just omit the field completely:

static readonly initialAppState: AppState = { };

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

Property 'userDetails' is missing in type

Why do I have to set the field explicitly when using definition
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' ]
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download