Generate types based on properties of a nested interface dynamically

Consider the setup provided:

enum FormGroups {
  customer = 'customer',
  address = 'address',
}

interface Customer {
  'firstName': string;
}

interface Address {
  'street': string;
}

interface SomeFormEvent {
  valid: boolean;
  forms: {
    [FormGroups.customer]: {
      values: Customer,
    },
    [FormGroups.address]: {
      values: Address,
    }
  }
}

Here is what I intend to use:

type Forms = Customer | Address

This, however, is a static approach. If a new form is added in SomeFormEvent in the future like so:

interface SomeFormEvent {
  valid: boolean;
  forms: {
    [FormGroups.customer]: {
      values: Customer,
    },
    [FormGroups.address]: {
      values: Address,
    },
    // a form is added here:
    [FormGroups.preferences]: {
      values: Preferences,
    },
  }
}

I would need to manually update the 'Forms' type as follows:

// manually have to add 'Preferences'
type Forms = Customer | Address | Preferences

Is there a more dynamic way to create the Forms type?

I've attempted the following:

enum FormGroups {
  customer = 'customer',
  address = 'address',
}

interface Customer {
  'firstName': string;
}

interface Address {
  'street': string;
}


interface SomeFormEvent {
  valid: boolean;
  forms: {
    [FormGroups.customer]: {
      values: Customer,
    },
    [FormGroups.address]: {
      values: Address,
    },
  }
}

type Forms = { [K in keyof SomeFormEvent['forms']]: SomeFormEvent['forms'][K]['values'] }

function foo(): Forms {
    return {
        // error: Type '{ firstName: string; street: string; }' is 
        //   not assignable to type 'Forms'. Object literal may only 
        //   specify known properties, and 'firstName' does not exist 
        //   in type 'Forms'.

        firstName: 'sdfdsf',
        street: 'sdffds'
    }
}

However, this approach does not work.

Answer №1

Affirmative, the formation of this alliance is achievable through the utilization of indexed access types.

type Forms = SomeFormEvent["forms"][keyof SomeFormEvent["forms"]]["values"]
//   ^? Customer | Address

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

The system does not acknowledge 'NODE_OPTIONS' as a command that can be used internally or externally, or as an operational program or batch file

While trying to build my react + vite project, I encountered an error after running npm run build. https://i.stack.imgur.com/XfeBe.png Here is a snapshot of my package.json file. https://i.stack.imgur.com/MbbmY.png ...

Utilize functional JS code within a TypeScript environment

Attempting to integrate this code into a TypeScript project, it is a modified version of the react-custom-scrollbars. I am struggling with TypeScript in regards to declaring types for style and props. In this particular case, I prefer to bypass type check ...

Is it possible to drag the div container in HTML to resize its width from both left to right and right to left?

After posing my initial inquiry, I have devised a resizing function that allows for the expansion of a div's width. When pulling the right edge of the div to resize its width from left to right, is it possible to adjust the direction or how to resize ...

Eliminating the "undefined" error in TypeScript within a React application

Having recently dived into TypeScript configuration, I encountered an issue when coding and tried to resolve it by encapsulating the code block in an if statement checking for usersData to eliminate the "Object is possibly undefined" errors. However, upon ...

Access to property 'foo' is restricted to an instance of the 'Foo' class and can only be accessed within instances of 'Foo'

In my Typescript code, I encountered an error with the line child._moveDeltaX(delta). The error message reads: ERROR: Property '_moveDeltaX' is protected and only accesible through an instance of class 'Container' INFO: (me ...

Retrieving decimal value from a given string

Currently, I am working with Google Maps and encountering an issue with distance values being returned as strings like 1,230.6 km. My goal is to extract the floating number 1230.6 from this string. Below is my attempted solution: var t = '1,234.04 km ...

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

How can one pass a generic tuple as an argument and then return a generic that holds the specific types within the tuple?

With typescript 4 now released, I was hoping things would be easier but I still haven't figured out how to achieve this. My goal is to create a function that accepts a tuple containing a specific Generic and returns a Generic containing the values. i ...

Step-by-step guide on how to stop CDK Drop depending on a certain condition

I'm trying to figure out how to disable dropping using CDK based on certain conditions. Specifically, I want the drop functionality to be disabled if the list I'm attempting to drop into is empty. I haven't been able to find a solution withi ...

Typescript and RxJS: Resolving Incompatibility Issues

In my development setup, I work with two repositories known as web-common and A-frontend. Typically, I use npm link web-common from within A-frontend. Both repositories share various dependencies such as React, Typescript, Google Maps, MobX, etc. Up until ...

Unable to incorporate node-vibrant into Angular 7 project

Currently facing some challenges while attempting to integrate node-vibrant into my Angular 7 project: -Successfully imported with import * as Vibrant from 'node-vibrant';, but encountering a warning in VS Code: Module '"/Users/xxxx/Docume ...

How to use Angular template syntax to assign an async array to multiple variables

When working in JS, there is a clever method for assigning values from an array to new variables with ease: let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3 I started thinking about whether I could achieve a similar elegant solution using Angular's ...

trouble with file paths in deno

I was attempting to use prefixes for my imports like in the example below: "paths": { "~/*": ["../../libs/*"], "@/*": ["./*"] } However, I keep encountering an error message say ...

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

What are the steps to incorporating a personalized component into an extension?

I am working on a TypeScript file that includes a class inheriting cc.Component. My goal is to package this file as an extension and make it easily accessible within the editor, allowing users to add it to a node with ease. What steps should I take to ac ...

Arranging an array containing three elements

As I work on my angular app, I have come across the following array: [ { "Name": "Jack", "IncomingTime": "2020-06-19T11:02+00:00", "Outgoingtime": "2020-06-19T11:07+00:00" ...

ANGULAR: Issue with filtering an array by clicking a button is not functioning

I've been attempting to apply a filter to my array by using modulo on the id when clicking multiple buttons. I initially tried using pipe but was advised to stick with .filter(). Despite watching numerous online tutorials, I keep encountering errors o ...

Error: Unable to use import statement outside of a module when deploying Firebase with TypeScript

Every time I try to run firebase deploy, an error pops up while parsing my function triggers. It specifically points to this line of code: import * as functions from 'firebase-functions'; at the beginning of my file. This is a new problem for me ...

What is the process for performing type checking on an array variable designated as "as const"?

Check out this code snippet: export type Types = 'a' | 'b'; export type MyPartials = { readonly [P in keyof Types]?: number; }; export interface MyI { readonly name: string; readonly myPartials: MyPartials; } export const myI ...

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

I am in the process of developing a function that takes a boolean indicator object like this: const fruits = { apple: false, banana: false, orange: false, mango: false, }; Along with an array such as ['apple', 'orange']. The go ...