使用 Typescript（TSX 文件）将道具传递给 React 中的子组件

Question

我正在使用 VS2013 并将现有项目设置为使用 React (0.14) 和 Typescript (1.8.5)。我的 React 代码可以作为 JSX 文件正常工作。我的新 TSX 文件中有一个我无法弄清楚的错误。

我在树下粘贴到组件的每个道具上都有 30 个奇怪的错误 - 这些都是这样的：

类型“IntrinsicAttributes & IntrinsicClassAttributes> & {} & { children?: Reac...”上不存在属性“nameOfProp”。

这是一个让 TypeScript 感到不安的示例代码。任何帮助将不胜感激，因为这是在生产环境中启动和运行 React 的最后障碍之一。注意：为了节省空间，我没有包含有关 App 状态的信息，但红线仅在子组件名称上（过滤器、名称、id、计数）

var App = React.createClass({
  render: function() {
    render (
      <FilterItem 
      filter={this.state.artifactFilter}
      count={this.state.count}
      id={this.state.id}
      name={this.state.name}
      />
    )
  }
});
var FilterItem = React.createClass({
  render: function() {
    return (
      <span>{this.props.name} ({this.props.count})</span>
  )
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

Answer 1

React.createClass 的签名是：

function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;

通用的P 和S 定义了道具和状态。
编译器不知道它们的类型是什么，所以它使用你在错误中得到的类型的基数。

你可以这样做：

interface AppState {
    filter: string;
    count: number;
    id: string;
    name: string;
}
var App = React.createClass<{}, AppState>(...);

interface FilterItemProps {
    count: number;
    name: string;
}
var FilterItem = React.createClass<FilterItemProps, {}>(...);

如果您使用的是类：

class App extends React.Component<{}, AppState> {
    render() {
        ...
    }
}