javascript - Typescript-动态扩展接口(interface)

我正在尝试使用以下道具输入现有的React Native模块：

useComponent1: boolean
useComponent2: boolean

通过以下实现

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

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

我有组件1和2的接口，但是我不能同时扩展两者，因为道具是由使用哪个组件决定的。

是否可以动态扩展接口？

如果不是，是否有其他解决方案？

最佳答案

可以有交集/联合类型：

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

道具类型可以另外声明：

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}/>
    }
  }
}

关于javascript - Typescript-动态扩展接口(interface)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55254989/