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

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。您可能会看到其他选项来排除属性，具体取决于您使用的 TypeScript 版本。

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