React 15, Typescript 2.2.1. 기능/상태 비 저장 구성 요소의 유형을 변환하는 방법은 무엇입니까?

Question

내 구성 요소에서 유형을 사용하는 방법에 대한 단서를 보려면 this tutorial을 읽었습니다. 그러나 내가 지금까지 얻은 느낌은 그것이 고안되고 장황해진다는 것입니다. 멋진 간결한 코드에서 읽을 수있는 무언가를 얻습니다. 가장 우아한 방법은 무엇입니까? 이 주제에 대한 정보가 부족하고 종종 구식 인 것 같습니다. React와 함께 TS를 사용하는 사람은 그리 많지 않습니다.

React.StatelessComponent<React.HTMLProps<JSX.Element>>은 React.StatelessComponent<{}>입니까?

그것은 모두이 오류에서 시작 [ts] Property 'propTypes' does not exist on type '({match, onClick, completed, text}: EntityPage) => Element'.

내 현재 설정 : 당신이

export const EntityPageCmp: React.StatelessComponent<EntitPage> = 
    ({ match, onClick, completed, text }) => { 
    ... 
} 

처럼 작성해야하므로

import * as React from "react"; 
import { PropTypes } from "react"; 
import * as classNames from 'classnames'; 

interface EntityPage { 
    match: any, 
    onClick(): void, 
    completed: boolean, 
    text: string 
} 

export const EntityPageCmp: React.StatelessComponent<{}> = 
    ({ match, onClick, completed, text }: EntityPage) => { 

    // Styles 
    require('./entity-page.cmp.scss'); 
    let classes = classNames('entity-page-cmp'), 
     titleClasses = classNames('title', { active: completed }); 

    return (
     <div className={classes} > 
      <h3 className={titleClasses}> 
       Entity: {match.params.entityId} 
      </h3> 
      {text} 
     </div> 
    ) 
} 

EntityPageCmp.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
} 

export default EntityPageCmp 

Answer 1

StatelessComponent 인터페이스 타입 paremeter와 같은 소품 정의를합니다 네가 소품을 두 번 선언했다고 생각해. 하나는 타이프 스크립트 방식으로, 두 번째는 반응 방식으로.

타이프하면 compilaton 시간 동안 안전을 입력하고이 줄 충분한 것을 얻을 수 있습니다 : React.StatelessComponent<EntitPage> 소품을 타이프 반대에

, 소품 런타임 동안 당신에게 검증을 제공 반작용, 반응 할 때 콘솔에 나타납니다 오류가 잘못된 속성을 감지 유형. 가지고 싶으면 React Props를 작성해야합니다. 당신이 당신의 소품을 반복 할 필요가 없습니다 당신은 정말 모두 당신이 https://github.com/gcanti/prop-types-ts 같은 몇 가지 라이브러리를 사용할 수 있도록하려면 당신이이 선을

EntityPageCmp.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
} 

를 삭제할 수 있도록 대부분의 경우 타이프 라이터 검증을 위해

충분하다 그것을 상용구없이 얻으십시오. 불행히도 typescript는 기본적으로 지원하지 않습니다. 여기에 대한 공개 문제가 있습니다 https://github.com/Microsoft/TypeScript/issues/4833