Estoy buscando una manera de hacer que una función tome dos argumentos: un componente funcional de reacción y el accesorio correcto para ese componente. El problema es que se puede pasar cualquier componente y, por lo tanto, cualquier componente podría tener su propia interfaz. Mi objetivo es que el segundo argumento sea consciente del tipo en función del primer argumento.
Lo que tengo hasta ahora.
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)Creo que podría hacer algo como
props: <ComponentAProps | ComponentBProps>pero el problema es que podría haber componentes del Componente C,D,E...Z.
Esencialmente, esta función debería validar que el segundo argumento pasado son los accesorios de cualquier componente que esté en arg 1
Para resolver el problema central de hacer que el segundo argumento valide los accesorios del componente, podemos usar TypeScript Genrics
En lugar de validar los accesorios en función del componente pasado, podemos validar los accesorios diciéndole a la función qué accesorios esperar. Cómo se implementaría en el código OP
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' })