How to define specific return type of react method (typescript)

Question

I want to define a return type of a specific react component.

For Example:

Component 1

class ComponentFoo extends React.Component<any, any> {
   public render() {…}
}

Component 2

class ComponentBar extends React.Component<any, any> {
    public renderComponentFoo() : ComponentFoo { <---
      return <ComponentFoo />
    }

    public render() {
      …
      {this.renderComponentFoo()}
      …
    }
}

Is something like this possible?

Answer 1

Your renderComponentFoo method should return React.ReactNode instead.

JSX/TSX is just syntax sugar around React.createElement() which returns React.ReactNode . You are not returning an instance of ComponentFoo as your current code suggests.