React + Material-UI + Typescript：从按钮继承道具以添加不同的变体

Question

我想扩展默认的 Material-UI 按钮以添加更多变体，例如“方形”。

如何定义prop接口来继承/组合props。

这是我的代码：

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。您可能会看到 another options 根据您使用的 TypeScript 版本排除属性。

如果您希望扩展现有属性variant 的当前类型，您可以使用索引访问运算符获取原始variant 属性的类型，以将其与其他"square" 类型联合。