Derived a key from an enum member to be used as an interface key

Question

Derived a key from an enum member to be used as an interface key

I am attempting to configure an object property by selecting its key using a computed key, via an enum, as shown in the code snippet below.

Unfortunately, solutions 1 and 2 are not functioning. These are the solutions I need to implement in my code because I have to assign a value to a key that is dynamically retrieved from an API call.

Interestingly, solutions 4 and 5 are working fine, indicating that solutions 1 and 2 could potentially work by reassigning property values with the dynamic key following a hard-coded property key.

This is because TypeScript accepts an arbitrary number of additional properties as long as you provide matching interface properties. However, I am puzzled as to why duplicated dynamic properties are working in solutions 4 and 5.

So, why are solutions 1 and 2 not working? What am I missing?

Thank you for your assistance.


interface Cat {
    tail: boolean;
    legs: Quadruped;
}

interface Quadruped {
    totalNumber: number;
}

enum BodyParts {
    TAIL = 'tail',
    TOTAL_NUMBER = 'totalNumber'
}

let brokenArgo: Cat = { tail: true, legs: { totalNumber: 4 } };
let argo: Cat = { tail: true, legs: { totalNumber: 4 } };

argo.legs = null;

let TN = 'TOTAL_NUMBER';
let tn: BodyParts = BodyParts[TN];

// solution 1 = broken
brokenArgo.legs = { [tn]: 6 }
// solution 2 = broken
brokenArgo.legs = { [BodyParts[TN]]: 6 };
// solution 3 = working
argo.legs = { [BodyParts['TOTAL_NUMBER']]: 6 };
// solution 4 = working
argo.legs = {
    totalNumber: 0,
    [tn]: 6
};
// solution 5 = working
argo.legs = {
    totalNumber: 0,
    [BodyParts[TN]]: 6
};

You can observe the script above running in this Typescript playground

typescript enums interface

Answer 1

Answer №1

Upon reviewing some unofficial TypeScript documentation, I came to the realization that when interfaces are declared with specific expected properties (non-optional), it is necessary to inform TypeScript that a computed key is being used "as" the expected property. In other words, I am certain (I expect) to receive that exact property from the backend.

To correct the above (albeit a poor example), it can be fixed as follows:

(refer to live code here)

interface Cat {
    tail: boolean;
    legs: Quadruped;
}

interface Quadruped {
    totalNumber: number;
}

enum BodyParts {
    TAIL = 'tail',
    TOTAL_NUMBER = 'totalNumber'
}

let brokenArgo: Cat = { tail: true, legs: { totalNumber: 4 } };
let argo: Cat = { tail: true, legs: { totalNumber: 4 } };

argo.legs = null;

let TN = 'TOTAL_NUMBER';
let tn: BodyParts.TOTAL_NUMBER = BodyParts[TN];

// solution 1 = broken
brokenArgo.legs = { [tn]: 6 }
// solution 2 = broken
brokenArgo.legs = { [BodyParts[TN as 'TOTAL_NUMBER']]: 6 };
// solution 3 = working
argo.legs = { [BodyParts['TOTAL_NUMBER']]: 6 };
// solution 4 = working
argo.legs = {
    // totalNumber: 0, // No more needed
    [tn]: 6
};
// solution 5 = working
argo.legs = {
    totalNumber: 0,
    [BodyParts[TN]]: 6
};

Therefore, if you are uncertain whether you will receive propertyA or propertyB from the backend (which was my initial issue), and you wish to use a computed key, it is advisable to either make the key in the interface declaration optional or set it as an alias type (or an enum) like

type myType = 'propertyA' | 'propertyB'

and utilize it as the key of the property in your interface as shown below:

interface MyInterface { 
    myType: number 
}

Answer 2

Upon reviewing some unofficial TypeScript documentation, I came to the realization that when interfaces are declared with specific expected properties (non-optional), it is necessary to inform TypeScript that a computed key is being used "as" the expected property. In other words, I am certain (I expect) to receive that exact property from the backend.

To correct the above (albeit a poor example), it can be fixed as follows:

(refer to live code here)

interface Cat {
    tail: boolean;
    legs: Quadruped;
}

interface Quadruped {
    totalNumber: number;
}

enum BodyParts {
    TAIL = 'tail',
    TOTAL_NUMBER = 'totalNumber'
}

let brokenArgo: Cat = { tail: true, legs: { totalNumber: 4 } };
let argo: Cat = { tail: true, legs: { totalNumber: 4 } };

argo.legs = null;

let TN = 'TOTAL_NUMBER';
let tn: BodyParts.TOTAL_NUMBER = BodyParts[TN];

// solution 1 = broken
brokenArgo.legs = { [tn]: 6 }
// solution 2 = broken
brokenArgo.legs = { [BodyParts[TN as 'TOTAL_NUMBER']]: 6 };
// solution 3 = working
argo.legs = { [BodyParts['TOTAL_NUMBER']]: 6 };
// solution 4 = working
argo.legs = {
    // totalNumber: 0, // No more needed
    [tn]: 6
};
// solution 5 = working
argo.legs = {
    totalNumber: 0,
    [BodyParts[TN]]: 6
};

Therefore, if you are uncertain whether you will receive propertyA or propertyB from the backend (which was my initial issue), and you wish to use a computed key, it is advisable to either make the key in the interface declaration optional or set it as an alias type (or an enum) like

type myType = 'propertyA' | 'propertyB'

and utilize it as the key of the property in your interface as shown below:

interface MyInterface { 
    myType: number 
}

Derived a key from an enum member to be used as an interface key

Answer №1

Similar questions

Issue with MUI icon import: React, Typescript, and MUI type error - Overload does not match this call

Can we access global variables directly in an Angular 2 HTML template?

What is the most effective method for merging two arrays in JavaScript?

typescript makeStyles() functions from material-ui library

Discovering ways to fetch an array of objects using object and arrays in JavaScript

Develop a set of matching key/value pairs using TypeScript

What is the best way to set a checkbox to null instead of false using Angular?

Steps for showing a component (popup modal) just one time with React hooks

Creating React components with TypeScript: Defining components such as Foo and Foo.Bar

Bringing Typescript classes into React-scripts does not act as a constructor

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

Having trouble transferring information between two components in Angular version 14

Acquire the URL using Angular within a local environment

Dynamic form groups in Angular: Avoiding the issue of form inputs not binding to form groups

Guide on adding up the value of a property within an array of objects using AngularJS

Dynamically divide canvas screens based on fabricjs dropdown selection

What causes the difference in inference for unspecified generics between a simple function call and a null-coalescing operator in TypeScript?

Steps for initiating an Angular 4 project

Adding an event listener to the DOM through a service

Oops! Looks like there's an unexpected error with the module 'AppRoutingModule' that was declared in the 'AppModule'. Make sure to add a @Pipe/@Directive/@Component annotation