Is it possible to obtain Literal types for object keys dynamically in typescript?

I am looking to extract the type of object keys. Below is a generic function for objects with keys as strings:

type GenericInput = {
  [key:string]: {value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, error?:string}
}

function PageContent(props: { children: React.ReactNode,inputs:GenericInput,getData:(data)=>void}) {
  const [query,setQuery] = useState<GenericInput>(props.inputs)
  
  const formKeys = Object.keys(query)
getData(query)
}

However, I aim to pass data in a way that returns an object literal of key types. This would enable IDE auto-completion for keys. Essentially, I want to convert these keys into a literal type.

My ideal scenario would look something like this:

 type GenericInput = {
      [key:  Object.keys(query)]:{value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, error?:string}
    }

Answer №1

Exploring the Typescript Record Generic Type

If you want to define an object interface with predetermined keys, you can utilize the Record type. On the other hand, if you need an object interface with unpredictable keys, you can use [key: string]: TYPE.

When working with the Record type, consider the following example:

type GenericInputProperties = {
    value: string;
    type: HTMLInputTypeAttribute;
    placeholder: string;
    min?: number;
    max?: number;
    required?: boolean;
    error?: string;
};

type GenericInput<Keys> = Record<Keys, GenericInputProperties>;

For more information, check out:
Typescript Record
Typescript Generics

Hope this helps! :)

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

Angular 7: Efficiently Implementing Multiple Cascading Combobox Components

My component is designed to handle the management of cascading countries and states. When I input only one country and state in the form, everything functions perfectly. However, if I input three countries and states, the system malfunctions as shown in th ...

Can one inherit under specific conditions?

I have just started exploring the OOP paradigm and I am curious to know if it is possible to have conditional inheritance in TypeScript. This would help avoid repeating code. Here is what I have in mind. Any suggestions or recommendations are greatly appre ...

Tips for accessing data from a local JSON file in your React JS + Typescript application

I'm currently attempting to read a local JSON file within a ReactJS + Typescript office add-in app. To achieve this, I created a typings.d.ts file in the src directory with the following content. declare module "*.json" { const value: any; ex ...

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

The null error occurs when rendering with React's state array

When I try to call an API that emits JSON, I am encountering an issue. I call the promise API function in componentDidMount, set the state, and then call it in the render method, but it always returns a null error. I need assistance, please. Interface fo ...

What is the best way to display just the selection outcome?

Currently, my code displays a full list of clinics. When I select a province in the dropdown menu, it only shows the clinics located in that specific province. I would like to modify this behavior so that the full list of clinics is not visible initially ...

Using Typescript to assign a custom object to any object is a powerful feature

I am attempting to organize table data by utilizing the code found at https://github.com/chuvikovd/multi-column-sort. However, I am unsure of how to pass a custom object to the SortArray[T] object. The structure of my custom object is as follows: const ob ...

What could be causing the conditional div to malfunction in Angular?

There are three conditional div elements on a page, each meant to be displayed based on specific conditions. <div *ngIf="isAvailable=='true'"> <form> <div class="form-group"> <label for ...

React TypeScript - Issue with passing props to Hooks causing type errors

I have set up a codesandbox project to demonstrate my problem 1) Initially, I created the <Input> component for styling and tracking input content. 2) While everything was functional, adding more forms prompted me to create a useInput hook for easi ...

What is the best way to utilize typed variables as types with identical names in Typescript?

Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...

Tips for bringing in an enum from TypeScript?

I am working with a module defined in TypeScript that looks like this: declare module MyTypes { export enum MyEnum { GOOD = 'Good', BAD = 'Bad', UNKNOWN = '-' } export interface MyType1 { ...

Transfer an object to $state.go

I'm having trouble solving this issue. Here's the state I am working with: var myState:ng.ui.IState = <ng.ui.IState> { url: '/new/{order.orderNumber}', controller: 'OrderController', controll ...

What is the correct version compatibility matrix for Expo, NPM, Node, React Native, and TypeScript?

Currently, I am in the process of setting up React Native with TypeScript. Here are the steps I followed: npx react-native init MyApp --template react-native-template-typescript I made sure to install TypeScript as well: npm install -g typescript ' ...

Oops! Looks like there's an issue with the type error: value.forEach is

I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...

What methods can I utilize from Google Maps within Vuex's createStore()?

Currently, I am in the process of configuring my Vuex store to hold an array of Marker objects from the Google Maps Javascript API. Here is a snippet of how my createStore function appears: import { createStore } from "vuex"; export default ...

Firebase Promise not running as expected

Here is a method that I am having trouble with: async signinUser(email: string, password: string) { return firebase.auth().signInWithEmailAndPassword(email, password) .then( response => { console.log(response); ...

What could be causing the error related to "Implicit any return type" in this situation?

I expect the code below to pass the type check successfully: class MyClass<T extends object, P extends string = string> { method(thing: Thing) { return thing.method(this); } } declare class Thing { method(entity: MyClass<any&g ...

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

Creating a Typescript HttpInterceptor and ensuring its compatibility with minification techniques

Currently, I am trying to implement an Angular HttpInterceptor based on the solution provided in this Stack Overflow response: However, I am struggling with the factory method: public static Factory($q: ng.IQService) { return new AuthenticationInter ...

When utilizing "ng2-file-upload" in conjunction with Angular 2 and Typescript, encountering a limitation where files larger than 1MB cannot be uploaded

My attempt to upload a file with a size exceeding 1MB is triggering an error regarding its large size. Despite setting the limit to 50 MB, it doesn't seem to be working as expected. Can someone please assist me in figuring out what I am doing incorrec ...