1

Есть компонент PrimitiveTypeEditor, в который передаётся value типа EditorValue. Из него это value передаётся в компоненты TextBox, NumberInput и CheckBox.

В TextBox должен передаваться string, в NumberInput – number, в CheckBox – boolean.

В PropTypes есть метод oneOfType, а как реализовывать без него в TypeScript?

Вопрос — как реализовать интерфейс EditorValue, чтобы value могло быть нужным типом для компонентов

Ошибка: Ошибка в CheckBox.tsx

Тип EditorValue

export type EditorValue = string | number | boolean;

Файл PrimitiveTypeEditor.tsx

class PrimitiveTypeEditor extends DojoReactComponent {
   render(): ReactElement {
      const { dataType, title, value }: PrimitiveTypeEditorState = this.state;

      /** Слушатель изменения значения редактора */
      const onChangeHandler = (newValue: EditorValue) => {
         this.setState({ value: newValue });
      };

      return (
         <div>
            {(() => {
               switch (dataType) {
                  case 'STRING':
                  case 'GUID':
                     return <TextBox
                        {...this.state}
                        title={title}
                        onChange={onChangeHandler} value={value}/>;
                  case 'INTEGER':
                  case 'DOUBLE':
                     return <NumberInput
                        {...this.state}
                        title={title}
                        onChange={onChangeHandler} value={value} type={dataType}/>;
                  case 'BOOLEAN':
                     return <CheckBox
                        {...this.state}
                        title={title}
                        onChange={onChangeHandler} value={value}/>;
                  case 'DATE':
                     return <DatePicker
                        {...this.state}
                        title={title}
                        onChange={onChangeHandler} value={value}/>;
                  default:
                     throw new Error('Использован несуществующий тип данных для PrimitiveTypeEditor');
               }
            })()}
         </div>
      );
   }
}

interface PrimitiveTypeEditorState {
   dataType?: EditorType,
   title?: string,
   value?: EditorValue
}

Файл CheckBox.tsx

const CheckBox: FunctionComponent<Props> = ({ title, onChange, ...props }: Props) => {
   const [{ value = false, disabled = false, showLabel = true }, setProps] = useState(props);

   /** Callback-функция изменения значения */
   const onChangeHandler = (_:SyntheticEvent<HTMLElement>, { checked: newValue }: CheckboxProps) => onChange(newValue);

   /** Слушатели изменения необязательных свойств */
   useEffect(() => setProps(props),
      [props.value, props.disabled, props.showLabel]);

   return (
      <div className={'checkbox-input'}>
         <Checkbox
            onChange={onChangeHandler} checked={value}
            disabled={disabled}/>
         {showLabel && <div className={'input-title'}>{title}</div>}
      </div>
   );
};

interface Props {
   title: string,
   onChange: (value: EditorValue) => void,
   value?: EditorValue,
   placeholder?: string,
   disabled?: boolean,
   showLabel?: boolean,
}

1 ответ 1

2

Есть набросок решения на голом TypeScript. Увязал тип и значение в одной структуре, что позволяет их анализировать в паре (Discriminating Unions). Благодаря этому число приходит туда где ожидается число, а boolean туда где ожидается boolean.

Ссылка на песочницу.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.