TypeScript: интерфейс не может одновременно расширять два типа - PullRequest
Новая
       39

TypeScript: интерфейс не может одновременно расширять два типа

0 голосов
/ 03 ноября 2018

Я пишу приложение React с использованием TypeScript. Я использую материал-интерфейс для своих компонентов. Я пишу пользовательскую оболочку для компонента Button-ui. Это выглядит так: 

import MUIButton, { ButtonProps } from "@material-ui/core/Button";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import classNames from "classnames";
import React, { PureComponent } from "react";
import styles from "./styles";

export interface OwnProps {
  color: "primary" | "danger" | "warning" | "transparent";
  size: "sm" | "lg";
}

export interface Props
  extends WithStyles<typeof styles>,
    OwnProps,
    ButtonProps {}

export class Button extends PureComponent<Props> {
  render() {
    const { color, size, classes, children, ...rest } = this.props;
    const btnClasses = classNames({
      [classes.button]: true,
      [classes[size]]: size,
      [classes[color]]: color
    });
    return (
      <MUIButton {...rest} className={btnClasses}>
        {children}
      </MUIButton>
    );
  }
}

export default withStyles(styles)(Button);

Проблема в том, что здесь определение реквизита выдает сообщение об ошибке: 

Named property 'color' of types 'OwnProps' and 'ButtonProps' are not identical.
[ts]
Interface 'Props' cannot simultaneously extend types 'OwnProps' and 'ButtonProps'.
  Named property 'size' of types 'OwnProps' and 'ButtonProps' are not identical.
Named property 'color' of types 'OwnProps' and 'ButtonProps' are not identical.
[ts]
Interface 'Props' cannot simultaneously extend types 'OwnProps' and 'ButtonProps'.
  Named property 'size' of types 'OwnProps' and 'ButtonProps' are not identical.

Эта ошибка исчезнет, ​​если я вместо этого напишу: 

export class Button extends PureComponent<Props & ButtonProps> {

Но тогда при использовании кнопки цвет и размер реквизита выдает ошибку: 

The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & Pick<Props & ButtonProps, ...

Как я могу правильно сказать компоненту, что он имеет определенные мной реквизиты (OwnProps), а также реквизиты, которые поступают с кнопки, как обычно?

1 Ответ

0 голосов
/ 04 ноября 2018 
import { ButtonProps } from "@material-ui/core/Button";

export type OwnProps = Omit<ButtonProps, "color" | "size"> & {
  color: "primary" | "danger" | "warning" | "transparent";
  size: "sm" | "lg";
}

class MyButton extends React.Component<OwnProps> {


}
...