如何从包装 React 组件传入material-ui TextField 的变体属性

Question

我有打字问题...

基本上我有一个用于 @material-ui TextField 的包装 React 组件，但我无法获得变体属性的正确类型。

这是问题的要点。@material-ui/core 3.9.3

import MuiTextField, {TextFieldProps} from "@material-ui/core/TextField";

interface MyTextFieldProps {
...
  variant?: TextFieldProps["variant"];
}

class MyTextField extends React.Component<MyTextFieldProps> {
...
  render() {

    return
    ...other stuff
      <MuiTextField
      variant={this.props.variant} />
    ...;
  }
}

对于 MuiTextField 实例，我收到以下编译错误：...

Types of property 'variant' are incompatible.
        Type '"outlined" | "filled"' is not assignable to type '"outlined"'.
          Type '"filled"' is not assignable to type '"outlined"'.

我可以将其进一步压缩为 prop 类型：

xx() {
    const variant: TextFieldProps["variant"] = this.props.variant;
    const props : TextFieldProps = {
      variant,
    };
}

并得到相同的错误，即变体值（输入为变体属性的确切类型）与其自身的类型不兼容。

这里发生了什么？

TextField.d.ts 中的定义如下所示：

export interface StandardTextFieldProps extends BaseTextFieldProps {
  variant?: 'standard';
  InputProps?: Partial<StandardInputProps>;
  inputProps?: StandardInputProps['inputProps'];
}

export interface FilledTextFieldProps extends BaseTextFieldProps {
  variant: 'filled';
  InputProps?: Partial<FilledInputProps>;
  inputProps?: FilledInputProps['inputProps'];
}

export interface OutlinedTextFieldProps extends BaseTextFieldProps {
  variant: 'outlined';
  InputProps?: Partial<OutlinedInputProps>;
  inputProps?: OutlinedInputProps['inputProps'];
}

export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;

更新

正如 Daniel 指出的，这是 Typescript 不知道如何处理联合类型。

您可以使用这样的辅助函数来解决这个问题（丑陋）

import { TextFieldProps, BaseTextFieldProps } from "@material-ui/core/TextField";

const getProps = (
  baseProps: BaseTextFieldProps,
  variant: TextFieldProps["variant"]
): TextFieldProps => {
  switch (variant) {
    case "filled":
      return { ...baseProps, variant };
    case "outlined":
      return { ...baseProps, variant };
    default:
      return { ...baseProps, variant };
  }
};

然后将其用作<TextField ...getProps({value:"text"}, variant) />但它很难看。

我什至冒险将其归类为打字稿问题，因为它应该能够弄清楚不同变体特有的所有道具都是可选的。

Answer 1

这可能不是正确的方法，但要暂时解决它，您可以将其转换为any.

variant={this.props.variant as any}

我现在遇到了同样的问题，找不到以打字稿方式解决它的方法。