Efficient solution for handling TypeScript interface properties based on previous property in a variety of scenarios

Question

Efficient solution for handling TypeScript interface properties based on previous property in a variety of scenarios

Background

Implementing this concept can be achieved in various ways. Here are some resources that discuss different approaches:

TypeScript: an interface property dependent on another

How to make Typescript interface property to be depended on another property

Typescript Interface - make type of one property dependent of type of another property

Approach

Through experimenting with different methods, I have found that the solution provided in the third link above is most suitable for my specific situation.

After testing various approaches, I realized that I had a particular question regarding this topic which warranted its own discussion.

Here is a snippet showcasing what I am working on:

enum MyEnum
{
    One = 'One',
    Two = 'Two',
    Three = 'Three',
    // And potentially more enums in the future.
}

interface MyInterface<T extends MyEnum>
{
    prop1: string,
    prop2: boolean,
    prop3: T,
    prop4: T extends MyEnum.One
           ? OneSpecificInterface
           : T extends MyEnum.Two
           ? TwoSpecificInterface
           : T extends MyEnum.Three
           ? ThreeSpecificInterface
           : // And so forth.
}

prop3 can take any value from MyEnum, and the type of prop4 depends on the value of prop3.

For instance, if prop3 is MyEnum.One, then the corresponding value passed to prop4 should be OneSpecificInterface (an interface containing specific values for that data type).

The unique values within each prop4 may vary significantly, making it impractical to create a single encompassing interface. However, there needs to be a unified interface covering these four properties, leading me to this methodology.

Question

While the current solution works effectively, it's evident that as MyEnum expands, the ternary operators within prop4 will become increasingly lengthy.

Is there a more concise or elegant approach to handle this logic within prop4?

If a more streamlined method using the existing framework is not available, it's not a major setback since the current system is straightforward enough - however, I am still curious and haven't managed to find a conclusive answer independently yet.

I am open to exploring alternative types of type-checking that achieve the same outcome, but after attempting several options, I have determined that this method offers the best balance between readability and effectiveness.

typescript

Answer 1

Answer №1

If you're looking to map enum members to interface types in TypeScript, you can take advantage of the keylike nature of enums which can have number or string values. This allows for a direct mapping between keylike types and arbitrary types using object types. For instance:

interface Definitions {
    [MyEnum.First]: FirstType,
    [MyEnum.Second]: SecondType,
    [MyEnum.Third]: ThirdType
    // etc
}

Instead of resorting to lengthy conditional types to find the value corresponding to an enum member, you can use indexed access types to retrieve it directly:

interface MyDefinition<T extends MyEnum> {
    property1: string,
    property2: boolean,
    property3: T,
    property4: Definitions[T]
}

This approach should scale well and deliver good performance. While this usage might be unconventional for interfaces (as there may not always be a readily available value of type Definitions), situations often arise where values of that type or a related one come into play naturally:

declare const definitions: Definitions;

function generateMockDefinition<T extends MyEnum>(t: T): MyDefinition<T> {
    return {
        property1: "abc",
        property2: true,
        property3: t,
        property4: definitions[t]
    }
}

The function above creates a mock MyDefinition<T> based on a provided value t of type

T</code, performing the lookup for <code>t

in an object of type Definitions. While this might not align with every specific use case, it demonstrates how this representation strategy can extend beyond simple type lookups.

Link to Playground with Code

Answer 2

If you're looking to map enum members to interface types in TypeScript, you can take advantage of the keylike nature of enums which can have number or string values. This allows for a direct mapping between keylike types and arbitrary types using object types. For instance:

interface Definitions {
    [MyEnum.First]: FirstType,
    [MyEnum.Second]: SecondType,
    [MyEnum.Third]: ThirdType
    // etc
}

Instead of resorting to lengthy conditional types to find the value corresponding to an enum member, you can use indexed access types to retrieve it directly:

interface MyDefinition<T extends MyEnum> {
    property1: string,
    property2: boolean,
    property3: T,
    property4: Definitions[T]
}

This approach should scale well and deliver good performance. While this usage might be unconventional for interfaces (as there may not always be a readily available value of type Definitions), situations often arise where values of that type or a related one come into play naturally:

declare const definitions: Definitions;

function generateMockDefinition<T extends MyEnum>(t: T): MyDefinition<T> {
    return {
        property1: "abc",
        property2: true,
        property3: t,
        property4: definitions[t]
    }
}

The function above creates a mock MyDefinition<T> based on a provided value t of type

T</code, performing the lookup for <code>t

in an object of type Definitions. While this might not align with every specific use case, it demonstrates how this representation strategy can extend beyond simple type lookups.

Link to Playground with Code

Efficient solution for handling TypeScript interface properties based on previous property in a variety of scenarios

Background

Approach

Question

Answer №1

Similar questions

The issue with npm run build may be caused by a compatibility issue between TypeScript and lodash

Retrieving information using React Query in TypeScript

The Angular filter feature operates on individual columns instead of filtering all columns simultaneously

The geolocation feature is operational in the browser test, but it is not functioning properly on the

The compiler mistakenly infers an incorrect type while utilizing a default value for a discriminated union type

Exploring the versatility of type extensions in TypeScript

Typescript: The art of selectively exporting specific types

The implementation of user context failed to meet expectations in terms of writing

What causes Next.js to struggle with recognizing TypeScript code in .tsx and .ts files?

Why does node.js struggle to find other TypeScript React components?

The element is absent in Type {}, however, it is mandatory in Type '&' and '&' cannot be designated to String Index Type Errors

Guide to Making a Basic TypeScript Metadata Tag in Your Code

Is there a way to determine the number of code lines in all TypeScript files by utilizing tslint?

What kind of conditions does SonarQube report as being uncovered?

Using Higher Order Components (HOC) in combination with Redux compose and Typescript

Implementing a string replacement within an array of objects using TypeScript

Can inheritance pass constructor values in TypeScript/JavaScript?

I'm struggling to find the right Typescript syntax for defining a thunk function that returns a value while using React Redux Toolkit

Encountering an issue in Angular where data.slice is not functioning properly, resorting to using parseInt to convert strings into Date

Removing a row will always result in the deletion of the final row, as the index is returned as