Using objects as keys in TypeScript interfaces or types

Imagine I have an object containing a set of values:

const my_enum = {
    value1: 'x-value-1',
    value2: 'x-value-2'

}

I am looking to define an interface or type using 'x-value-1' and 'x-value-2' as keys, like so:

interface my_interface {
    'x-value-1': string;
    'x-value-2': string;
}

However, I prefer not to rely on my enum for determining the keys in order to use them throughout my code. Is there a method to achieve something akin to this?

interface my_interface {
    `${value1}`: string;
    `${value2}`: string;
}

Answer №1

give this a shot

const DataType = "Data"; // or "Attribute" etc
const NameType = "Name";
const ValueType = "Value";

type Entry {
    [DataType]?: string
    [NameType]?: string
    [ValueType]?: number
}

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

What is the best way to send various parameters to a component using [routerLink] or router.navigate?

My app-routing.module.ts is configured as shown below: const routes: Routes = [ { path: "branches/:branch", component: BranchesComponent }, // ... ]; In addition, in my app.component.html, I have the following code: <li> ...

Setting a TypeScript type recursively to allow for changes without affecting tuples

export type DraftObject<T> = {-readonly [P in keyof T]: Draft<T[P]>} export interface DraftArray<T> extends Array<Draft<T>> {} export type Draft<T> = T extends any[] ? DraftArray<T[number]> : T extends Read ...

Difficulty in updating the value of HTML Range element using Angular6 function

My goal is to retrieve the changing values from a series of HTML range sliders. This is how they are set up: <li *ngFor="let rgbVal of rgbVals; let i=index"> {{i}}: {{rgbVal}} <br> <div class="color-box" [style.back ...

Encountering an issue with applying D3 fill to a horizontal stacked bar chart in Angular using TypeScript. When using .attr("fill", ..) in VSC, an error stating "No overload matches this call" is displayed

My goal is to create a stacked horizontal bar chart in d3, and I've been following the code example provided here. To showcase my progress so far, I have set up a minimal reproduction on stackBlitz which can be found here. While there are no errors ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Challenges faced when incorporating ng-content within Angular components

I am facing a specific issue where I need to pass code from a file containing a component to its child component. My initial approach was to use ng-content, but unfortunately, this method did not work as expected. I am unsure if the ng-content usage is inc ...

Unable to locate a custom definition for TypeScript v3

When I am running my webpack dev server, Typescript is generating this error: ERROR in ./src/components/allowcated-resources/AllowcatedResources.tsx Module not found: Error: Can't resolve 'my-scheduler' in 'mypath\allowcated-resou ...

The type 'Observable<DataListItem[]>' cannot be assigned to type 'DataListItem[]'

Error message details: "The type 'Observable' is not compatible with the type 'DataListeItem[]'. The 'includes' property is missing in the 'Observable' type." I am currently using the Material Table Schematic an ...

Schedule a daily Local Notification in Ionic 3 at a designated time

I have integrated the Ionic 3 local notification plugin into my project by running these commands: ionic cordova plugin add cordova-plugin-local-notification npm install --save @ionic-native/local-notifications All necessary dependencies have been added ...

Ways to invoke a function from one component in another

Having created two components - navbar and login, I am attempting to call a function from the navbar component in the login component. Thus far, my attempts have been unsuccessful... import {Component, OnInit} from '@angular/core'; @Component({ ...

Error in TypeScript when using Google Maps React with Next.js: there is a possibility that infoWindow.close is undefined

Working on a small project in next.js (typescript) utilizing the google maps api with a KmlLayer. I want my map to interact with another component, SensorInfo. The current setup allows for smooth interaction between them - when SensorInfo is closed, the in ...

Identified the category

How can I retrieve the default option from a list of options? type export type Unpacked<T> = T extends Array<infer U> ? U : T; interface getDefaultValue?: <T extends Option[]>(options: T) => Unpacked<T>; Example const options = ...

Exploring Function Overriding in TypeScript

Currently, I'm working on developing a TypeScript method. import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ p ...

Angular allows for a maximum time span of 60 days between two date inputs

I am looking to implement a validation in JavaScript or TypeScript for Angular where the start date cannot be more than 60 days after the end date is entered. The requirement is to enforce a "maximum range of 60 days" between the two input dates (dateFro ...

Guidelines on incorporating emotion/styled into React applications with TypeScript

Including my root component in the ThemeProvider from @emotion/react has granted me access to props.theme. Here is an example: const StyledDiv = styled.div` background-color: ${(props) => props.theme.palette.primary.main}; `; Issue: TypeScript indica ...

Angular 8: Adjusting select options based on another field's value

Currently attempting to modify the value within a select element in Angular 8. Upon researching, I discovered that I could potentially utilize the following: $('#selectSeccion').val("SeccionOption"); The particular select element is as follows: ...

Tips for sending parameters in Next.js without server-side rendering

I followed the documentation and tried to pass params as instructed here: https://nextjs.org/docs/routing/dynamic-routes However, I encountered a strange issue where the received params are not in string format. How is it possible for them to be in an arr ...

When adding Tailwind CSS to my Next.js app, the MDX styling through next-mdx-remote stops working properly

I've integrated MDX into my Next.js project using next-mdx-remote. While following JetBrains WebStorm's detailed tutorial on building a blog with MDX, they utilized Bootstrap for styling. However, I opted for Tailwind CSS as my preferred CSS fra ...

Will adding additional line breaks increase the overall length of the code?

Currently, I am immersed in a project involving Angular 4 and TypeScript. Recently, I came across a video showcasing how VSCODE can enhance the code's appearance. Intrigued, I installed the prettier plugin to achieve the same effect. Running this tool ...

`Why isn't GetServerSideProps being triggered for a nested page in Next.js when using Typescript?

I have been working on a page located at /article/[id] where I am trying to fetch an article based on the id using getServerSideProps. However, it seems that getServerSideProps is not being called at all as none of my console logs are appearing. Upon navi ...