Typescript (TSX 파일)로 React의 하위 구성 요소에 소품 전달

Question

VS2013을 사용하고 있고 React (0.14) 및 Typescript (1.8.5)를 사용하도록 기존 프로젝트를 설정하고 있습니다. 내 React 코드는 JSX 파일로 잘 작동합니다. 새 TSX 파일에 하나의 오류가 있습니다. 알아낼 수 없습니다. 모든이 나무 아래 구성 요소에 붙여 법안에

나는 30 이상한 오류가 -이 모든 읽기 :

재산권 'nameOfProp'IntrinsicAttributes '유형에 존재하지 않는 & IntrinsicClassAttributes> & {} & {아이들 ? : Reac ... '.

다음은 TypeScript를 가져 오는 예제 코드입니다. 어떤 도움이라도 극대화 될 것입니다. 이것은 생산에서 React를 시작하고 실행하는 데있어 마지막 장애물 중 하나이기 때문입니다. 참고 : 나는 공간을 절약하기 위해 앱 상태에 대한 정보를 포함하지 않은,하지만 (필터, 이름, 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() { 
     ... 
    } 
}