Машинопись: как ввести реквизит в компонент-оболочку, реализующий формик

Что у меня есть

Я хочу создать многоразовый компонент ввода, используя Муравей и Typescript, чтобы избежать повторения некоторых свойств:

import React from 'react';
import { useFormikContext } from 'formik';

import { Input as UIKInput } from '@ui-kitten/components';
import { InputProps } from '@ui-kitten/components/ui/input/input.component';

type Props = {
  name: string,
} & InputProps;

export default function Input(props: Props): JSX.Element {
  const { name, ...otherProps } = props;
  const { setFieldTouched, handleChange, errors, touched } = useFormikContext();

  return (
    <>
      <UIKInput
        status={errors[name] && touched[name] ? 'danger' : 'basic'}
        caption={errors[name] && touched[name] ? errors[name] : ''}
        onBlur={() => setFieldTouched(name)}
        onChangeText={handleChange(name)}
        {...otherProps}
      />
    </>
  );
}

Но у меня проблемы с errors[name] и touched[name] типы. TS выдал следующие ошибки:

  • 1. errors[name]:
    TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormikErrors<unknown>'. No index signature with a parameter of type 'string' was found on type 'FormikErrors<unknown>'.
  • 2. touched[name]:
    TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormikTouched<unknown>'. No index signature with a parameter of type 'string' was found on type 'FormikTouched<unknown>'.

Эта проблема

В Формике / Машинописи документация не показывает, как справиться с такой ситуацией. Я пытаюсь использовать index type для name собственности, но без положительного результата:

type Name = {
  [filed: string]: string;
};

type Props = {
  name: Name,
} & InputProps;
```

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *