Typescript 基于同级字符串字段的 Object 键的动态类型

Question

i am trying to create a dynamic type based on parts of a sibling 'string type:

example

function getDynamicRoutes(href: string) {
  return (
    href
      .match(/:([A-z]*)/gm)
      .map(s => s.replace(':', ''))
      .reduce((a, c) => ({ ...a, [c]: true }), {})
  )
} 

interface Props {
  // foo/:bar/helloworld/:bat
  href: string;
  
  // { bar: 'string', bat: 'string' }
  substitutes: {
    [k: keyof getDynamicRoutes(Props['href'])]: string;
  }
}

expected behaviour When i provide the above href i should get auto-typing for the substitutes Object based on the colon-prepended routes in the href.

So: 'foo/:bar/helloworld/:bat' Will generate a type interface for substitutes as: { bar: 'string', bat: 'string' }

Is this possible?

Answer 1

You are not allowed to call getDynamicRoutes inside interface definition. Furthermore, it is either disallowed to pass Props['href'] type alias as a function argument. In general you can't use types where values are expected. If you want to map query string to interface you can do this:

const handle = <Query extends string>(str: Query): ToType<Query> => {
    // implementation is up to You :)
    return null as any
}

type ToType<T extends string, Cache extends Record<string, string> = {}> =
    T extends `${string}/:${infer Prop}/${infer Rest}`
    ? ToType<Rest, Cache & Record<Prop, string>>
    : T extends `${string}/:${infer Last}`
    ? Cache & Record<Last, string>
    : never


// Record<"bar", string> & Record<"bat", string>
const result = handle('foo/:bar/helloworld/:bat')

Playground