Tengo tres interfaces diferentes que están siendo recibidas como tipos de accesorios por tres componentes diferentes, el caso es que los tres componentes son idénticos y me gustaría usar solo un componente, pero de forma dinámica, con sus valores basados en los accesorios recibidos.

 const UsersOverview: React.FC<{users: Interface[]}> = props => {...}

En React with JS, simplemente establecería accesorios y recibiría el valor como props.anything , pero con mecanografiado me gustaría saber cómo configurar la interfaz dinámicamente:

tengo algo asi:

Interfaz 1:

 export default interface Interface1{ id: number, name: string, companyId: number }

Interfaz 2:

 export default interface Interface2 { id: number, email: string, name: string, unitId: number, companyId: number }

Interfaz 3:

 export default interface Interface3 { id: number | null, name: string | null }

Mi componente secundario es así (estoy usando Interface3 , pero me gustaría configurar esto dinámicamente):

 import React from 'react' import Interface1 from '/models/Interface3' const CompanyOverview: React.FC<{company: Interface3}> = props => { let [companyName, setCompanyName] = React.useState<string | null>('') React.useEffect(() => { setCompanyName(props.company.name) }, [props.company]) return ( <div> <p>Contratante: {companyName}</p> </div> ) } export default CompanyOverview