Typescript - typesafe mapping of a key to both types and value

Question

My goal is to have a function that takes a key and an object with query parameters and the function can look up a URL, interpolate with the query params and navigate to that. What I got so far is this

  interface FooIdParams {
    fooId: number;
  }

  interface QueryParams<P = never> {
    params: P;
  }

  enum Urls {
    'foo-editor' = '/editfoo?fooId=${fooId}'
  }

  interface ParamTypes {
    'foo-editor': QueryParams<FooIdParams>
  }

and the load method in my class looks like this:

  load = <T extends keyof ParamTypes>(target: T, params: ParamTypes[T]["params"]):void => {
    const url = eval('`' + Urls[target] + '`')
    
    // alternative with replace like suggested in a comment
    // this also works with multiple query params
    const url2 = Urls[target].replaceAll(/\$\{(.*?)\}/g, (_: string, k: string) => (params as any)[k])

    // and some code to open that page
  }

This already works and ensures that the called provides correct query params (later I have dozens of URL targets and the load method is called from many places, so it's worth the effort)

The part that I can't solve: I use the key foo-editor in two different places, the enum where it maps to the 'url' and in the interface, where it maps to the type. And I'd like to guarantee, that both enum and interface have exactly the same keys (like - typescript should force to mappings in both and prevent typos).

Is there a way to ensure that?

Instead of eval I'd really use .replace(/\$\{(.*)\}/g, k => params[k]); — Jonas Wilms
– Jonas Wilms, Commented Mar 3, 2021 at 9:48
I try - but it's not that easy, because I now have to find the correct type for k - typescript complains. — Andreas Dolk
– Andreas Dolk, Commented Mar 3, 2021 at 10:12
probably one of the cases were any simplifies things (playground) — Jonas Wilms
– Jonas Wilms, Commented Mar 3, 2021 at 10:14
Yes, acceptable here - I have type safety already on the method, so params is guaranteed to be of the correct type and will have all required keys. Thanks! — Andreas Dolk
– Andreas Dolk, Commented Mar 3, 2021 at 10:18
@JonasWilms - I've switched to your suggestion but your solution had two bugs: first, k in your code is the full match - second one is the captured value that we want. And then, it only works with one param, because the regexp is greedy by default. I edit my question and put the working alternative in it. Thanks for at least pointing me into that direction! — Andreas Dolk
– Andreas Dolk, Commented Mar 3, 2021 at 12:02

Jonas Wilms · Accepted Answer · 2021-03-03 09:52:20Z

3

You could replace the enum with a mapped type:

 const Urls: { [K in keyof ParamTypes]: string } = {
   /*...*/
 };

edited Mar 3, 2021 at 9:52

answered Mar 3, 2021 at 9:47

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

6 Comments

captain-yossarian from Ukraine Over a year ago

Small improvement: typescriptlang.org/play?ts=4.2.2#code/…

Andreas Dolk Over a year ago

Many thanks! the in keyof was my missing piece. It works like a charm now.

Jonas Wilms Over a year ago

@captain As far as I can see the ParamType is different for each request, so that type needs to be the one defining the keys.

captain-yossarian from Ukraine Over a year ago

@JonasWilms my point was mostly about using immutable objects instead of enum. I did not go deepr into question

Andreas Dolk Over a year ago

@captain-yossarian - I saw that addition and added the as const to my real code. Very valuable! Thanks, I didn't know that this is possible

|

Collectives™ on Stack Overflow

Typescript - typesafe mapping of a key to both types and value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related