[ 공모전 ] Title Component - 타입축약하기 5/5

저번 글에서 내가 원하는 타입을 만드려면 3단계를 거쳤었다.
그렇지만, 하드 코딩 같기도 하고, 한번에 처리할 수 있는 Generic으로 만들고 싶은 욕심이 들었다.

기존 해결방법은

type T_CVAProps = VariantProps<typeof Style> // CVA Props 타입
type T_RemoveOption = Required<T_CVAProps> // CVA optional 삭제 , Required로 

type T_RemoveNull<T> =  { [A in keyof T] : NonNullable<T[A]>; }

type T_CompleteCVAProps = T_RemoveNull<T_RemoveOption> // null 값 삭제한 타입 ( 완성 )

작성을 3번 하면 끝이지만, 다른 컴포넌트 , 공통 UI를 만들 때 Cva로 style을 분기 처리를 할 때, type을 import , export 해서 사용 할 수 있는 utility를 만들 면 좋을 것 같았다.

그래서 만들어 보았다.

// types/CVA

/**
 * @explain cva의 props에 null | undefined를 삭제 하는 generator입니당
 * generic에는 반드시 !!! "VariantProps<typeof object>" 로 넣어주세요
 * @example type T_RemoveNullableCVAProps = T_CVARequiredProperty<VariantProps<typeof CVA_Object>>
 */
export type T_CVARequiredProperty<T> = Required<{ [P in keyof T]: NonNullable<T[P]> }>
  
  
// src/component/common/title
import { T_CVARequiredProperty } from '@/types/cva';
type T_CVAProps = T_CVARequiredProperty<VariantProps<typeof STYLE_LEVEL>>;

interface I_TitleProps extends T_CVAProps {
  className?: string;
  isOutfit?: boolean; // Outfit 폰트를 적용할건지 말건지 결정하는 type (기본폰트는 Pretendard이지만 로고와 큰제목은 Outfit임)
  text: string;
}

이렇게 util Generic을 만들어 사용했다.

물론 코드가 지저분해보이기도 하지만,
프로젝트에서 내가 원하는 결과(타입)을 만들기 위해 아이디어와 여러가지 생각을 조합, 그리고 새롭게 typescript에서 사용하지 않았던 utility를 활용해서 "결과물"을 만들 수 있어서 뿌듯하고, 조금더 typescript와 친해진(?) 것 같아 너무 좋다.