@types/react-virtualized typings are producing TS errors

Question

I'm using:

• typescript 2.1.6 (though I can reproduce this error with 2.4.0 as well)
• react 15.6.1
• react-virtualized 9.9.0
• @types/react-virtualized 9.7.3

TS is complaining about the following (example) code:

import * as React from "react";
import { List, ListRowProps } from "react-virtualized";

class TestComponent extends React.PureComponent<{}, {}> {
    public render() {
        return (
            <List
                width={300}
                height={300}
                rowCount={100000}
                rowHeight={30}
                rowRenderer={this.rowRenderer}
            />
        );
    }

    private rowRenderer(props: ListRowProps) {
        return <div
                 key={props.key}
                 style={props.style}
               />;
    }
}

Specifically, it gives me this error:

error TS2605: JSX element type 'List' is not a constructor function for JSX elements.

Notably, if I go in and edit List.d.ts directly I can fix it by changing:

export class List extends PureComponent<ListProps> {

to

export class List extends PureComponent<ListProps, {}> {

which makes sense to me given that the definition of PureComponent is

class PureComponent<P, S> extends Component<P, S> { }

i.e. PureComponent requires two type parameters, so a class cannot extend PureComponent<T> but it can extend PureComponent<T, {}>.

Are my assumptions correct? Is there a bug in @types/react-virtualized caused by an attempt to extend PureComponent<ListProps>? Or am I using incompatible versions of these packages? Or is there a TypeScript setting that I need to be using to allow this?

Answer 1

Figured it out!

I was using an outdated version of @types/react. Bumping it to the most recent version fixed my issue.