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

Question

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

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

Свойство «nameOfProp» не существует на типе «IntrinsicAttributes & IntrinsicClassAttributes> & {} & {детей ?: Reac ... '.

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

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