Что у меня есть
Я хочу создать многоразовый компонент ввода, используя Муравей и 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;
```
