다른 소품을 기반으로 TypeScript에서 React 소품을 선택 사항 및 필수로 만듭니다.

Question

사용자가 사용하는 prop에서 제공하는 유형에 따라 일반 버튼, 아이콘 버튼 또는 아이콘 전용 버튼을 반환하는 React 버튼 컨테이너 구성 요소가 있습니다. ButtonContainer组件与Props에 대한 관련 유형 정의는 다음과 같습니다.

으아악

ButtonContainer 구성 요소를 사용하는 방법은 다음과 같습니다.

으아악

위 코드에서 icon prop은 아이콘 버튼과 아이콘이 있는 일반 버튼에만 사용되므로 선택 사항입니다. ButtonContainer에서 전달된 유형이 텍스트인 경우에만 icon prop을 선택 사항으로 만들고 ButtonContainer에 전달된 유형이 icon 또는 iconOnly인 경우 필수 prop이어야 합니다.

Answer 1

저는 Distinguish Union Type을 사용하겠습니다.

type 속성은 판별자 역할을 하여 ButtonWrapperProps를 조합원으로 범위를 좁힐 수 있습니다.

또한 각 조합원의 필수 속성을 만들 수 있으므로 이를 사용할 때 좋은 경험을 제공합니다. TS는 유형이 설정된 후 어떤 추가 속성이 필요한지 힌트를 줄 만큼 똑똑합니다.

으아아아