Various types of generics within an object

Question

Various types of generics within an object

Is there a way to achieve different types for the nested K type within a type like MyType? Here's an example:

type Config<K> = {
  value: K;
  onUpdate: (value: K) => void;
}

type MyType<F extends string> = {
  [K in F]: <V>() => Config<V>;
}

// Desired functionality
const hello: MyType<'setup1'|'setup2'> = {
  setup1: () => ({
    value: { hello: 'world' },
    onUpdate: record => console.log(record.hello),
  }),
  setup2: () => ({
    value: { goodbye: 'world' },
    onUpdate: record => console.log(record.goodbye),
  }),
};

TS Playground

Encountering the error message

Type '{ hello: string; }' is not assignable to type 'V'. 'V' could be instantiated with an arbitrary type which could be unrelated to '{ hello: string; }'.(2322)

when attempting this.

typescript typescript-generics

Answer 1

Answer №1

Regrettably, the impossibility arises due to

<V>() => Config<V>

not attributing concrete types to Config, making the generic parameter K in type Config<K> arbitrary and unable to contain any value.

To assist TypeScript in ascertaining the type of K, you must specify during runtime by introducing more generics to MyType. It appears that the key name is the only property varying within your example objects. Therefore, you can define which setup corresponds to which key name like this:

const hello: MyType<{'setup1' : 'hello', 'setup2' : 'goodbye' }> = {

This information can then be interpreted by the types as shown below:

type Config<K extends string> = {
  value: { [F in K]: string };
  onUpdate: (value: { [F in K]: string }) => void;
}

type MyType<F extends { [key: string]: string }> = {
  [K in keyof F]: () => Config<F[K]>;
}

Playground link.

Answer 2

Regrettably, the impossibility arises due to

<V>() => Config<V>

not attributing concrete types to Config, making the generic parameter K in type Config<K> arbitrary and unable to contain any value.

To assist TypeScript in ascertaining the type of K, you must specify during runtime by introducing more generics to MyType. It appears that the key name is the only property varying within your example objects. Therefore, you can define which setup corresponds to which key name like this:

const hello: MyType<{'setup1' : 'hello', 'setup2' : 'goodbye' }> = {

This information can then be interpreted by the types as shown below:

type Config<K extends string> = {
  value: { [F in K]: string };
  onUpdate: (value: { [F in K]: string }) => void;
}

type MyType<F extends { [key: string]: string }> = {
  [K in keyof F]: () => Config<F[K]>;
}

Playground link.

Various types of generics within an object

Answer №1

Similar questions

Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

Unexpected outcome when returning a map

Populate a chart in real-time with data pulled directly from the Component

The absence of properties during the inference of component props

The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

Obtaining the host and port information from a mongoose Connection

Working with JSON data in AngularJS2's templates

Angular Pause until the variable is ready

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

Switch up the styling of a component by updating its properties with a switch statement

Neglectful TypeScript null checks overlooking array.length verification

The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Incorporating Ionic Elements

Encountering issues when trying to build a Nestjs app with node-crc (rust cargo) in Docker

What could cause my arguments to "not align with any signature" of console.log?

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Utilizing flatMap to implement nested service calls with parameters

The Angular 11 library module has been successfully imported into the consuming app but it is not being utilized

Creating an Angular material modal that uses a component wrapper and takes a component as a parameter

Issue: "The argument provided must be a specific string, not a string or an array of strings."