TypeScript : Une interface ne peut pas simultanément étendre deux types

Question

Je suis en train d'écrire une application React en utilisant TypeScript. J'utilise material-ui pour mes composants. Je suis en train d'écrire un wrapper personnalisé pour le composant Button de material-ui. Ça ressemble à ça :

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,
    OwnProps,
    ButtonProps {}

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

        {children}

    );
  }
}

export default withStyles(styles)(Button);

Le problème ici est que la définition de Props génère le message d'erreur :

Les propriétés nommées 'color' des types 'OwnProps' et 'ButtonProps' ne sont pas identiques.
[ts]
L'interface 'Props' ne peut pas étendre simultanément les types 'OwnProps' et 'ButtonProps'.
  Les propriétés nommées 'size' des types 'OwnProps' et 'ButtonProps' ne sont pas identiques.
Les propriétés nommées 'color' des types 'OwnProps' et 'ButtonProps' ne sont pas identiques.
[ts]
L'interface 'Props' ne peut pas étendre simultanément les types 'OwnProps' et 'ButtonProps'.
  Les propriétés nommées 'size' des types 'OwnProps' et 'ButtonProps' ne sont pas identiques.

Cette erreur disparaît si j'écris plutôt :

export class Button extends PureComponent {

Mais ensuite, lorsque j'utilise le Button, les props color et size génèrent l'erreur :

Le type attendu provient de la propriété 'color' qui est déclarée ici sur le type 'IntrinsicAttributes & Pick

``

Comment puis-je indiquer correctement au composant qu'il a les Props que j'ai définies (OwnProps) ainsi que les props qui proviennent du Button comme d'habitude ?

``

Answer 1

import { ButtonProps } from "@material-ui/core/Button";

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

class MyButton extends React.Component {

}