Is it possible in TypeScript to retrieve the values of an array type property within an interface?

I am in the process of developing a code generator that creates typescript based on a JSON definition of a data structure. However, I am currently facing an issue when it comes to accessing properties within object arrays in an interface.

Here is an example of the interface causing the problem:

interface SomeComplexThing {
  propA: string
  propB: number
  propC: {
    propCA: Array<{
      propCA1: string
      propCA2: number
    }>
  }
  propD: SomeComplexThing['propC']['propCA']['propCA1'] // Error: Property 'propCA1' does not exist on type '{ propCA1: string; propCA2: number; }[]'
}

When I attempt to access 

SomeComplexThing['propC']['propCA']['propCA1']
, I encounter the following error:

Property 'propCA1' does not exist on type '{ propCA1: string; propCA2: number; }[]'

I have discovered that I can access the property by using array indexing like so:

SomeComplexThing['propC']['propCA'][0]['propCA1']

Or even like this:

SomeComplexThing['propC']['propCA'][1234]['propCA1']

It seems inconvenient to have to reference the property inside the array with an arbitrary index value. When generating the code, I may not always know that 

SomeComplexThing['propC']['propCA']
is an array type, hence adding [0] blindly is not feasible as the type could be an object instead.

Is there an alternative approach in Typescript or possibly a utility function that I could utilize to safely access the property without relying on the array index?

arraystypescripttypesinterface

Answer №1

When indexing an array with a number, you will retrieve the item type itself, as you have discovered. However, a more versatile approach is to index using the number type directly.

propD: SomeComplexThing['propC']['propCA'][number]['propCA1']

Link to Playground

It is important to note that while indexing with a specific number or the number type may yield the same result for arrays, it can differ for tuples. Tuples have a unique type for each index value, so by indexing with number, you will get a union of all item types in the tuple.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Search through multiple fields in a Mongoose model and append an array of objects

