Define nested value from one interface in another interface in TypeScript?

Question

If I want to define a property in interface Two and have it be the same as a property in interface One. I can do it with this:

interface One {
  parent?: {
    child?: boolean;
  };
}

interface Two {
  parent?: One['parent']
}

But how can I copy a nested property? I would expect this to work:

interface Two {
  parent?: One['parent']['child']
}

but it errors:

Property 'child' does not exist on type '{ child?: boolean | undefined; } | undefined'.

The problem is that One['parent'] is optional, so its type is {child?: boolean | undefined} | undefined. — jonrsharpe
– jonrsharpe, Commented Aug 25, 2020 at 16:21

T.J. Crowder · Accepted Answer · 2020-08-25 16:22:56Z

1

You can use Exclude to remove the undefined part from One['parent'], allowing you to access ['child']:

interface Two {
  parent?: Exclude<One['parent'], undefined>['child']
}

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Aug 25, 2020 at 16:21

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

I'd only gotten as far as diagnosis (realizing the problem was the undefined) when you posted the solution. :-)