Tips for leveraging TypeScript's indexed access types when working with nullable nested types

Question

Tips for leveraging TypeScript's indexed access types when working with nullable nested types

Looking to create a TypeScript type based on another type.

This method is successful:

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

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

However, when the data property can be null, the following approach fails:

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

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

resulting in the error message:

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

Is there a way to define the NestedData type based on the Result type without repeating any part of the original typings?

Check out the demo on TypeScript Playground

Edit: I'm working with a tool generating my NestedData type and I'm defining NestedData as a concise type alias. The actual typing is more complex, so I aim to reduce redundancy.

typescript nullability

Answer 1

Answer №1

To eliminate null (and undefined) from the union, you can utilize NonNullable:

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

Playground Link

Alternatively, you can use Exclude in a more verbose manner:

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

Playground Link

Choosing one of these methods is logical when changing the Result type isn't an option. However, in other scenarios, defining them as follows might be more intuitive:

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

Answer 2

To eliminate null (and undefined) from the union, you can utilize NonNullable:

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

Playground Link

Alternatively, you can use Exclude in a more verbose manner:

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

Playground Link

Choosing one of these methods is logical when changing the Result type isn't an option. However, in other scenarios, defining them as follows might be more intuitive:

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

Answer 3

Answer №2

A simple method for accessing nullable properties:

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

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

type NestedInfo = AccessNullable<Result['data'], 'nestedData'>

View in Playground

Answer 4

A simple method for accessing nullable properties:

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

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

type NestedInfo = AccessNullable<Result['data'], 'nestedData'>

View in Playground

Tips for leveraging TypeScript's indexed access types when working with nullable nested types

Answer №1

Answer №2

Similar questions

Error Message: Angular Unit Test Fails with "Cannot read property 'subscribe' of undefined"In this article, we will

The command "ng test" threw an error due to an unexpected token 'const' being encountered

Sending data to a React component from regular HTML

Configuring global runtime variables in NextJS for server-side operations

Is TypeScript 2.8 Making Type-Safe Reducers Easier?

Does Apollo Federation provide support for a code-first development approach?

Getting the Full Error Message in Axios with React Native Expo

"String representation" compared to the method toString()

Invoking a method in a derived class upon completion of asynchronous logic within the base class

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

Express: issue retrieving numbers from request body array

My requests and responses will undergo changes in naming conventions without my consent or awareness

Struggling to retrieve the 'this' object using a dynamic string

Vanilla JavaScript error: Unable to access property

The routes designed for children in the feature module are malfunctioning

Compile time error due to TypeScript enumeration equality issue

When using my recursive type on Window or Element, I encounter a type instantiation error stating "Type instantiation is excessively deep and possibly infinite.ts"

Ways to incorporate Bootstrap components into an Angular application without relying on external modules

What could be causing the malfunction of my Nextjs Route Interception Modal?

"Setting up a schema in TypeORM when connecting to an Oracle database: A step-by-step guide