What is the best way to employ the pick function with optional types within nested TypeScript structures?

Question

What is the best way to employ the pick function with optional types within nested TypeScript structures?

I am interested in learning TypeScript.

  dynamicContent?: {
    data?: {
      attributes?: {
        baccarat?: { title?: string | null; content?: string | null } | null;
        baccaratOnline?: { title?: string | null; content?: string | null } | null;
        casino?: { title?: string | null; content?: string | null } | null;
        casinoOnline?: { title?: string | null; content?: string | null } | null;
        games?: Array<{
          gameUrl?: string | null;
          media: {
            data?: {
              attributes?: {
                url: string;
                alternativeText?: string | null;
                width?: number | null;
                height?: number | null;
              } | null;
            } | null;
          };
        } | null> | null;
      } | null;
    } | null;
  } | null;
};

In order to include the type 'games', I attempted the following:

  Pick<NonNullable<GetDynamicContentQuery["dynamicContent"]["data"]["attributes"]>, 'games'>

I have noticed that only the dynamicContent field is nullable. I am uncertain how to make all fields nullable.

typescript

Answer 1

Answer №1

It appears that there is a misunderstanding regarding the distinction between optional and nullable, leading to confusion about undefined and null.

In TypeScript, when you declare a property as optional, it essentially sets the type of the property to be either the specified type or undefined:

interface MyInterface {
    myField?: number;
}

This declaration is functionally equivalent to:

interface MyInterface {
    myField: number | undefined;
}

Now, let's delve into the definitions of null and undefined. In JavaScript (the foundation of TypeScript), undefined signifies the absence of an existing element. It is commonly used in scenarios where a property of an object is absent:

const obj = { prop1: 'Prop 1', prop2: 'Prop 2', prop3: 123 };
console.log(obj.prop1); // 'Prop 1'
console.log(obj.prop2); // 'Prop 2'
console.log(obj.prop3); // 123
console.log(obj.prop4); // undefined

Contrastingly, we have null. In JavaScript, null is considered a valid value akin to numbers, strings, objects, or functions. It is employed to signify that while the property or variable exists, its value is null.

In TypeScript, permitting an optional property to also be null can lead to complications in the future. Therefore, it is advised to avoid this practice and solely make properties optional.

This information has been succinctly covered in the following resource:

Answer 2

It appears that there is a misunderstanding regarding the distinction between optional and nullable, leading to confusion about undefined and null.

In TypeScript, when you declare a property as optional, it essentially sets the type of the property to be either the specified type or undefined:

interface MyInterface {
    myField?: number;
}

This declaration is functionally equivalent to:

interface MyInterface {
    myField: number | undefined;
}

Now, let's delve into the definitions of null and undefined. In JavaScript (the foundation of TypeScript), undefined signifies the absence of an existing element. It is commonly used in scenarios where a property of an object is absent:

const obj = { prop1: 'Prop 1', prop2: 'Prop 2', prop3: 123 };
console.log(obj.prop1); // 'Prop 1'
console.log(obj.prop2); // 'Prop 2'
console.log(obj.prop3); // 123
console.log(obj.prop4); // undefined

Contrastingly, we have null. In JavaScript, null is considered a valid value akin to numbers, strings, objects, or functions. It is employed to signify that while the property or variable exists, its value is null.

In TypeScript, permitting an optional property to also be null can lead to complications in the future. Therefore, it is advised to avoid this practice and solely make properties optional.

This information has been succinctly covered in the following resource:

Answer 3

Answer №2

The response from @TopchetoEU is accurate, and it may be beneficial to reconsider how the interface GetDynamicContentQuery is defined. However, if altering the definition is not feasible, here is a workaround to access the games property:

type DeeplyExcludeNullAndOptional<T> = { 
  [Key in keyof T]-?: Exclude<T[Key], null | undefined> extends Record<any, any> 
    ? DeeplyExcludeNullAndOptional<Exclude<T[Key], null>> 
    : NonNullable<T[Key]> 
}

type GamesDataType = DeeplyExcludeNullAndOptional<
  GetDynamicContentQuery
>["dynamicContent"]["data"]["attributes"]["games"]

I was puzzled about your use of Pick. Directly accessing games seems sufficient for this scenario.

Interactive Demo

Answer 4

The response from @TopchetoEU is accurate, and it may be beneficial to reconsider how the interface GetDynamicContentQuery is defined. However, if altering the definition is not feasible, here is a workaround to access the games property:

type DeeplyExcludeNullAndOptional<T> = { 
  [Key in keyof T]-?: Exclude<T[Key], null | undefined> extends Record<any, any> 
    ? DeeplyExcludeNullAndOptional<Exclude<T[Key], null>> 
    : NonNullable<T[Key]> 
}

type GamesDataType = DeeplyExcludeNullAndOptional<
  GetDynamicContentQuery
>["dynamicContent"]["data"]["attributes"]["games"]

I was puzzled about your use of Pick. Directly accessing games seems sufficient for this scenario.

Interactive Demo

What is the best way to employ the pick function with optional types within nested TypeScript structures?

Answer №1

Answer №2

Similar questions

Uploading Boolean Values from Switch Input (React/Typescript)

Tips for extracting certain keys from an interface using template string types?

Lint found an issue: The variable 'post' has been defined but is not being utilized in the code

React Native React Thunk activating upon the initial rendering of a component and every time a key is pressed in an input field

The 'xxx' type does not have an index signature, so the element is implicitly assigned an 'any' type

Encountering errors while setting up routes with Browser Router

Issue encountered: Dealing with a deadlock error triggered by a single query following the

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

Retrieve ag grid from TypeScript file

Exploring TypeAhead functionality in Reactjs 18

Having trouble with Angular 2's Output/emit() function not functioning properly

The 'palette' property is not found on the Type 'Theme' within the MUI Property

The Jest worker has run into 4 child process errors, surpassing the maximum retry threshold

Vue-i18n does not offer a default export option

How can you eliminate the prop that is injected by a Higher Order Component (HOC) from the interface of the component it produces

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

What are some ways to use SWR for mutating data specific to a certain ID?

Creating an object property conditionally in a single line: A quick guide

Is there a solution available for the error message that reads: "TypeError: Cannot set value to a read-only property 'map' of object '#<QueryCursor>'"?