React with TypeScript: What type is render()?

Question

I'm trying to convert my components to TypeScript. What type can I specify for render, which returns HTML?

class Component extends React.Component {
    render() {
        return (
            <div>
                ...some HTML...
            </div>
        );       
    }
}

Answer 1

I don't know whether it did when this question was first asked, but React has types available via the @types/react module (now). The return type of render is React.ReactNode which is defined like this:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

You can find the details of those various subtypes in the index.d.ts file at DefinitelyTyped/DefinitelyTyped.

Can I specify any type for render, which returns HTML?

render doesn't return HTML (which would be a string). From the documentation:

When called, it should examine this.props and this.state and return one of the following types:

• React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
• Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
• Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
• String and numbers. These are rendered as text nodes in the DOM.
• Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)