类型在 React-Native 应用程序的 TypeScript 中缺少以下类型的属性答案

【问题标题】：Type is missing the following properties from type in TypeScript of React-Native app类型在 React-Native 应用程序的 TypeScript 中缺少以下类型的属性
【发布时间】：2020-06-04 14:34:33
【问题描述】：

我已经安装了https://github.com/react-native-community/react-native-modal 库，我需要制作一个包装器 Modal 类。首先初始化接口。它从 react-native 和 react-native-modal 库的一些接口扩展而来。这意味着我可以使用它们的所有属性：

import { ModalProps } from 'react-native';
import { ReactNativeModal, ModalProps as ModalRNProps } from 'react-native-modal';

export interface IModalProps extends Omit<ModalProps, 'onShow'>, ModalRNProps {
  showCloseButton?: boolean;
  showDoneBar?: boolean;
}

export class ModalNew extends React.Component<IModalProps> {
  public render() {
    const {
      style,
      children,
      showCloseButton,
      showDoneBar,
      animationType,
      onRequestClose,
      ...props
    } = this.props;
    return (
      <ReactNativeModal
       isVisible={this.props.isVisible}
       onModalWillHide={onRequestClose}
       animationIn={'slideInUp'}
       animationOut={'slideOutDown'}
       animationOutTiming={600}
       useNativeDriver={true}
       backdropOpacity={0.6}
       backdropColor={theme.black}
       style={style}
       {...props}>
       {children}
      </ReactNativeModal>
    );
  }
}

但是当我在其他组件中使用它之后：

import React, { Component } from 'react';
import { ModalNew } from './ModalNew';

export class FooterHiddenPanel extends Component {
  const props = this.props;

  render() {
    return (
      <ModalNew isVisible={props.isActive} onRequestClose={props.onRequestClose}>
        <Text>This is </Text>
      </ModalNew>
    );
  }
}

我得到这个错误：

这意味着我必须使用扩展接口的两个 PropsTypes 的所有属性。但我不需要所有这些。如果我从几个接口扩展我的类，我必须实现所有属性？你能告诉我如何摆脱这个错误吗？

【问题讨论】：

标签： reactjs typescript react-native class interface

【解决方案1】：

我决定这个错误与 Partial extends from react native modal props 这样的：

export interface IModalProps extends Partial<RNModalProps>, Omit<ModalProps, 'onShow'>, ThemeableProps {
  animationDuration?: number;
  showCloseButton?: boolean;
  showDoneBar?: boolean;
}

【讨论】：