How to use TypeScript's indexed access types with nullable nested types?

1.4k Views Asked by At

I'm trying to define a TypeScript type in terms of another type.

This works:

type Result = { data: { nestedData: { foo: string; bar: string } } };

type NestedData = Result['data']['nestedData'];

But, when the data property is nullable, this doesn't work:

type Result = { data: { nestedData: { foo: string; bar: string } } | null };

type NestedData = Result['data']['nestedData'];

and results in the error:

Property 'nestedData' does not exist on type '{ nestedData: { foo: string; bar: string; }; } | null'.(2339)

How can I define my NestedData type in terms of Result, without duplicating any part of Result's typings?

Demo on TypeScript Playground

Edit: I'm getting my NestedData type from a codegen tool and I'm defining NestedData as a shorter type alias. In reality the typing is longer so I want to minimize repetition.

2

There are 2 best solutions below

3
kaya3 On BEST ANSWER

You can use NonNullable to remove null (and undefined) from the union:

type NestedData = NonNullable<Result['data']>['nestedData']

Playground Link

Equivalently, but a bit more verbosely, you can use Exclude:

type NestedData = Exclude<Result['data'], null>['nestedData']

Playground Link

It makes sense to do it in one of these ways when you can't change your Result type for some reason. In other situations it would be more natural to define them this way round:

type NestedData = { foo: string; bar: string }
type Result = { data: { nestedData: NestedData } | null }
3
captain-yossarian from Ukraine On

Generic util for getting nullable properties:

type Result = {
    data: {
        nestedData: { foo: string; bar: string }
    } | null
};

type GetNullable<T, Prop extends keyof NonNullable<T>> = NonNullable<T>[Prop]

type NestedData = GetNullable<Result['data'], 'nestedData'>

Playground