I have a typing problem –
inside my app I have value that I need to pass to the provider,
the only place that knows the type is the app function,
the problem is – I need the child to know the value type.
import React, {createContext, useContext, ReactNode} from 'react';
export interface AppDependencies<T, U> {
somethingWithType: T;
somethingWithOtherType: U;
}
const Context = createContext<AppDependencies<any, any>>(undefined);
interface AppDependenciesProviderProps<T, U> {
value: AppDependencies<T, U>;
children: ReactNode;
}
export const AppDependenciesProvider = <T, U>({
value,
children,
}: AppDependenciesProviderProps<T, U>) => {
return <Context.Provider value={value}>{children}</Context.Provider>;
};
export const useAppDependencies = <T, U>() => {
const context = useContext(Context);
return context as AppDependencies<T, U>; /
};
and inside of my app function:
const appDependencies: AppDependencies<typeof somethingWithType, typeof somethingWithOtherType> = {
somethingWithOtherType,
somethingWithType
};
render(
<AppDependenciesProvider value={appDependencies}>
<Main />
</AppDependenciesProvider>,
rootEl
);
but still the child don’t know the type of the values
I get this error:
Property 'something' does not exist on type 'unknown'.
any suggestions?