PropTypes 대 흐름 반응

PropTypes와 Flow는 비슷한 것을 다루지 만 다른 접근 방식을 사용합니다. PropTypes는 런타임 중에 경고를 제공 할 수 있으며, 이는 서버 등에서 오는 잘못된 응답을 신속하게 찾는 데 도움이 될 수 있습니다. 그러나 Flow는 미래인 것 같고 제네릭과 같은 개념을 가진 매우 유연한 솔루션입니다. 또한 Nuclide에서 제공하는 자동 완성 기능은 Flow에 큰 장점입니다.

내 질문은 새 프로젝트를 시작할 때 가장 좋은 방법입니다. 아니면 Flow와 PropTypes를 모두 사용하는 것이 좋은 솔루션일까요? 둘 다 사용하는 문제는 중복 코드를 많이 작성한다는 것입니다. 다음은 내가 작성한 음악 플레이어 앱의 예입니다.

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

두 정의 모두 기본적으로 동일한 정보를 포함하며 데이터 유형이 변경되면 두 정의를 모두 업데이트해야합니다.

유형 선언을 PropTypes로 변환하는 이 babel 플러그인 을 찾았습니다 .

이 질문을 한 지 1 년 후,이 문제에 대한 내 경험에 대한 업데이트를 제공하고 싶었습니다.

Flow가 많이 발전함에 따라 코드베이스를 입력하기 시작했고 새로운 PropType 정의를 추가하지 않았습니다. 지금까지는 이것이 좋은 방법이라고 생각합니다. 위에서 언급했듯이 props뿐만 아니라 코드의 다른 부분도 입력 할 수 있기 때문입니다. 이것은 예를 들어 사용자가 수정할 수있는 상태에 소품의 복사본이있을 때 매우 편리합니다. 또한 IDE의 자동 완성 기능은 엄청난 이득입니다.

한 방향 또는 다른 방향의 자동 변환기는 실제로 이륙하지 않았습니다. 따라서 새 프로젝트의 경우 이제 PropTypes를 통한 Flow를 사용하는 것이 좋습니다 (입력을 두 번 수행하고 싶지 않은 경우).

둘 다 매우 넓은 유형 검사 분야에 속하는 것 외에는 둘 사이에 거의 유사성이 없습니다.

Flow는 언어의 상위 집합을 사용하는 정적 분석 도구로, 모든 코드 에 유형 주석을 추가 하고 컴파일 타임에 전체 버그 클래스를 포착 할 수 있습니다.

PropTypes는 React에 패치 된 기본 유형 검사기입니다. 주어진 컴포넌트에 전달되는 props의 유형 외에는 어떤 것도 확인할 수 없습니다.

전체 프로젝트에 대해보다 유연한 유형 검사를 원하면 Flow / TypeScript가 적절한 선택입니다. 주석이 달린 유형 만 구성 요소에 전달하는 한 PropTypes는 필요하지 않습니다.

prop 유형 만 확인하고 싶다면 나머지 코드베이스를 지나치게 복잡하게 만들지 말고 더 간단한 옵션을 선택하십시오.

여기서 놓친 점은 Flow 가 정적 검사기 이고 PropTypes 는 런타임 검사기 라는 것입니다.

• 흐름 은 코딩하는 동안 업스트림 오류를 가로 챌 수 있습니다. 이론적으로는 알 수없는 일부 오류를 놓칠 수 있습니다 (예를 들어 프로젝트에서 흐름을 충분히 구현하지 않았거나 중첩 된 개체의 경우).
• PropTypes 는 테스트하는 동안 다운 스트림을 포착하므로 놓치지 않습니다.

Flow 만 사용하여 props 유형을 선언 해보세요. 문자열 대신 숫자와 같은 잘못된 유형을 지정하십시오. 흐름 인식 편집기 내에서 구성 요소를 사용하는 코드에서 플래그가 지정되는 것을 볼 수 있습니다. 그러나 이로 인해 테스트가 실패하지 않으며 앱은 계속 작동합니다.

이제 잘못된 유형으로 React PropTypes 사용을 추가하십시오. 이로 인해 테스트가 실패하고 앱이 실행될 때 브라우저 콘솔에 플래그가 지정됩니다.

이를 바탕으로 Flow를 사용하더라도 PropTypes도 지정해야 할 것 같다.