Is it possible for a typed function to access object properties recursively?

Is there an efficient method in TypeScript to type a function that can recursively access object properties? The provided example delves two levels deep:

function fetchNestedProperty<T, K extends keyof T>(obj: T, prop1: K, prop2: keyof T[K]) {
    return obj[prop1][prop2];
}

// Sample usage
const data = {
    user: {
        pets: [{
            toys: [{
                name: "Rex",
                price: 2999
            }]
        }]
    }
} as const
fetchNestedProperty(data, "user", "pets");

However, I am seeking a robust approach to allow any number of props in the fetchNestedProperty function to traverse into nested objects effortlessly. Ideally, the function's declaration would resemble

function fetchNestedProperty(obj, ...props) { }
. Is there an effective strategy to achieve this functionality? Thank you for your insights!

Answer №1

For a specific number of keys, you cannot achieve it arbitrarily, but you can create something similar to lodash's get tailored to your requirements.

You can also implement the function in a recursive manner.

Here is an example with the mentioned _.get (which supports up to 4 keys):

const obj = {
    user: {
        pets: [{
            toys: [{
                name: "Toughy",
                price: 1999
            }]
        }]
    }
} as const

const toy1 = _.get(obj, ["user", "pets", 0, "toys"]); // correct type
const toy2 = _.get(obj, ["user", "pets", 0, "toys", 0]); // any :(
const toy3 = _.get(_.get(obj, ["user", "pets", 0, "toys"]), [0]); // correct type :)

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

New Authentication: The sign-in feature will redirect to /api/auth/error

Currently implementing Google sign-in functionality on my Next.js 13 app using Next-auth. I have utilized the signIn() function as described in the documentation here. However, upon calling the signIn() function, I am unexpectedly redirected to http://loca ...

Encountered difficulties in deploying functions on Firebase Cloud Functions

While developing the Firebase Cloud Functions, I organized the files based on each function. Unfortunately, numerous errors occurred during deployment. Error [debug] [2022-07-19T14:36:17.677Z] <<< [apiv2][body] GET https://us.gcr.io/v2/xxxxxx/gcf ...

Encountering an error stating "Argument of type 'X' is not assignable to parameter of type 'X' in the NextApiResponse within NextJS."

Here is the code snippet I am working with: type Data = { id: string; name: string; description: string; price: number; }; const FetchMeals = async (req: NextApiRequest, res: NextApiResponse<Data>) => { const response = await fetch( ...

What techniques can be employed to dynamically modify Typescript's AST and run it while utilizing ts-node?

Below is my approach in executing a TypeScript file: npx ts-node ./tinker.ts In the file, I am reading and analyzing the Abstract Syntax Tree (AST) of another file named sample.ts, which contains the following line: console.log(123) The goal is to modify ...

Angular Authentication Functionality

I need to create a loggedIn method in the AuthService. This method should return a boolean indicating the user's status. It will be used for the CanActivate method. Here is a snippet of code from the AuthService: login(email: string, password: string) ...

I'm looking to receive the specific data types for express request arguments. How can I

Currently, I am working on incorporating authentication into an express application using passport and typescript. For defining the user model, I have utilized typegoose. Once the login request passes through the passport strategy, a login method is called ...

What is the recommended way to define a recursive TypeScript object that consists of keys that are exclusively strings?

I am seeking to define a type for an arbitrary object with only string keys (excluding symbol) at each level of nesting. Here is what I envision (though the example provided does not work and is not valid): type RecursiveRecord = { [key: string]: ...

What is the best way to extract data from a request when using an HTTP callable function?

I've integrated the Firebase Admin SDK for handling administrative tasks. The functions I've set up are hosted on Firebase Cloud Function in my console. While I can successfully trigger these functions from my application, I'm facing an issu ...

The Clerk authMiddleware() function has been defined in the middleware.ts file located at the root of the application, but it is not being utilized

import { authMiddleware } from "@clerk/nextjs"; export default authMiddleware({}); export const config = { matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)&apos ...

Redux Saga effect does not have a matching overload for this call

Encountering an error in my Redux Saga file, specifically when using the takeLatest() Saga effect. TypeScript is throwing the following error: (alias) const getMovies: ActionCreatorWithoutPayload<string> import getMovies No overload matches this call ...

Having trouble importing components from the module generated by Angular CLI library

After creating a simple Angular library using CLI with the command ng g library <library-name>, I encountered an issue while trying to import a component from its module. In my app module, I added components.module to the imports array and attempted ...

Can you explain the contrast between the @HostBinding() directive and ElementRef/Renderer in Angular?

I'm currently in the process of developing a directive for a dropdown toggle feature. Through my research, I have come across two different approaches to implement this directive. Which method would be considered the most effective practice? Approach ...

Universal loading screen across all components

I am currently implementing a loading screen for this component in conjunction with the fetch method. My concern is whether I will need to replicate the same loading logic used in the example for every component that utilizes the fetch() method, or if the ...

How do you properly include a new property in an Object using Typescript?

I am currently delving into the world of typescript. After exploring various sources like this one and that one, as well as trying out multiple solutions, I have encountered a challenge. I have a variable named incomingArticleObject which needs to be of ty ...

Execute a function once an observable variable has been successfully initialized

I'm currently putting together a chat application using socket.io in Angular. I've encountered an issue where I can't seem to execute a particular code or function right after an observable variable is initialized through subscription. The i ...

Form submission returns JSON data with an undefined value from the server

I've been following a tutorial here but ran into some issues due to using newer versions of Angular and Ionic. This is an excerpt from my code: createReview(review){ let headers = new HttpHeaders(); headers.append('Content-Type&apo ...

Having trouble linking tables to Node.js with TypeScriptyntax?

I am facing an issue with mapping multiple entities using sequelize. I keep encountering the error message " Error: Profesor.hasOne called with something that's not a subclass of Sequelize.Model". How can I resolve this issue? Below is the code for t ...

VS Code is flagging TypeScript errors following the recent software update

After updating my VS Code, I started seeing TypeScript error messages like the following: ButtonUnstyled.types.d.ts: Module '"/components/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop&a ...

How can TypeScript be used to update the values and text of an HTML element?

Is it possible to update specific attributes of an html element using typescript? Below is the code snippet: HTML:- <a ref="#" id="userProfileName" style="padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left ...

VS Code failing to refresh TypeScript in Vue files

Currently, I'm using Vue with Vue Single File Components (SFC) and TypeScript in vscode. However, I've noticed that the types I create in a .d.ts file are not being applied or updated in my .vue files. It's only when I reload the window that ...