Typescript type with dynamic key

Consider a scenario where a type key follows this structure:

XXX_{placeholder1}_{placeholder2}
, with placeholder1 being any letter from a to z, and the same constraint applying to placeholder2. Rather than explicitly defining each variation like so:

type ObjectT = {
  XXX_a_a: '...',
  XXX_a_b: '...',
  ....
  XXX_z_z: '...'
}

Is there a method to dynamically generate these keys? I am aware that using:

type ObjectT = {
  [key: string]: string
}

provides a generic solution, but it lacks specificity. Is there a way to achieve a more constrained type?

Answer №1

Absolutely! You have the option to utilize template literal types in your code!

type choices = 'apple' | 'banana' | 'cherry' | ... | 'kiwi'

type selection = `FRUIT_${choices}_${choices}`;

type DataT = Record<selection,string>

Experience it on the Playground!

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 transfer props between components using typescript?

I have a unique button component that I need to include in another component. The button type and interface I am using are as follows: type IButton = { className?: string, onClick?: MouseEventHandler; children: React.ReactNode; props: IButt ...

Obtain the name of the property that is being accessed in TypeScript

I am looking to streamline my code by creating a set of generic methods to replace backing fields for properties. Specifically, I need to perform some common tasks in the setter (such as calling event emitters in Angular 5) and I want to avoid repeating th ...

A guide on exporting table data to PDF and enabling printing features in Angular 7

Can anyone provide guidance on how to export my dynamic table data into Excel, PDF, and for printing using the appropriate Angular Material components and npm plugins? I have successfully exported the data as an Excel file, but am struggling with exporti ...

Error: Trying to access the 'keyboard' property of an undefined object

I am encountering an error message 'Cannot read property 'keyboard' of undefined' and I'm not sure how to fix it. I just want to check if the keyboard is visible on the screen, but this specific line of code seems to be causing the ...

Determine the type of return based on the provided parameter

Can someone please assist me in understanding how to pass the typeof XXX to a method parameter and specify that the return type should be an instance of that method? Here is the method I am working with: public getComponent<T>(component: typeof Beh ...

"Encountering issues with the functionality of two Angular5 routers

main.component.html [...] <a routerLink="/company-list">Open</a> [...] <main> <router-outlet name="content"><router-outlet> </main> [...] app.compoment.html <router-outlet><router-outlet> app.routing.modu ...

Dealing with Angular can be frustrating at times, especially when you encounter errors like "TypeError: Cannot

Encountering an Error Message... ERROR TypeError: Cannot read properties of undefined (reading 'geoCoord') at Object.next (customers.service.ts:16:38) When assigning fixed values to "lon" and "lat" variables, like 51.1634 and 10.4477, the f ...

Retrieve all the characteristics accessible of a particular course

I am facing a situation where I have the following class structure: class A { id: number propertyA: string constructor(id: number) { this.id = id } } let a = new A(3) console.log(SomeFunction(a)) // expected output = ['id', ' ...

Requesting Next Page via Angular GET Method for Paginated API

Having trouble loading data from a paginated REST API using the code below. Any suggestions for a better approach are welcome! component.ts import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/common/http&a ...

Tips for resolving the "trim" of undefined property error in Node.js

Looking to set up a basic WebAPI using Firebase cloud functions with express and TypeScript. Here's the code I have so far: import * as functions from 'firebase-functions'; import * as express from 'express'; const app = express( ...

Using Typescript: accessing all properties from a specified type while excluding one

Currently working in React, I am interested in extending my type from another, with the exception of some props. This is how I want to approach it : import React from 'react'; import { withTheme } from 'styled-components'; import SvgBa ...

Display or hide an image in Angular when a button is clicked

I am facing an issue in my code where I want to show and hide an image through a link when a button is clicked. Currently, when I click the button, the image opens in a new tab in Chrome instead of displaying it on my app's page. I need to link the UR ...

Contrast the equality of two arrays with objects

I have two different types of data structures var dataA = [ { "Employee Name": "Mr. X", id: "1" }, { "Employee Name": "Mr. Y", id: "2" }, { "Employee Name": "Mr. Z", id: "3" } ]; var dataB = [ { id: "1", " ...

React Typescript: The element is implicitly assigned an 'any' type as the type does not have an index signature

While attempting to locate a key of an object using an item from an array, I encountered an error... An Element implicitly has an 'any' type because type lacks an index signature I've replicated the issue in this sandbox https://codesandbo ...

Challenges encountered while deploying a NextJS project with TypeScript on Vercel

Encountering an error on Vercel during the build deploy process. The error message says: https://i.stack.imgur.com/Wk0Rw.png Oddly, the command pnpm run build works smoothly on my PC. Both it and the linting work fine. Upon inspecting the code, I noticed ...

Launching Angular 2 Application on Azure Cloud

I have recently been diving into the world of Angular 2 and Azure. Following the steps outlined in the Angular 2 Tutorial, I was able to successfully run my application locally without any issues. After deploying the app to Azure, I encountered a problem. ...

Steps for integrating Cordova-vk plugin into an Ionic 3 project

I am looking to incorporate the cordova-vk plugin into my app, but I am having trouble connecting it to Typescript. vkSdk is not defined I understand that the plugin is located in the node_modules folder. How can I successfully integrate it into my page ...

Showing JSON data as a list in Angular 7

I'm encountering a problem trying to display JSON data in a list format. It seems like something is missing because the data isn't showing up. Below is the code I've been using: Service: getData() { this.http.post('http://localho ...

The issue of Angular 4 Firebase Observable with .map() being duplicated upon refresh persists and reverting the order is not working

Utilizing Angular 4 alongside Firebase and AngularFire presents a question. How can I showcase the top 10 users from my database on the HTML code? Here is the snippet of code: export class HomefillerComponent implements OnInit { topusers: Observable< ...

What is the best way to clear an array of messages using .subscribe in JavaScript?

Within my messages.component.ts file, I have the following code snippet: constructor(public messagesService: MessagesService) { this.subscription = this.messagesService.getMessage().subscribe(message => { this.messages.push(message); }); this.su ...