TypeScript: how to map interface to custom data types

Question

I have the following types:

interface USER {
    email: string;
    age: number;
}

interface SCORES {
    likes: number;
    followers: number;
}

and then composite state as shown below:

interface UserStats {
    user: USER;
    stats: SCORES;
}

Now I get a payload which looks like this:

{type: 'user', values: {email:"[email protected]",age: 21}} or {type: 'stats', values: {likes:20,followers: 21}}

While destructuring the above payload, I need to assign its type such that it covers both the cases, something like:

type payloadKeyTypes = 'user' | 'stats'
type configPayload = USER | SCORES
interface payloadType {
    [payloadKeyTypes]: configPayLoad
}

But this says: A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type

How do I go for resolving it?

You should use type Record instead of interface. See here. Btw, there is no numeric type - only number — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Jan 3, 2022 at 10:45
As for using symbols and template strings as index signature in interface you can see docs and PR — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Jan 3, 2022 at 10:49
Hey Thanks, would you mind adding it as answer so that I could accept it and close this? — Shivam Sahil
– Shivam Sahil, Commented Jan 3, 2022 at 10:49

captain-yossarian from Ukraine · Accepted Answer · 2022-01-03 10:51:36Z

2

Using union type as an index signature in interface is forbidden. However, since typescript 4.4 you can use symbols and template literal strings.

In this particular case, worth using type Record because it allows you to use unions:

interface USER {
    email: string;
    age: number;
}

interface SCORES {
    likes: number;
    followers: number;
}

interface UserStats {
    user: USER;
    stats: SCORES;
}

type payloadKeyTypes = 'user' | 'stats'

type configPayload = USER | SCORES

type payloadType = Record<payloadKeyTypes, configPayload>

Playground

Also, be aware that there is a naming convention in typescript. All types/interfaces/enums should be Capitalized and CamelCased. However, it is only a convention.

answered Jan 3, 2022 at 10:51

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

TypeScript: how to map interface to custom data types

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related