Why am I encountering issues accessing a child property in TypeScript?

Question

Why am I encountering issues accessing a child property in TypeScript?

Here is some TypeScript code that I am working with:

export interface SelectQuery_thing {
  __typename: "ThingQueryPayload";
  content: (SelectQuery_thing_content | null)[];
  pageInfo: SelectQuery_thing_pageInfo;
}

export interface SelectQuery_thing_content {
  __typename: "Thing";
  id: string;
  name: string;
}

I am trying to access the 'name' property within a function:

const itemToString = (data: SelectQuery_thing) => data && data.content && data.name

However, I am encountering an error:

Property 'name' does not exist on type 'SelectQuery_thing_content[]'

How can I successfully access the 'name' property in this scenario?

arrays typescript

Answer 1

Answer №1

The information in data.name is not available because it falls under the category of SelectQuery_thing, whereas the content in data.content does exist. The data.content consists of SelectQuery_thing_content[], which is essentially an array. To access the information under .name, you must first index the array, like so:

data.content[index].name;

I recommend checking the array length before proceeding with indexing.

If your goal is to ensure that all names exist, you can utilize the every() method;

data.content.every(val => !!val.name);

All in all,

const itemToString = (data: SelectQuery_thing) => 
                       data && data.content && 
                       data.content.length > 0 && 
                       data.content.every(val => !!val.name);// or (({name}) => !!name)

Answer 2

The information in data.name is not available because it falls under the category of SelectQuery_thing, whereas the content in data.content does exist. The data.content consists of SelectQuery_thing_content[], which is essentially an array. To access the information under .name, you must first index the array, like so:

data.content[index].name;

I recommend checking the array length before proceeding with indexing.

If your goal is to ensure that all names exist, you can utilize the every() method;

data.content.every(val => !!val.name);

All in all,

const itemToString = (data: SelectQuery_thing) => 
                       data && data.content && 
                       data.content.length > 0 && 
                       data.content.every(val => !!val.name);// or (({name}) => !!name)

Why am I encountering issues accessing a child property in TypeScript?

Answer №1

Similar questions

Transform an array into an object utilizing only underscore

a helpful utility type for extracting a union from a constant array of strings

TSLint has detected an error: the name 'Observable' has been shadowed

The attribute is not found on the combined type

Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

hiding html elements by using the display property set to none instead of physically removing

What is causing an error when using Array.push(), while Array.concat() works without any issues?

Building a personalized React component poses challenges when working with MUI REACT interfaces

What is the best way to update multiple data tables using TypeScript?

include the ReactToastify.css file in your project using the import statement

In TypeScript, the type of the second function parameter depends on the type of the first

Build a unique array of identifiers extracted from an object

The array is failing to pass through ajax requests

JavaScript file encountering a Typescript issue with a property defined in a subclass

Transforming a material-ui component from a class to a function

The POST requests on Next JS Mock API endpoints include parameters passed in the req.body

Next.js 13: Dealing with the "Objects are not valid as a React child" error while using async/await to retrieve data

Observable - initiating conditional emission

The OrderBy feature may not apply to the initial items being displayed in an ng-repeat loop