How to type a React component definition?

Question

I am trying to statically type the props of a React component. After including the definitions for React, I have defined a typed variation of React.createClass named component.

interface Component<P> {
    (props: P, ...children: any[]): React.ReactComponent<P, any>
}

function component<P, S>(spec: React.ReactComponentSpec<P, S>): Component<P> {
    return React.createClass(spec);
}

When I define a Label Component with an annotation that says that it takes a text string prop,

var Label: Component<{text: string}> = component({
    render: function() {
        return React.DOM.div(null, this.props.text);
    }
});

var App = React.createClass({
    render: function() {
        return React.DOM.div(null, Label({text: "Hello"}));
    }
});

the compiler checks that Label is called with a text property and that it is a string.

The next step is to have the compiler check this.props.text uses inside the Label methods. How to do it?

Answer 1

I use the react-typescript bridge, which defines a base class which can be used from TypeScript:

class HelloMessage extends ReactTypescript.ReactComponentBase<{ name: string; }, {}> {
  render() {
    return React.DOM.div(null, 'Hello ' + this.props.name);
  }
}

Since the base class is generic, this.props is properly typed as { name: string; } in the example above.