Dynamic property name construction in typescript: dynamically creating property names on types

Although this may seem like a simple TS issue, I'm struggling to find the correct syntax.

Consider this type:

type MyType = {
   prop1: string;
   prop2: string;
}

Now, within a function, I have a variable of type MyType. However, I need to dynamically retrieve the value of a specific property from it, like so:

const myMethod = (typeX: MyType, num: number) => {
    const property1 = typeX['prop${num}`]; // This is where the issue arises!
}

The TypeScript error I encounter is:

TS7053 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MyType'. No index signature with a parameter of type 'string' was found on type 'MyType'

Changing it to typeX['prop1'] works without errors.

How do I properly convert that string into a valid property of MyType?

typescript

Answer №1

To successfully access a specific property in an object, you will need to utilize a type assertion, which is similar to a cast operation in other programming languages but with no impact on runtime behavior:


type myDataType = {
   prop1: string;
   prop2: string;
}

const myFunction = (data: myDataType, index: number) => {
    const targetProperty = data[`prop${index}` as keyof myDataType]; 
}

Link to Live Example

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

Testing Angular Dependency Injection - @Injectable() proves unsuccessful, whereas @Inject() functions correctly

Issue with Dependency Injection in Angular 5 and Webpacker Integration Upon integrating webpacker with Angular 5 into an existing Rails application, everything seemed to be functioning properly except for a peculiar issue with Dependency Injection during ...

ruby-on-railsangulartypescriptdependency-injectionwebpacker

I'm struggling to figure out the age calculation in my Angular 2 code. Every time I try to run it,

Can anyone assist me with calculating age from a given date in Angular? I have written the following code but I keep getting undefined in the expected field. This is Component 1 import { Component, OnInit, Input } from '@angular/core'; ...

angulartypescript

Ways to output a React component using TypeScript

Looking for guidance on how to print a React component using TypeScript when a button is clicked. I'm new to both React and TypeScript and would like to know how to achieve this functionality in my project. ...

reactjstypescript

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?

I am facing an issue. In my multi-module application with lazy loading, I encountered a strange behavior when trying to navigate between child lazy modules. Transition from top module to bottom child module works fine, but routing from one bottom child la ...

angulartypescript

What is a simple way to exclude a prop from a declaration in a React/TypeScript project in order to pass it as undefined

I'm trying to accomplish this task but encountering a typescript error indicating that the label is missing. Interestingly, when I explicitly set it as undefined, the error disappears, as shown in the image. Here's how my interface is structured ...

reactjstypescript

Execute the eslint loader within the node_modules of a specific directory that is npm linked and has not been compiled

One of the benefits of using webpack 4 is the ability to run eslint across the entire project folder with a specific configuration. { enforce: 'pre', test: /\.js|ts$/, exclude: /node_modules/, loader: 'eslin ...

javascripttypescriptwebpackeslint

Error encountered while waiting for Angular to finish loading in Protractor: ScriptTimeoutError - Task: Protractor.waitForAngular()

Yesterday went smoothly, but today after updating to pull all commits from svn, everything stopped working. Every time I run a test, I encounter this error: ScriptTimeoutError: script timeout And: From: Task: Protractor.waitForAngular() - Locator: By(c ...

javascriptangulartypescriptprotractorcucumber

Angular 2 TypeScript: The concat() function operates as mutable within the framework

When I declare an array on an @Injectable provider, my intention is to use it across different components. normeList: any[] = [ { name: 'choice 1', type:'false' }, { name: 'choice 2', typ ...

javascriptangulartypescript

The status of the Mat-checkbox is determined by the response from the modal dialog

In my project, I have a list of users stored in an array. Using HTML, I utilized the *ngFor directive to create a checkbox for each user element. Additionally, there is an @Input assignedAccountIds[] which contains the IDs of default selected users. The c ...

angulartypescriptcheckboxangular-material

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

javascriptcssreactjstypescriptmaterial-ui

In the process of developing a custom Vue component library with the help of Rollup and VueJS 3

My goal is to develop a custom Vue component library using rollup and Vue.js. The process went smoothly with Vue2, but I encountered issues parsing CSS files with Vue3. To address this, I updated the dependencies in the package.json file. package.json { ...

typescriptvue.jsrolluprollupjsvuejs3

What does the concept of "signaling intent" truly signify in relation to TypeScript's read-only properties?

Currently diving into the chapter on objects in the TypeScript Handbook. The handbook highlights the significance of managing expectations when using the readonly properties. Here's a key excerpt: It’s crucial to clarify what readonly truly signif ...

typescript

Comparing TypeORM promise.all to await when searching

While researching ways to optimize database searches, I came across promise.all which has the potential to speed up the process. My approach involves conducting searches through three functions. The tables consist of various joins, with instances where th ...

mysqltypescriptasync-awaittypeorm

What are the best practices for utilizing the Express router efficiently?

When building a TypeScript REST API, is there any difference between router.get(); router.post(); router.patch(); router.delete(); ---------------- app.use(); app.use(); app.set(); and router .get() .post() .patch() .delete(); ---------- ...

node.jstypescriptexpress

Guide on typing an asynchronous function that could potentially exit the process in TypeScript?

Is there a way to create an asynchronous function that can exit the process under certain conditions? I would like to use it as follows: function useResult(result:Result): void { // ... } const result: Result | undefined = await getResult(); if (res ...

node.jstypescripttypes

Attempt the HTTP request again only for specific status codes

When developing my Angular application, I encountered a situation where I needed to make an HTTP call to a backend server. To enhance its reliability, I decided to incorporate an interceptor to implement the retry pattern. In the past, I utilized RxJS&apo ...

angulartypescriptrxjs

Learn the technique of passing dual onClick parameters to a single function in React

I am working on a function named Test where I need to pass two onClick references. const Test = ({ onConnect }:{ onConnect:any }, { onDisconnect }:{ onDisconnect:any }) => { return ( <div> <DrawDiagram /> <button onClick ...

reactjstypescriptonclick

Show the name of the category in the mat table in Angular instead of the category

Using Angular Material Mat Table to display data fetched from an API is great, but I'm facing a challenge with handling categories from another API. Currently, my models include issues and categories, where the category ID is displayed instead of the ...

angulartypescriptangular-materialangular-material-table

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

javascriptangulartypescript

Guide on writing the callback for a promise in typescript

Currently, I am using `any` as the callback for the `.then` in my promise. However, I would like to use `string` or something similar instead. Do you have any suggestions on how to type my md5 function? export const md5 = (path: string) => new Promi ...

javascriptnode.jstypescript