Tengo problemas para escribir algo como el siguiente objeto.

El valor de fn para image y line es la definición de tipo por brevedad en lugar de incluir una función real. Entiendo que en JS estas serían funciones con ese tipo.

 const obj = { image: { fn: (config: ImageConfig) => ImageProps, Component: (props: ImageProps) => ImageElement }, line: { fn: (config: ImageConfig) => LineProps, Component: (props: LineProps) => LineElement }, // ... }

¿Cómo haría para escribir esto en TS? Quiero tratar las claves de nivel superior ( image y line ) como arbitrarias (estas claves pueden tener cualquier valor). Pero quiero que sus valores siempre contengan una clave de fn y una clave de Component con una relación entre los argumentos y el valor devuelto para fn y Component . Es decir, que los dos componen juntos.

Tengo el siguiente tipo que es fácil de entender con lo anterior:

 type Element<Props, Config> = { fn: (x: Config) => Props; Component: (props: Props) => JSX.Element };

Pero no puedo crear un tipo que use Element para permitir distintos genéricos para cada entrada en el objeto.

no puedo hacer

 type MyConfig<Props, Config> = { [key: string]: Element<Props, Config> };

ya que quiero que cada instancia de Props y Config para cada entrada en el objeto sea diferente entre sí. Creando mi propia sintaxis, me gustaría algo como:

 type MyConfig = { [key: string]<Props, Config>: Element<Props, Config> };

¿Es posible expresar algo así en TS? ¿Como lo puedo hacer?