Как передать свойство варианта TextField с пользовательским интерфейсом из компонента React для переноса

Question

У меня проблемы с печатанием ...

В основном у меня есть обертывающий компонент React для @ material-ui TextField, но я не могу правильно набрать тип для свойства варианта.

Вот суть вопроса.@ 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"'.

Я могу сжать это далее только дотипы поддержки:

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;

Обновление

Как указывает Дэниел, это 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

У меня точно такая же проблема.

Причина ошибки в том, что они определили

TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps

OutlinesTextFieldProps необходимо значение 'обведено' для варианта FilledTextFieldProps необходимо значение «заполнено» для варианта

и т.д.

Проблема в том, что значение варианта не известно во время компиляции. В вашем коде это переменная, поэтому ее тип 'filled' | 'outlined'. Этот тип несовместим с любым из трех определений типов, для каждого из которых требуется одно из «обведенных», «заполненных» или «стандартных»

Помимо трюка as any, единственная другая опция, о которой я могу подумать, - это создание текстовых файлов со статическими значениями для варианта, но это большая дополнительная работа. Что-то вроде:

{ this.props.variant === 'outlined' && (
  <MuiTextField
    variant="outlined"
   />
)}
{ this.props.variant === 'filled' && (
  <MuiTextField
    variant="filled"
   />
)}

изменить - 03/06/2019

Была обнаружена ошибка в github material-ui, и было опубликовано другое возможное решение

https://github.com/mui-org/material-ui/issues/15697#issuecomment-493419773

Answer 2

Возможно, это неправильный подход, но для его решения на данный момент вы можете привести его к any.

variant={this.props.variant as any}

У меня та же проблема, что и сейчас, и я не смог найти способ ее решения машинописным способом.