如何定义文字 object 以使用 generics 存储不同的属性

Question

I want to store some react components in a literal object. And these components' props are different.

interface ComponentMap<P = any> {
  [key: string]: React.JSXElementConstructor<P>
}

const cMap: ComponentMap = {}

interface AProps {
  str: string
}

interface BProps {
  n: number
}

cMap['a'] = (props: AProps) => { /* code */ }
cMap['b'] = (props: BProps) => { /* code */ }
// there may be c, d, e and other components assigned into cMap

Currently I use <P = any> to avoid type errors. But when I get a component from cMap , its props type is also any .

const CompA = cMap['a']
const CompB = cMap['b']

<CompA /> 
<CompB />
// no type errors 

Is there any way to keep the props' type of CompA/B ? How to correctly define ComponentMap ? Please help, thanks!

Answer 1

When you have a situation where you want to enforce that a variable extends a particular type without widening the type of that variable, then you need to create the variable through a function.

type BaseMap = Record<string, ComponentType<any>;

const createComponentMap = <M extends BaseMap>(map: M): M => map;

const cMap = createComponentMap({
  a: (props: AProps) => { /* code */ return null; },
  b: (props: BProps) => { /* code */ return null; }
})

const ComponentA = cMap.a;

<ComponentA str="a"/> // ok
<ComponentA/> // error: Property 'str' is missing in type '{}' but required in type 'AProps'

---

more unknown components will be assigned into cMap dynamically

This part makes it more interesting. You could create something fancy here where the map had methods to add new objects. The simple solution is just to create a new map object whenever you add anything because you always want to change the type of the map. Here's how we can add a third component c :

const nextMap = createComponentMap({
  ...cMap,
  c: (props: CProps) => { /* code */ return null; }
});

---

Here's how it works with the chaining approach. It's easier for the add function to take an object like {c: ComponentC} than separate key and value arguments.

interface ComponentMap<M extends BaseMap> {
  map: M;
  add<T extends BaseMap>(added: T): ComponentMap<M & T>;
  get<K extends keyof M>(key: K): M[K];
}

const createComponentMap = <M extends BaseMap>(map: M): ComponentMap<M> => ({
  map,
  add<T extends BaseMap>(added: T): ComponentMap<M & T> {
    return createComponentMap({
      ...map,
      ...added
    })
  },
  get<K extends keyof M>(key: K): M[K] {
    return map[key];
  }
});

const cMap = createComponentMap({
  a: (props: AProps) => { /* code */ return null; },
  b: (props: BProps) => { /* code */ return null; }
})

const ComponentA = cMap.get('a') // or cMap.map.a;

const nextMap = cMap.add({
  c: (props: CProps) => { /* code */ return null; }
});

---

Here's how it works with the key and component as separate arguments:

interface ComponentMap<M extends BaseMap> {
  map: M;
  add<K extends string, C extends ComponentType<any>>(key: K, component: C): ComponentMap<M & Record<K, C>>;
  get<K extends keyof M>(key: K): M[K];
}

const createComponentMap = <M extends BaseMap>(map: M): ComponentMap<M> => ({
  map,
  add<K extends string, C extends ComponentType<any>>(key: K, component: C): ComponentMap<M & Record<K, C>> {
    return createComponentMap({
      ...map,
      [key]: component
    })
  },
  get<K extends keyof M>(key: K): M[K] {
    return map[key];
  }
});

const cMap = createComponentMap({})
  .add("a", (props: AProps) => { /* code */ return null; })
  .add("b", (props: BProps) => { /* code */ return null; })
  .add("c", (props: CProps) => { /* code */ return null; });