What is the proper interface for element with "GetWrappedInstance" - reactjs

Question

I am writting React+Redux with typescript. I need to access the reference of one wrapped instance, like this.refs.items.getWrappedInstance(), but got typescript error Property 'getWrappedInstance' does not exist on type 'ReactInstance'
Which interface shall I give to items? Are there any interface defined by Redux that I can declare or I need to create my own?
I tried to google and search stackoverflow but cannot find an answer.
Thank you!

Answer 1

We got the same error using Flow and our most senior UI developer ultimately said to use // $FlowIgnore: some comment
I think that because accessing wrappedInstance is an antipattern flow and typescript may not support it...yet?
I am interested if anyone has a different answer.

Answer 2

I came across this issue and while I didn't find a native solution, I did manage to create one. Below is a working sample implementation with the solution.
Keep note of the { withRef: true } in the connect function.
Here is a small utility type to add the missing definition.
// connect.ts
type WrappedConnectedComponent<T> = {
getWrappedInstance(): T
}
export function unwrapConnectedComponent<T>(component: T): T | undefined {
if (component) {
const wrappedComponent: WrappedConnectedComponent<T> = component as any
if (wrappedComponent.getWrappedInstance) {
return wrappedComponent.getWrappedInstance()
}
}
return undefined
}
Here is a simple component that we'll be accessing later.
// SomeOtherComponent.tsx
import * as React from 'react'
import { connect } from 'react-redux'
class SomeOtherComponent extends React.Component {
log = () => {
console.log('logged')
}
render() {
return <div />
}
}
const mapStateToProps = () => ({})
const mapDispatchToProps = () => ({})
const ConnectedSomeOtherComponent = connect(
mapStateToProps,
mapDispatchToProps,
null,
{ withRef: true } // Important
)(SomeOtherComponent)
export default ConnectedSomeOtherComponent
export { SomeOtherComponent }
Here is the main component that does all the work.
// SomeComponent.tsx
import * as React from 'react'
import ConnectedSomeOtherComponent, { SomeOtherComponent } from './SomeOtherComponent'
import { unwrapConnectedComponent } from './connect'
class SomeComponent extends React.Component {
someOtherComponent?: SomeOtherComponent
private setSomeOtherComponent = (someOtherComponent: SomeOtherComponent) => {
this.someOtherComponent = unwrapConnectedComponent(someOtherComponent)
}
onClick = () => {
if (this.someOtherComponent) {
this.someOtherComponent.log()
}
}
render() {
return (
<div>
<button onClick={this.onClick} />
<ConnectedSomeOtherComponent ref={this.setSomeOtherComponent} />
</div>
)
}
}
export default SomeComponent