Typescript how to create a nested interface objects using mapped types?

Question

I want to have data that would be as follow

paymentProviderByCountry = {
    England: worldPay,
    Spain: worldPay
}

How do I create the interface for paymentProviderByCountryObj that integrates paymentProvidersList and countryList in my desired dynamic format.

I guess what I am looking for is how do I create recursively the obj

    enum paymentProvidersList {
    WorldPay,
    Paypal,
}
enum countryListEnum {
    England,
    France,
    Spain,
}

type T0 = { [key in paymentProvidersList]: string }; // This would work

/*
  I want the values on paymentProviderByCountryObj to be dynamic based on the
   enum values so that i can have an object that looks like this

  paymentProviderByCountry = {
    England: WorldPay,
    Spain: Paypal,
    France: WorldPay
}
*/
interface paymentProviderByCountryObj {
    // This is the complex case, i cant get the index of the class to be dynamic and also its value
    [key in countryListEnum] :string : { [key in paymentProvidersList]: string }; 
}

export interface sysConfigInterface {
    paymentProviders: paymentProvidersList,
    paymentProviderByCountry: paymentProviderByCountryObj,
    minPaymentThreshold: String,
}

The Example Link

Madara's Ghost · Accepted Answer · 2018-09-03 14:39:59Z

1

You're looking for in (introduced in TypeScript 2.1 as part of Mapped Types)

{ [key in countryList]: paymentProvidersList }

Or, in case you don't want to have to pass every country:

{ [key in countryList]?: paymentProvidersList }

edited Sep 3, 2018 at 14:39

answered Sep 3, 2018 at 14:34

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jonathan Thurft Over a year ago

Thank you for that. can you show me a workable example that would join the results aka paymentProviderByCountry : { countryList : paymentProvidersList, countryList : paymentProvidersList}

Madara's Ghost Over a year ago

Literally put that directly after the interface Whatever and you're good to go.

Jonathan Thurft Over a year ago

"TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'." so i cant just put it there as they are enum

Madara's Ghost Over a year ago

Apparently, it's only valid in literal types, and not directly under interfaces. See typescriptlang.org/play/…. I learned something new today :D

Jonathan Thurft Over a year ago

Thank you for that but that assumes that the T2 knows key is set, whereas i want that value to be dynamic check the link at the end of my question as is too long to post here

|

Jonathan Thurft · Accepted Answer · 2018-09-05 09:00:38Z

0

This is what ultimately worked for my end goal

enum paymentProvidersList {
        WorldPay,
        Paypal,
    }
    enum countryListEnum {
        England,
        France,
        Spain,
    }

    // Or Record<countryListEnum, paymentProvidersList>
    type paymentProviderByCountryObj = { [k in countryListEnum]: paymentProvidersList } 

    const paymentProviderByCountry: paymentProviderByCountryObj = {
        [countryListEnum.England]: paymentProvidersList.WorldPay,
        [countryListEnum.France]: paymentProvidersList.WorldPay,
        [countryListEnum.Spain]: paymentProvidersList.Paypal
    }

answered Sep 5, 2018 at 9:00

Jonathan Thurft

4,1718 gold badges50 silver badges79 bronze badges

Collectives™ on Stack Overflow

Typescript how to create a nested interface objects using mapped types?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related