Question

我试图静态地键入React组件的道具。在包含definitions for React之后，我定义了名为React.createClass的{{1}}的类型变体。

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); }组件，该注释表明它需要Label字符串道具，

text

编译器检查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方法。怎么做？

Answer 1

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

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

由于基类是通用的，因此this.props在上面的示例中正确键入{ name: string; }。

Answer 2

基本上，您希望为Props和State创建接口，并将它们作为扩展React.Component的新类的类型传递。使用React类型定义意味着您不必为您正在创建的新类别之外的任何内容添加类型。您可以在下面的模式中看到这一点。

（我写了一篇关于这个here）的博客文章

/// <reference path='../typings/react/react.d.ts' />
import React = require('react');

interface P {
  name?: string;
}

interface S {
  complete?: boolean;
}

class Goal extends React.Component<P, S> {
  state: S = {
    complete: false
  }

  private _toggleCompletion = () => {
    this.setState({complete: !this.state.complete});
  }

  render() {
    var status = 'Status: ' + (this.state.complete ? 'complete' : 'incomplete');
    return React.DOM.div({
      children: [
        React.DOM.div({}, this.props.name + ' - ' + status),
        React.DOM.button({
          onClick: this._toggleCompletion
        }, 'Toggle completion')
      ]
    });
  }
}

React.render(React.createElement(Goal, {name: 'Learn React and TypeScript'}), document.getElementById('react'));

如何输入React组件定义？

2 个答案: