如何键入 React 组件定义？

Question

我正在尝试静态键入 React 组件的 props。在包含definitions for React 之后，我定义了React.createClass 的类型化变体，命名为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 使用内部 Label 方法。怎么做？

Answer 1

本质上，您想为 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'));

Answer 2

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

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

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