Передать реквизиты дочернему компоненту в React с помощью Typescript (файл TSX)

Question

Я использую VS2013 и настраиваю существующий проект для использования React (0.14) и Typescript (1.8.5). Мой код React прекрасно работает как файл JSX. У меня есть одна ошибка в моем новом файле TSX, которую я не могу понять.

У меня есть 30 странных ошибок на каждом объекте, вставленном в дерево внизу - все это выглядит так:

Свойство nameOfProp не существует для типа "IntrinsicAttributes & IntrinsicClassAttributes> & {} & { children?: Reac...".

Вот пример кода, который расстраивает TypeScript. Любая помощь будет принята с благодарностью, так как это одно из последних препятствий для запуска и запуска React в производство. ПРИМЕЧАНИЕ. Я не включил информацию о состоянии приложения для экономии места, но красные линии указаны только на именах дочерних компонентов (фильтр, имя, идентификатор, количество).

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() {
        ...
    }
}