Mentioning a specific key more than once within a data structure

Sorry for the vague title, I'm struggling to articulate this idea.

Here is a type definition that I have:

type Foo = {
  a: number,
  b: string,
  c: boolean,
}

I am looking to utilize this type as follows:

type FooInfo = {
  property: keyof Foo,
  description: string,
  value: Foo[this.property]
}

The concept behind this type is that if property is 'a', then the type of value should be Foo[a] (in this case, a 'number').

Here is an example demonstrating how this type works:

const propA = {
  property: 'a',
  description: 'This is a',
  value: 5
}

I attempted using generics, but I want the type for value to be deduced.

Is it possible to achieve this in Typescript?

Answer №1

I believe utilizing unions in conjunction with mapped types is valuable in this scenario:

type Bar = {
  x: number,
  y: string,
  z: boolean,
}
type Values<T>=T[keyof T]

type BarToBarInfo = {
    [Key in keyof Bar]:{
        property:Key;
        description:string;
        value:Bar[Key] // <--- serves the same purpose as Bar[this.property]
    }
}

type Result = Values<BarToBarInfo>

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

Regular expressions that identify text located at the conclusion of a URL

Although the title may not be entirely appropriate, my goal is to create a regex that will remove any trailing '/' at the end of a URL under certain conditions. For example: http://stackoverflow.com/questions/ask/ to http://stackoverflow.com/qu ...

How can I retrieve the document id from Firestore using Angular?

I attempted to generate an auto document ID in Firestore and retrieve the document ID in Angular 8 using the code provided. However, I am encountering an issue where I only receive the document ID after the execution has been completed. Can someone pleas ...

What is the functionality of react-table v7.7.9 when utilizing global filtering in a TypeScript environment?

My react-table component is functioning smoothly in typescript. const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable( { columns, data } ); I am interested in implementing global filtering. When I incorporate the pl ...

It appears that the functions in linqts are not clearly defined

Currently, I am in the process of learning Angular4 and facing challenges with getting linqts to function properly. Within my room-list.component.ts file, I include it in this manner: import { List } from 'linqts'; A few lines below, I have my ...

Is there a way to navigate directly to the code in a TypeScript type definitions index.d.ts file within Visual Studio Code?

When I command-click on the express() function, it takes me to its definition: const app = express(); In vscode, it leads me to this line in an index.d.ts file: declare function e(): core.Express; However, when I try to jump to the definition of e(), i ...

Experiencing a problem in React JS when trying to render a component?

I encountered an error message while trying to render a component from an object. Type 'FC<Boxprops> | ExoticComponent<{ children?: ReactNode; }>' is not compatible with type 'FC<Boxprops>'. Type 'ExoticComponen ...

Dealing with the "expression has changed after it was checked" error in Angular 2, specifically when a component property relies on the current datetime

My component's styling is dependent on the current datetime. I have a function within my component that looks like this: private fontColor( dto : Dto ) : string { // date of execution for the dto let dtoDate : Date = new Date( dto.LastExecu ...

Module is absent in JavaScript but present in TypeScript

As I delve into coding a vscode extension by following a tutorial, I encountered an issue with importing in my server.ts file. The directory structure looks like this: ...

Create a function that can accept either no parameters or one parameter depending on the input parameter provided

Do you think there is a more efficient way to write this code? The function Z can be called with either one parameter or with no parameters. If the parameter Y is passed in, then the function z(y) is returned, otherwise just run the function z() async x ...

Facilitating the integration of both Typescript and JavaScript within a Node application

We are currently integrating Typescript into an existing node project written in JS to facilitate ongoing refactoring efforts. To enable Typescript, I have included a tsConfig with the following configuration: { "compilerOptions": { "target": "es6", ...

TypeScript code to transform an array of strings into a custom object

I have a specific requirement that I have partially achieved using Java, but now I need to transition it to TypeScript on the client side. Please note: The input provided below is for illustrative purposes and may vary dynamically. Input: var input = [" ...

Does the term 'alias' hold a special significance in programming?

Utilizing Angular 2 and Typescript, I have a component with a property defined as follows: alias: string; Attempting to bind this property to an input tag in my template like so: <input class="form-control" type="text" required ...

The Ionic Menu fails to display when the modal is chosen

Upon logging into the app, users encounter a modal that prompts them to enter data before proceeding to the logged-in page. This page is supposed to display a menu, which I have enabled by calling this.menu.enable on the home page. However, despite enablin ...

What steps should be taken to ensure compatibility between a 4.X Typescript project and an older version like 3.X?

What are the steps to ensure a package developed using TS 4.X is compatible with 3.X? This means leveraging new features for newer versions while fallback to any or unknown for older versions. Can directives be utilized for this specific purpose? Check ou ...

Unable to position text in the upper left corner for input field with specified height

In a project I'm working on, I encountered an issue with the InputBase component of Material UI when used for textboxes on iPads. The keyboard opens with dictation enabled, which the client requested to be removed. In attempting to replace the textbox ...

Is there a way to determine the most recent Typescript target compatibility for every Node version?

When using any version of Node, how can I identify the appropriate Typescript Compiler Option for target that offers the most functionality? I want to eliminate any guesswork. Specify the ECMAScript target version as: "ES3" (default), "ES5", "ES6"/"ES20 ...

Rollup TypeScript: generating declarations for dist, cjs, and es modules

I am working on packaging a TypeScript library using rollup with declaration (d.ts) files, and I am aiming to generate both cjs and es versions. After brainstorming, I came up with the following rollup configuration: const {nodeResolve} = require('@r ...

Understanding the NavigationContainer reference in Typescript and react-navigation

In my current project with react-navigation, I've come across a scenario where I need to navigate from outside of a component (specifically after receiving a push notification). The challenge is that when I use the navigation.navigate method from wit ...

Can an excessive amount of classes cause my Angular application to run sluggishly?

Within my Angular 7 application, I have generated approximately 200 to 300 classes for model types (e.g. component.model.ts) solely for type checking purposes. I have not instantiated any objects from these classes. As I navigate through the application, ...

Understanding how to access an application selector's property during initialization

This is the initial page, generated on the backend (the json-configuration will replace 'propval' as a variable): <%- include('template/head'); %> <application [userdata]='"propval"'> Loading... </applicati ...