Namespace component in React. How to use type checking

code:

const CustomCapsule = (props:CustomCapsuleTypes) =>{ 
        return( 
               <div direction={props.direction}>       
                   {props.children}
               </div> 
  )
}

CustomCapsule.Tab = ({title,active,onClick,tempKey}:TabItemProps) =>{
         return(<div>test</div>)
} 
    
 CustomCapsule.propTypes = {};   //   √

CustomCapsule.Tab.propTypes = {} //  ×.

error:

Property 'propTypes' does not exist on type '({ title, active, onClick, tempKey }: TabItemProps) => Element'.

CodePudding user response：

There are multiple ways to solve this:

You can set prop types first, and assign subcomponent later

const CustomCapsule = (props:CustomCapsuleTypes) => {}

const Tab = ({title,active,onClick,tempKey}:TabItemProps) => {} 
    
CustomCapsule.propTypes = {}

Tab.propTypes = {}

CustomCapsule.Tab = Tab;

or use Object.assign:

const CustomCapsule = (props:CustomCapsuleTypes) => {}

CustomCapsule.Tab = Object.assign(
  ({title,active,onClick,tempKey}:TabItemProps) => {},
  { propTypes: {} }
)
    
CustomCapsule.propTypes = {}