Is there a way to iterate over an object with predetermined keys and then utilize those keys to access another object of the same type?

Question

Is there a way to iterate over an object with predetermined keys and then utilize those keys to access another object of the same type?

What I'm attempting to do next is calculate the total value of value in pounds. However, this is causing an error message stating:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MoneyType'. No index signature with a parameter of type 'string' was found on type 'MoneyType'

.

interface MoneyType {
    yuan: number,
    dollar: number,
    pound: number,
}

const CONVERSION_RATE: MoneyType = {
    yuan: 10,
    dollar: 5,
    pound: 1
}

function totalValue(value: MoneyType) {
    let totalValue = 0;
    for (let moneyType in value) {
        totalValue += CONVERSION_RATE[moneyType] * value[moneyType];
    }

    return totalValue;
}

While I know that I could use

interface MoneyType {[key: string]: number}

as an alternative, I'm curious if there's a way to maintain the specific key restrictions to yuan, dollar, and pound.

typescript

Answer 1

Answer №1

Approach 1 - simply convert to any type:

function calculateTotal(value: MoneyType) {
    let total = 0;
    for (let money in value) {
        total += (CONVERSION_RATE as any)[money] * (value as any)[money];
    }
    return total;
}

Approach 2 - expands the interface using a key/value format:

interface OnlyNumbers {[key: string]: number}

interface MoneyType extends OnlyNumbers {
    yuan: number,
    dollar: number,
    pound: number,
}

Additionally, consider these recommendations for your function:

iterate through CONVERSION_RATE members since the value passed may have additional members.
validate if value[money] is defined before utilizing it to prevent NaN outcomes.

Answer 2

Approach 1 - simply convert to any type:

function calculateTotal(value: MoneyType) {
    let total = 0;
    for (let money in value) {
        total += (CONVERSION_RATE as any)[money] * (value as any)[money];
    }
    return total;
}

Approach 2 - expands the interface using a key/value format:

interface OnlyNumbers {[key: string]: number}

interface MoneyType extends OnlyNumbers {
    yuan: number,
    dollar: number,
    pound: number,
}

Additionally, consider these recommendations for your function:

iterate through CONVERSION_RATE members since the value passed may have additional members.
validate if value[money] is defined before utilizing it to prevent NaN outcomes.

Is there a way to iterate over an object with predetermined keys and then utilize those keys to access another object of the same type?

Answer №1

Similar questions

What is the process of changing a number to the double data type in JavaScript or TypeScript?

Encountering the error "No overload matches this call" while utilizing useQuery in TypeScript may indicate a mismatch in function parameters

React-leaflet with TypeScript is failing to display GeoJSON Points on the map

Obtain the ViewContainerRef object from the Component

Accessing base class properties in Typescript: A comprehensive guide

Only implement valueChanges on the second step of the form

Using the parameter of type 'never' is necessary as per the TypeScript error message, which states that the argument of type 'string' cannot be assigned to it. This error persists even when

Angular HttpClient request fails to initiate

Generate a new data structure by pairing keys with corresponding values from an existing

Error message thrown when attempting to access Navigator InjectionToken in tests: ReferenceError - Navigator is not defined

TS7030: In Angular13, ensure that all code paths within the guard and canActivate methods return a value

The Vue application is refusing to compile due to a syntax error caused by the presence of 'return' outside of a function

Discovering various kinds of data with a single generic type

Implementing an interface in TypeScript and assigning it a value using generics?

Explicit final argument in TypeScript

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

The Value Entered in Angular is Unsaved

Deleting a key from a type in TypeScript using subtraction type

Navigate to the parent element in the DOM