Restricting Props by TypeScript

type RandomNumberProps = {
  value: number
  isPositive?: boolean
  isNegative?: boolean
  isZero?: boolean
}

const RandomNumber = ({
  value,
  isPositive,
  isNegative,
  isZero
}: RandomNumberProps) => {}

다음과 같은 RandomNumber 컴포넌트가 있다고 가정한다. 하나의 값과 그 값이 양수인지, 음수인지, 0인지에 대한 정보를 할께 제공한다. 하나의 값은 양수 | 음수 | 0 이 3가지의 선택지 중에서 항상 하나에만 해당하기 때문에 isPositive | isNegative | isZero 이 3개의 boolean 값들 중 하나만이 props로 넘어와야 한다.

하지만, 이 코드는 <RandomNumber value={10} isPositive isNegative isZero />를 허용한다. 때문에 타입스크립트를 통해 props를 제한해줄 필요가 있다. (isPositive, isNegative, isZero 중에서 딱 하나만 props로 넘어오도록)

type RandomNumberType = {
  value: number
}

type PositiveNumber = RandomNumberType & {
  isPositive: boolean
  isNegative?: never
  isZero?: never
}

type NegativeNumber = RandomNumberType & {
  isNegative: boolean
  isPositive?: never
  isZero?: never
}

type Zero = RandomNumberType & {
  isZero: boolean
  isPositive?: never
  isNegative?: never
}

type RandomNumberProps = PositiveNumber | NegativeNumber | Zero

const RandomNumber = ({
  value,
  isPositive,
  isNegative,
  isZero
}: RandomNumberProps) => {}

다음과 같이 코드를 구성하면

• <RandomNumber value={10} isPositive /> // O
• <RandomNumber value={10} isNegative /> // O
• <RandomNumber value={10} isZero /> // O
• <RandomNumber value={10} isPositive isZero /> // 에러!
• <RandomNumber value={10} isPositive isNegative /> // 에러!

참고문헌

https://www.youtube.com/watch?v=yqn9Fkv7f2M