I have a mongoose collection with the following data { "_id": "5f494ca2d84e5d2ae800d5a4", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2450415750644349454d480a474b49">[email ...

node.jsarraysmongoosearraylist

Issue TS2339: The object does not have a property named 'includes'

There seems to be an issue that I am encountering: error TS2339: Property 'includes' does not exist on type '{}'. This error occurs when attempting to verify if a username is available or not. Interestingly, the functionality works ...

node.jsangulartypescriptfirebasepromise

The operation of fetching multiple documents within a transaction loop is not functioning as anticipated

I am encountering an issue where I am attempting to retrieve multiple documents within a transaction and then update them all in the same transaction (due to their interdependence). Despite following the rule of ensuring all reads occur before any writes, ...

typescriptfirebasegoogle-cloud-firestoreasync-awaitgoogle-cloud-functions

What is the best way to ensure that the operations are not completed until they finish their work using RX

Is there a way to make RXJS wait until it finishes its work? Here is the function I am using: getLastOrderBeta() { return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, { query: { equalTo: fa ...

javascripttypescriptionic2angularfire

A guide on seamlessly incorporating cornerstone3d Examples into your React application

I'm currently working on incorporating the examples found at into a react application, but I'm facing some challenges. Here's what I've done so far: Created a new react app using typescript template: npx create-react-app my-app --tem ...

reactjstypescriptcornerstonecornerstonejs

Best practices for implementing "Event Sourcing" in the NestJS CQRS recipe

I've been exploring the best practices for implementing "Event Sourcing" with the NestJS CQRS recipe (https://docs.nestjs.com/recipes/cqrs). After spending time delving into the features of NestJS, I have found it to be a fantastic framework overall. ...

node.jstypescriptnestjscqrsevent-sourcing

Using React and TypeScript to create multiple click handlers for different sections within the same div element

I am a beginner in the world of React, Typescript, and coding in general, so I'm not entirely sure if what I'm attempting is even possible. Currently, I have a donut chart with clickable segments sourced from a minimal pie chart found at: https:/ ...

reactjstypescriptcharts

Is it considered beneficial to use Observable as a static class member?

Lately, I have been diving into a new Angular project and noticed that the common way to share state between unrelated components is by using rxjs Subject/BehaviorSubject as static members within the class. For instance: export class AbcService { privat ...

javascriptangulartypescriptooprxjs

When working with the Sequelize-Typescript One To Many Association and Repository, a situation may arise where the query returns only one child entity even though there are multiple

Dealing with Sequelize-Typescript, I recently encountered the one-to-many association involving "Album" and "Photos" entities. Each "Album" can have multiple "Photos". Below are the entity codes for reference: Album.ts ` @Table({ timestamps: true, de ...

node.jstypescriptexpresssequelize.jssequelize-typescript

What is the best way to utilize Office365 Excel array formulas to find the minimum and maximum values for each individual?

Looking at the test data provided below, how can we design the array formula to achieve the expected outcome? =LET(item,G4,name,A4:A7,data,C4:E15, names, CHOOSECOLS(data,1), items, CHOOSECOLS(data,2), cnt, CHOOSECOLS(data,3), mn, MIN(I ...

arraysexcelexcel-formulaoffice365array-formulas

Why is Sentry choosing to overlook certain errors in my React application?

While using Sentry to catch errors in my React app, I discovered that it ignores errors with 502 and 504 HTTP codes as well as some React errors. I am unsure why this is happening and would like to modify this behavior. Below is the initialization functio ...

javascriptreactjstypescriptsentry

Switching a react virtualized table from JavaScript to TypeScript can uncover some type-related challenges

I have implemented the following demo in my React project: https://codesandbox.io/s/react-virtualized-table-checbox-stackoverflow-rbl0v?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js However, I am encountering issues with the code sni ...

javascriptreactjstypescript

Different methods for categorizing arrays

I have a list of image file names in an array as shown below: Array ( [0] => first.png [1] => second.png [2] => third.png [3] => anyone.png [4] => all.png [5] => usual.png ) To display these images, I use a foreach loop to generate the ...

phparrayslistforeach

Solving the issue of refreshing HTML Canvas drawings in Vue3 using the Composition API

In my typescript code base, I have successfully created a Sudoku board by directly manipulating the DOM and utilizing an HTML Canvas element with its API. Now, I am looking to elevate my project to a full website and integrate what I have into a Vue3 proj ...

typescriptvue.jshtml5-canvasvuejs3

Error message when converting an array to a string in Symfony's ChoiceType Form

I'm currently working on creating a form that includes a choice type input for the roles field in my user entity. However, I'm encountering an error with Symfony stating "Array to string conversion error". The issue here is that my roles shouldn ...

phparraysformssymfony

Input for uncomplicated changing identifier

I am looking to create types for dynamic keys that will be of type number. I have two similar types defined as follows: type UseCalculatePayments = () => { totalPayments: number; aggregate: number; condition: boolean; }; type UseCalculateCommissio ...

javascriptreactjstypescript

Sending Various Parameters to PHP API Function

Currently, I am a PHP newbie and I am in the process of modifying an API that was built using the Laravel Framework. Within my controller, I have an API function that looks like this: public function DeleteOneMail(Request $request) { $uid = $request-& ...

phparraysjsonlaravel

What is the most efficient way to identify and retrieve the longest continuous sequence of integers from an array using

I am attempting to showcase all sequential sets from a provided array of ints. Ultimately, my goal is to highlight the lengthiest one with accompanying text. My Approach So Far I began by sorting the array and identifying all sequences. Next, I stored t ...

javaarraysintegersequence

The localhost successfully accessed req.session.userid, but unfortunately the virtual host cannot be reached at this time

Having some trouble here... I've spent days trying to figure it out but nothing seems to be working. I am using Node.js Express session on the backend with users. When I log in, I set req.session.userId = "userid" and have a middleware that ...

javascriptnode.jsarraysexpresssession-cookies

Traversing fields of a document within a Firestore collection using Angular

Attempts to retrieve the user's photoUrl based on their ID have been unsuccessful. Here is a snapshot of my firestore collection, can someone please guide me on how to access the photoUrl? https://i.stack.imgur.com/p2Zvm.jpg The main collection is &ap ...

angulartypescriptfirebasegoogle-cloud-firestore