有没有办法在使用之前将类型传递给通用组件？

Question

export const ComponentsOverrideContextProvider= <M extends Record<any, any>>({children, components}: {children: React.ReactNode, components: M}) => {
return <ComponentOverrideContext.Provider value={{ ...components }}>{children}</ComponentOverrideContext.Provider>;} 

i have a component above which is generic and it should not be tight to a specific implementation, or order to avoid it i am doing something like

// concrete implementation

export const ConcreteProvider = ComponentsOverrideContextProvider;

and I need to somehow pass type to ComponentsOverrideContextProvider before end user uses it. Is there any way?

user should not be doing like this <ConcreteProvider<Type>></ConcreateProvider> it should be typed before he calls this component

Answer 1

Simply specify the concrete type when doing your concrete implementation:

export const ConcreteProvider =
    ComponentsOverrideContextProvider<
        // Pass the concrete type
        Record<string, number>
    >;

() => (
    <ConcreteProvider components={{
        foo: 0,
        bar: "hello" // Error: Type 'string' is not assignable to type 'number'.
    //  ~~~
    }}>
        Some children
    </ConcreteProvider>
)

Playground Link