React + Material-UI + Typescript: наследовать реквизиты от кнопки, чтобы добавлять разные варианты

Question

Я хотел бы расширить стандартную кнопку Material-UI, чтобы добавить больше вариантов, таких как «квадрат».

Как определить интерфейс prop для наследования / объединения реквизитов.

Вот мой код:

import React from "react";
import { Button as MuiButton } from "@material-ui/core";
import { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";

interface ButtonProps extends MuiButtonProps {
  variant?: "square";
}

const defaultProps = {};

const Button: React.FC<ButtonProps> = ({variant, children, ...props}) => {
  return (
    <MuiButton variant={variant} {...props}>
       {props.children}
    </MuiButton>;
  )
};

Button.defaultProps = defaultProps;

export default Button;

В идеале я хотел бы использовать этот компонент примерно так:

<ExtendedButton href="/" variant="square">Click Me!</ExtendedButton>

Answer 1

TYpeScript не позволяет переопределить свойство при расширении интерфейсов. Поэтому вы должны сначала исключить свойство из MuiButtonProps, а затем переопределить его в ButtonProps.

import React from "react";
import { Button as MuiButton } from "@material-ui/core";
import { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";

interface ButtonProps extends Pick<MuiButtonProps, Exclude<keyof MuiButtonProps, "variant">> {  
    variant?: "square" | MuiButtonProps["variant"];
}

Исключение свойств с Pick и Exclude предназначено для TypeScript 3.5 и ниже до 2.8. Вы можете увидеть другие опции для исключения свойств в зависимости от используемой версии TypeScript.

И если вы хотите расширить текущий тип существующего свойства variant, вы можете использовать оператор доступа к индексу, чтобы получить тип исходного свойства variant, чтобы объединить его с дополнительным типом "square".