Typescript - Dynamically extend interface

Question

I am trying to type an existing React Native module with the following props:

useComponent1: boolean
useComponent2: boolean

With the following implementation

render(){
    if(useComponent1){
        return <Component1 {...props}/>
    }

    if(useComponent2){
        return <Component2 {...props}/>
    }
}

I have an interface for components 1 & 2, however, I can't extend both as the props are determined by which component is utilised.

Is it possible to dynamically extends an interface?

If not, is there another solution to this issue?

Estus Flask · Accepted Answer · 2019-03-20 08:54:23Z

3

There can be intersection/union type:

interface Component1Props { .... }
interface Component2Props { .... }
interface WrapperOwnProps {
  useComponent1: boolean
  useComponent2: boolean
}
type WrapperProps = WrapperOwnProps & (Component1Props | Component2Props);

Props type can be additionally asserted:

class Wrapper extends Component<WrapperProps> {
  render(){
    const { useComponent1, useComponent2, ...props } = this.props;
    if(useComponent1){
      return <Component1 {...props as Component1Props}/>
    }

    if(useComponent2){
      return <Component2 {...props as Component2Props}/>
    }
  }
}

edited Mar 20, 2019 at 8:54

answered Mar 20, 2019 at 8:39

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript - Dynamically extend interface

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related