как объявить тип в моем функциональном компоненте?

#javascript #typescript #react-native #ecmascript-6

Вопрос:

Я хотел объявить тип в своем компоненте таким образом, я уже видел, что это возможно с помощью классов, но как я мог сделать это с помощью функциональных компонентов? Без необходимости экспортировать интерфейс? Я уже много исследовал и ничего об этом не нашел.

 const Elem1 = forwardRef((props : any, ref : { open()? : void }) => {
   useImperativeHandle(ref, () => ({
       open: () => console.log('opened')
   }))

   ....
})

const Elem2 = () => {
    const elem1Ref = useRef<Elem1>()

    elem1Ref?.current?.open()

    ....
} 

Ответ №1:

Если я правильно понял, вы должны использовать параметры типа, предусмотренные определением TS Generics forwardRef . Вот так 👇

 const Elem1 = forwardRef<YourRefType, YourPropsType>((props, ref) => {
  ...
}

 

Комментарии:

1. Я уже пытался использовать этот синтаксис, но VS-код выдает эту ошибку в useRef: ‘Elem1’ относится к значению, но используется здесь как тип. Вы имели в виду «тип элемента 1»?

Ответ №2:

Я провел исследование, и из того, что они сказали, невозможно объявить тип функционального компонента, просто экспортировав отдельный интерфейс компонента, в любом случае спасибо!