I am looking for a way to have a function take two arguments - a react functional component, and the correct prop for that component. The catch is that any component can be passed in and therefore any component could have its own interface. My goal is that the second argument is type aware based on the first arg.
What I have so far.
interface ComponentAProps { hello: string }
interface ComponentBProps { world: string }
interface someFunction{ (component: React.FC<any>, props: ???) => void }
// Two components as an example.
const ComponentA = ({ hello }: ComponentAProps) => return <p>hello</p>
const ComponentB = ({ world }: ComponentAProps) => return <p>world</p>
// This function takes in the component, and an object representing the props
const someFunction: someFunction = (ComponentA, { hello: 'hello' }) => void
const someFunction: someFunction = (ComponentB, { world: 'world' }) => void
// This should give a type error
const someFunction: someFunction = (ComponentB, { hello: 'hello' }) => console.log(props)
I believe I could do something like
props: <ComponentAProps | ComponentBProps>
but the issue is there could be a Component C,D,E...Z components.
Essentially this function should validate that the 2nd argument passed in are the props of whatever component is in arg 1
To solve the core issue of making the second arg validate the props of the component we can use typescript Genrics
Instead of Validating the props based on the component passed in, we can validate the props by telling the function what props to expect. How it would implement in the OP code
interface ComponentAProps { hello: string }
interface ComponentBProps { world: string }
// This says says that a type can be passed through to the second arg
function someFunction<Type>(component: React.FC<any>, props: Type) {
return void
}
// Two components as an example.
const ComponentA = ({ hello }: ComponentAProps) => return <p>hello</p>
const ComponentB = ({ world }: ComponentAProps) => return <p>world</p>
// These will not produce type Error
someFunction<ComponentAProps>(ComponentA, { hello: 'hello' })
someFunction<ComponentBProps>(ComponentB, { world: 'world' })
// This will give a type error because we are telling the function
// that the 2 arg needs to be of type ComponentBProps
someFunction<ComponentBProps>(ComponentA, { hello: 'hello' })