Typescript - Create a function where argument validates object based on passed in component-CodePudding

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

CodePudding user response：

At runtime, there is no type information. What you can do is create some kind of schema for your objects, and then validate them against that schema. One of the most popular packages for that is ajv

CodePudding user response：

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' })