🤔

인터페이스에서 중복되는 프로퍼티가 너무 많아요.

태그

날짜

Jan 1, 2024

사람

사건 발단

우리는 컴포넌트로 넘어오는 props에 대한 타입과 styled-component 에서 사용되는 변수들에 대한 타입을 같은 파일 안에서 관리했어요. 때문에 아래와 같은 문제가 발생합니다.


interface TagProps {
  name: string;
  height?: number;
  fontSize?: number;
  padding?: number;
  marginRight?: number;
  color?: string;
  hasMouseCursor?: boolean;
  backgroundColor?: string;
}

interface IStTag {
  height: number;
  fontSize: number;
  padding: number;
  marginRight: number;
  color: string;
  hasMouseCursor: boolean;
  backgroundColor: string;
}

각 인터페이스에 중복되는 내용이 너무 많이 들어있게 되었어요.

styled-components에 TagProps를 넣자니, name 프로퍼티가 사용되지 않으므로 에러를 뱉어내요.

그렇다고 IStTag를 사용하자니, 위와 같이 중복 내용이 많아지게 되어요.

해결법

이를 위해 유틸리티 타입을 사용하기로 했습니다.

IStTag에서는 name이 필요 없으므로 Omit<Type, Keys>으로 처리 했습니다.

또한 나머지 프로퍼티는 모두 필요하므로 Required<Type>으로 처리 했습니다.


interface TagProps {
  name: string;
  height?: number;
  fontSize?: number;
  padding?: number;
  marginRight?: number;
  color?: string;
  hasMouseCursor?: boolean;
  backgroundColor?: string;
}

type StTagType = Required<Omit<TagProps, 'name'>>;

유틸리티 타입을 활용하였기에, 위와 같이 interface가 아닌 type(타입 별칭)을 사용하였습니다.

이에 interface를 사용하여 나타낼 순 없는지 공부하게 되었고, extends를 활용하면 유틸리티 타입도 아래처럼 interface로 표기할 수 있음을 알 수 있었습니다.


interface IStTag extends Required<Omit<TagProps, 'name'>> {};