reactjs - Send props til en børnekomponent i React, med Typescript (TSX-fil)

Jeg bruger VS2013 og får et eksisterende projekt sat op til at bruge React (0.14) og Typescript (1.8.5). Min React-kode fungerer fint som JSX-fil. Jeg har en fejl i min nye TSX-fil, som jeg ikke kan finde ud af.

Jeg har cirka 30 fejl på hver prop, der er sat ind i en komponent længere nede i træet - disse læser alle:

Egenskaben 'nameOfProp' findes ikke på typen 'IntrinsicAttributes & IntrinsicClassAttributes> & {} & { children?: Reac...'.

Her er et eksempel på kode, der gør TypeScript utilfreds. Enhver hjælp vil blive meget værdsat, da dette er en af de sidste hindringer for at få React op at køre i produktion. BEMÆRK: Jeg har ikke inkluderet information om App-tilstanden for at spare plads, men de røde streger er kun på navne på børnekomponenterne (filter, navn, id, antal)

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>

Svar #1

Signaturen for React.createClass er:

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

De generiske P og S definerer props og state.
Kompilatoren ved ikke, hvad typerne for disse er, og derfor bruger den basen, som er den type, du får i din fejl.

Du kan gøre:

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

Hvis du bruger klasser:

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