An item where the value of one key is determined by the value of another key

Question

An item where the value of one key is determined by the value of another key

How can we implement this specific pattern in code (please note that this is not valid syntax and should be considered pseudocode):

type Config = {
  [key: string]: <T> {
    params: T,
    doSth: (params: T) => void,
  },
}

In this scenario, the generic type T is unique for each key's value within the object, but it is also reused under different fields within the same value. Additionally, the T type is derived from the params field. This setup allows for:

const config: Config = {
  a: {
    params: { x: 123 },
    doSth: params => {}, // The type of "params" would be "{ x: 123 }"
  },
  b: {
    params: { y: 'asd' },
    doSth: params => {}, // The type of "params" would be "{ y: 'asd' }"
  },
}

Surprisingly, searching for similar implementations or solutions to this problem did not yield relevant results. It appears to be a useful pattern with no direct matches in existing resources. Previous attempts to adapt solutions of similar problems have been unsuccessful.

typescript

Answer 1

Answer №1

When working with TypeScript, sometimes types alone are not enough to achieve the desired outcome, and you may need to use functions for assistance, even if they do not have a runtime impact. This scenario calls for a different approach. Here is a function that demonstrates this concept:

type ConfigEntry<T extends object> = {
    params: T;
    doSth: (params: T) => void;
};

function createConfigEntry<T extends object>(obj: ConfigEntry<T>): ConfigEntry<T> {
    return obj;
}

The ConfigEntry type allows us to connect the two instances where this type will be utilized. The usage of this function can be seen when assigning property values:

const configuration = {
    optionA: createConfigEntry({
        params: { x: 123 },
        doSth: params => {}, // Type of `params` is `{ x: number; }`
    }),
    optionB: createConfigEntry({
        params: { y: "asd" },
        doSth: params => {}, // Type of `param`s is `{ y: string; }`
    }),
};

Please note that there is no explicit type annotation for configuration. TypeScript infers it from the object initialization.

However, the types inferred on params might not align exactly with your requirements. TypeScript does not automatically deduce the types as expected. It will either infer { x: number; } and { y: string; }, or when defining the objects as const, it will infer { readonly x: 123; } and { readonly y: "asd"; }:

const configuration = {
    optionA: createConfigEntry({
        params: { x: 123 } as const,
        doSth: params => {}, // Type of `params` is `{ readonly x: 123; }`
    }),
    optionB: createConfigEntry({
        params: { y: "asd" } as const,
        doSth: params => {}, // Type of `params` is `{ readonly y: "asd"; }`
    }),
};

This might not match your exact specifications, but it gets pretty close. It showcases one of the possible approaches using current TypeScript capabilities.

Playground example for reference

Answer 2

When working with TypeScript, sometimes types alone are not enough to achieve the desired outcome, and you may need to use functions for assistance, even if they do not have a runtime impact. This scenario calls for a different approach. Here is a function that demonstrates this concept:

type ConfigEntry<T extends object> = {
    params: T;
    doSth: (params: T) => void;
};

function createConfigEntry<T extends object>(obj: ConfigEntry<T>): ConfigEntry<T> {
    return obj;
}

The ConfigEntry type allows us to connect the two instances where this type will be utilized. The usage of this function can be seen when assigning property values:

const configuration = {
    optionA: createConfigEntry({
        params: { x: 123 },
        doSth: params => {}, // Type of `params` is `{ x: number; }`
    }),
    optionB: createConfigEntry({
        params: { y: "asd" },
        doSth: params => {}, // Type of `param`s is `{ y: string; }`
    }),
};

Please note that there is no explicit type annotation for configuration. TypeScript infers it from the object initialization.

However, the types inferred on params might not align exactly with your requirements. TypeScript does not automatically deduce the types as expected. It will either infer { x: number; } and { y: string; }, or when defining the objects as const, it will infer { readonly x: 123; } and { readonly y: "asd"; }:

const configuration = {
    optionA: createConfigEntry({
        params: { x: 123 } as const,
        doSth: params => {}, // Type of `params` is `{ readonly x: 123; }`
    }),
    optionB: createConfigEntry({
        params: { y: "asd" } as const,
        doSth: params => {}, // Type of `params` is `{ readonly y: "asd"; }`
    }),
};

This might not match your exact specifications, but it gets pretty close. It showcases one of the possible approaches using current TypeScript capabilities.

Playground example for reference

An item where the value of one key is determined by the value of another key

Answer №1

Similar questions

Utilizing ag-grid with Vue.js: Implementing TypeScript to access parent grid methods within a renderer

Troubleshooting the creation of migration paths in NestJS with TypeORM

"Strange Type Conversion Behavior in next.js 13: Why is res.json() Converting Numbers to Strings

Transferring HTML attributes from an Immutable object in Typescript

Referring to a component type causes a cycle of dependencies

Accessing a property that doesn't exist on a union type in Phaser using TypeScript

Syntax for nested arrow functions in TypeScript

How to retrieve a specific property from an array within an object using Typescript

Creating an object efficiently by defining a pattern

Exploring the traversal of an array of objects within Tree Node

Exploring the process of dynamically incorporating headers into requests within react-admin

Integration of a JavaScript file with an Angular 4 project: Steps to import the file and leverage its functions within a component

Validate the button's status in Ionic

Finding a way to reference multiple components within a mapping function

What steps should I take to resolve the ChunkLoadError related to signalr?

What is the best way to check the API response status in NextJS13?

What is the method to ensure that the children of an object strictly adhere to a specific interface or inherit from it?

Error: The function of splitting 'a' is not available within the context of 'r' (angular.js:263

NestJs Function yielding inconsistent results based on its calling location

The ng-template directive does not duplicate data, whereas HTML elements have the ability to showcase it