typescript – 如何输入React组件定义？

我试图静态地键入React组件的道具.在包含 definitions for React之后,我定义了一个名为component的React.createClass的类型变体.

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);
}

当我使用注释定义带有文本字符串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"}));
    }
});

编译器检查Label是否使用text属性调用,并且它是一个字符串.

下一步是让编译器检查this.props.text在Label方法中使用.怎么做？

我使用 react-typescript桥,它定义了一个可以从TypeScript使用的基类：

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

由于基类是通用的,因此this.props正确输入为{name：string;在上面的例子中.