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

What is the process for obtaining the result of an asynchronous function triggered by an event in HTML?

Exploring the capabilities of Vue combined with Typescript and Audio Worklets

Testing a click event in Angular that triggers only the navigateByUrl function, utilizing Jasmin and Karma

Angular 2 - Dragula for ng2

Update name of an angular 2 component template

Show website traffic using TypeScript visitor counter

Text in Angular vanishes upon reopening

Show the subscription response data in Angular

Comparing Input and Output Event Binding

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

Issue with unit testing a ViewportRuler in Angular 2 Material Library

Implementing TypeScript for augmented styling properties in a component - a guide

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

Keeping track of important dates is ineffective using the calendar

Is it possible to combine TypeScript modules into a single JavaScript file?

Consolidating Angular 4 Observable HTTP requests into a single Observable to optimize caching

Change the property value prior to running TypeScript validation

Detecting changes in a readonly input in Angular 4

Is there a way for TS-Node to utilize type definitions from the `vite-env.d.ts` file?

Exploring the Power of JSONObject and JSONArray in Jmeter