Ошибка машинописного текста при использовании ref.current из компонента, который пересылает ref в компонент RN - PullRequest
Новая
       5

Ошибка машинописного текста при использовании ref.current из компонента, который пересылает ref в компонент RN

0 голосов
/ 24 апреля 2020

Новый пользователь TypeScript. Я конвертирую проект RN в TypeScript. Использование крючков вокруг. Я определил компонент BitInput (который пересылает ссылку на TextInput) следующим образом: 

export interface Props {
  value: number;
  onChange?: (newValue: number) => void;
}

const BitInput: React.FC<Props> = forwardRef(
  ({ value, onChange }, ref: React.Ref<TextInput>) => {
    return (
      <TextInput
        ref={ref}
        onChange={onChange}
      />
    );
};

Я использую этот компонент для создания компонента ByteInput следующим образом: 

import BitInput from './BitInput';

const BinaryInput: React.FC<Props> = ({ value, onChange }) => {
  const ref: React.MutableRefObject<typeof BitInput | undefined>[] = [...Array(8)].map(() => useRef<typeof BitInput>() );

  const handleKeyPress = (event) => {
    switch (event.key) {
      case 'ArrowRight':
        for (let i = 0; i < ref.length; i++) {
          if (ref[i].current?.isFocused() && i < ref.length - 1) {
            ref[i + 1].current.focus();
            break;
          }
        }
        break;
    }
  };

  render() {
    return (
      <View>
        <BitInput
          ref={ref[refIndex++]}
          onKeyPress={handleKeyPress}
          />
      </View>
      ..... 7 more BitInputs here .....
    );
  }

Я получаю TS2339: Property 'isFocused' does not exist on type 'FC '.

Я также получаю: 

 TS2322: Type 'MutableRefObject<FC<Props>>' is not assignable to type 'Ref<TextInput>'.
   Type 'MutableRefObject<FC<Props>>' is not assignable to type 'RefObject<TextInput>'.
     Types of property 'current' are incompatible.
       Type 'FunctionComponent<Props>' is missing the following properties from type 'TextInput': isFocused, clear, measure, measureInWindow, and 19 more.
  BitInput.tsx(11, 3): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

Я могу исправить оба, используя BitInput вместо typeof BitInput в декларации ref. Но теперь я получаю TS2749: 'BitInput' refers to a value, but is being used as a type here на нем, а на JSX для BitCode я получил ошибку TS, из-за которой пропало много необходимых реквизитов.

Я предполагаю, что не определяю экспорт интерфейс правильно, но как правильно?

...