Utilize string values as identifiers in type declarations

My Props type declaration currently looks like this:

type Props<FormData> = {
    formData: FormData,
    sectionNme: keyof FormData,
    name: string
}

However, I am trying to modify it to look more like the following:

type Props<FormData> = {
    formData: FormData,
    sectionNme: keyof FormData,
    name: keyof FormData[sectionName]
}

I'm struggling to access the sectionName field within this type definition. Is there a more effective way to achieve this without resorting to using just string?

typescript

Answer №1

Implementing a new feature with a second parameter:

type Parameters<Data extends object, Key extends keyof Data = keyof Data> = {
    data: Data,
    sectionKey: Key,
    field: keyof Data[Key]
}

Example of usage:

interface ExampleForm {
    exampleSection: {
        exampleField: string;
    }
}

const parameters: Parameters<ExampleForm> = {
    data: {
        exampleSection: {
            exampleField: 'example value'
        }
    },
    sectionKey: 'exampleSection',
    field: 'exampleField',
}

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

Error detected in Vuetify project's tsconfig.json file - The configuration file does not contain any input entries

Having an issue with the tsconfig.json file in my Vuetify project. The first { is underlined in red and when hovered over, it displays the error message: No inputs were found in config file Sharing the content of the file below. tsconfig.json { // expe ...

typescriptvue.jsvuetify.js

We could not find the requested command: nodejs-backend

As part of my latest project, I wanted to create a custom package that could streamline the initial setup process by using the npx command. Previously, I had success with a similar package created with node.js and inquirer. When running the following comma ...

javascriptnode.jstypescriptnpm

Creating custom components that encapsulate the functionality of Angular Material tabs component

I am aiming to incorporate the Angular Material tabs component within my shared components. Here is the component I'm attempting to wrap: Note: Each tab can display a component: <mat-tab-group> <mat-tab label="First"> Content ...

angulartypescriptangular-materialfrontendng-content

Can Typescript Be Integrated into an AngularJS Application?

I have been thinking about the optimal timing and scenario to implement Typescript in an AngularJS project. While I have come across examples of TS being used in a Node, Express, Mongo backend, I am particularly intrigued by how well TS integrates with A ...

javascriptangularjstypescript

Utilizing Typescript to implement an interface's properties

After declaring an interface as shown below interface Base { required: string; } I proceeded to implement the interface in a class like this class MyClass implements Base{ method(): void { console.log(this.required); } } However, I ...

javascriptjqueryangularjsangulartypescript

What is the best way to update the color of a label in a Mantine component?

When using the Mantine library, defining a checkbox is done like this: <Checkbox value="react" label="React"/> While it's possible to change the color of the checkbox itself, figuring out how to change the color of the label ...

javascriptreactjstypescriptnext.jsmantine

Is it possible to include if else logic code within a catch statement?

There's a nagging feeling within me that having logic code within a catch statement is not the right approach. For example, my catch block currently looks like this: try{ // do some stuff that throws some unexpected errors } ...

javascriptreactjstypescript

How to use sinon to create a mock for an independently imported function

Is there a way to successfully mock the axios import using sinon and then set expectations? Here is my attempted code: import axios from 'axios'; axiosMock = sinon.mock(axios); However, the expectation does not pass: describe('Custom test ...

typescriptmockingsinon

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

User Interface Image I am looking to implement a filter functionality in the FlatList data based on top categories, where the filter button allows for multiple selections. The FlatList data is stored in the HotelData array, and the categories are also re ...

reactjstypescriptreact-nativereact-hooksreact-redux

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

javascriptreactjstypescriptmaterial-ui

Verifying input for Numeric TextField

The text field being used is: <TextField variant="outlined" margin="normal" id="freeSeats" name="freeSeats" helperText={touched.freeSeats ? errors.freeSeats : ''} error={touched.freeSeats && Boolean(errors.fre ...

javascriptreactjstypescriptmaterial-uiformik

Is there a way to revert my Ionic CLI back to the previous version that I had installed?

Having just updated to version 3.2.0, I am encountering numerous issues, such as the malfunctioning of the ionic serve command. ...

angulartypescriptionic-frameworkionic2ionic3

Testing a function within a class using closure in Javascript with Jest

Currently, I am attempting to simulate a single function within a class that is declared inside a closure. const CacheHandler = (function() { class _CacheManager { constructor() { return this; } public async readAsPromise(topic, filte ...

typescriptunit-testingmockingjestjs

Building a BaseObserver in TypeScript with RxJS

Initially, I created a class called BaseObserver in Swift. In the subscribe method, I pass this class. Now, I am attempting to achieve the same functionality in RxJS using TypeScript. This approach proves useful when you need to execute actions both befor ...

typescriptrxjsrx-swiftreactivex

Unable to generate a store using reducer in TypeScript and Redux

I am having trouble creating a store using Redux and TypeScript. Here is my actions.js file: import { Action } from 'redux'; export interface ITodoAction extends Action { todo:string; } export const ADD_TODO:string = 'ADD_TODO'; ...

typescriptredux

What steps can I take to resolve the 'Object may be null' error in TypeScript?

I am facing a similar issue to the one discussed in this thread, where I am using Draft.js with React and Typescript. After following the code example provided in their documentation, I encountered the 'Object is possibly 'null'' error ...

reactjstypescriptdraftjs

An error occurred while defining props due to a parsing issue with the prop type. The unexpected token was encountered. Perhaps you meant to use `{`}` or `}`?

const dataProps = defineProps({ selectedData: <Record<string, string>> }); Under the closing bracket, there is a red line indicating: Error: Unexpected token. Consider using {'}'} or &rbrace; instead?eslint Expression expecte ...

typescriptvue.js

angular2 - Having trouble retrieving data from subject

Why am I unable to successfully initialize and retrieve data from a service using a subject in Angular? HomeComponentComponent.TS export class HomeComponentComponent implements OnInit { public homeSub; constructor( private subService: SubjectServ ...

angulartypescriptrxjs

A comprehensive guide to using Reactive Forms in Angular

I need help understanding how FormGroup, FormControl, FormArray work in Angular. The error message I'm encountering is: Type '{ question: FormControl; multi: true; choices: FormArray; }' is not assignable to type 'AbstractControl' ...

javascriptangulartypescript

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered ...

javascriptangulartypescript