Тип «RefObject <R>» не может быть присвоен типу строка | ((instance: typeof Room_T | null) => void) | RefObject | null | undefined '

Question

Когда я экспортирую компонент «Комната» с помощью connect, в компоненте «Приложение» ссылка на параметр «Комната» не работает нормально. Если коннект убрать, то работает нормально. Ниже приведена часть демонстрации основного кода. ``

App.tsx

.....
class App extends React.Component<I_PROPS, I_STATE>{
  private refRoom: React.RefObject<Room_T>;
  constructor(props:any){
     super(props);
     this.refRoom = createRef();
  }
  render() {
    return (
      <Provider store={STORE}>
          <Room ref={this.refRoom} />
       </Provider>
    )
  }
}
export default App;

``

<Room ref={this.refRoom} />

Ошибка: введите 'RefObject 'не присваивается типу' строка | ((instance: typeof Room_T | null) => void) | RefObject | null | undefined '. Введите RefObject 'не может быть присвоено типу' RefObject '. «Текущие» типы собственности несовместимы. Введите 'Room_T | null 'не присваивается типу' typeof Room_T | ноль'. Свойство prototype отсутствует в типе Room_T, но требуется в типе typeof Room_T

Room.tsx

....
import { connect } from 'react-redux';
....
export class Room_T extends React.Component {
    render() {
        return(
            ....
        )
    }
}
export default connect(mapStateToProps, null, null, {
    forwardRef: true
})(Room_T)

dependencies
    react        = "16.13.1"
    react-redux  = "7.2.1"
    redux        = "4.0.5"
devDependencies
    @types/react       = "16.9.26"
    @types/react-redux = "7.1.8"
    typescript         = "3.9.2"

Answer 1

Это связано с тем, как классы могут также использоваться как типы, а consts - нет. Когда вы экспортируете только базовый класс (без оператора connect), ваш refRoom: React.RefObject<Room_T>; действителен, так как Room_T относится к классу.

Однако, когда вы экспортируете подключенный компонент, это не дольше класс и, следовательно, не может использоваться как тип. Вместо этого вы хотите использовать оператор typeof, чтобы получить фактический тип, например React.RefObject<typeof Room_T>;

Надеюсь, этот фрагмент объясняет это немного лучше:

type I_PROPS = object
type I_STATE = object

class UnconnectedRoom extends React.Component {
  render() {
    return null
  }
  someMethod() {
    console.log('called method')
  }
}

const ConnectedRoom = connect(
  () => {},
  null,
  (stateProps, dispatchProps) => ({}),
  {
    forwardRef: true,
  }
)(UnconnectedRoom)
class App extends React.Component<I_PROPS, I_STATE> {
  constructor(props: any) {
    super(props)
    this.connectedRoomRef = createRef()
    this.unconnectedRoomRef = createRef()
  }

  render() {
    console.log(this.unconnectedRoomRef.current?.someMethod())
    console.log(this.connectedRoomRef.current?.someMethod())
    return (
      <Provider store={{}}>
        <ConnectedRoom ref={this.connectedRoomRef} />
        <UnconnectedRoom ref={this.unconnectedRoomRef} />
      </Provider>
    )
  }
  private connectedRoomRef: React.RefObject<typeof ConnectedRoom> // This is not a class and hence we're using the `typeof` operator
  private unconnectedRoomRef: React.RefObject<UnconnectedRoom> // This is a class and can also be used as a type
}