Typescript - using a nested interface

Question

I have an interface that looks like

export interface Foo {
  data?: Foo;
  bar?: boolean;
}

In some cases, the data is being used as foo.data.bar and in other cases foo.bar. When I use the interface above I'm seeing:

Property 'bar' does not exist on type 'Foo | undefined'

This feels kind of weird, but how can I adjust this so that data could have Foo's types?

The problem here is that data can be undefined, so you have to check before access it — coglialoro
– coglialoro, Commented Mar 25, 2022 at 15:54

Donut · Accepted Answer · 2022-03-25 15:52:36Z

3

The question mark indicates that data could be either an instance of Foo, or it could be undefined:

data?: Foo;

The error you're seeing is due to this - if data is undefined, there's no bar property to access.

If data will always be populated with an instance of Foo, you can remove the ?, which will resolve this issue:

data: Foo;

Alternatively, you can use optional chaining when accessing bar:

const bar = foo.data?.bar;

Or, you could check if foo.data is defined:

if (foo.data) {
   const bar = foo.data.bar;
}

answered Mar 25, 2022 at 15:52

Donut

113k20 gold badges136 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GHOST-34 Over a year ago

"The question mark indicates that data could be either an instance of Foo..." It indicates that a property is optional and is either defined or, like you said, undefined. An instance of Foo would look like let foo = new Foo() where foo is the instance. foo.data can still be undefined.

Collectives™ on Stack Overflow

Typescript - using a nested interface

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related