[ 공모전 ] Title Component - NonNullable<T> 4/5

이제 value에 들어있는 null을 없애줘보자

null을 제거하기 위해서는
typescript의 utility 지원 NonNullable<T>을 '활용' 하면 될것 같다.

What is NonNullable

NonNullable<T>은 유니온타입의 '값' 에서 null, undefined를 제거해주는 utility 제네릭이다
사용법은 아래의 사진과 같다.

Typescript 공식사이트

위의 사진과 같이 NonNullable<T>은 객체타입의 value 값에 들어있는 null, undefined는 삭제 할수 없다.

그렇다면 NonNullable을 잘?? 활용하면??!

그렇다면 어떻게 없앨것인가.... ??? 내가 원하는 것은
객체 타입의 value 값에 있는 null, undefined를 없애는 것인데...

혼자서 궁리할 때 index_signature 와 같이 섞어서 사용하면 될것 같은데...
구글링을 하다가 좋은 해결방향을 알게 되었다. stackoverflow

타입 제너레이터를 만들어줘보자

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

위의 문장을 차근차근 인간의 언어로 풀어보자면..

• type T_RemoveNull<T> 할당된 타입변수의 해석은 <T> 여기에는 Generic이 들어와요

• Generic 이들어오면 오른쪽에 있는 로직으로 풀어서 설명하는데...

• [k in keyof T] : T는 객체 타입이구요, K 는 객체 타입의 T에 들어있는 key 값입니다.

• NonNullable<T[K]> : T[K] 는 key 값에 따른 value 값인데, null , undefined 삭제한 value 에요

• 결론 : T_RemoveNull<T> 는 null, undefined 를
  이렇게 풀수 있다.

  
  
  

해결

type T_CVAProps = VariantProps<typeof style> // CVA type 추출
type T_RemoveOptionalType = Required<T_CVAProps> // optional 삭제
                               
type T_RemoveNull<T> = { [K in keyof T] : NonNullable<T[K]> } // 타입제너레이터 만들기

type T_CompleteCVAProps = T_RemoveNull<T_RemoveOptionalType> // null값 삭제한 타입

이렇게 총 3단계를 거쳐서 해결 할 수가 있다.

총 3단계를 거쳐서 내가 원하는 타입을 만들 수 있지만, 조금더 축약하고 싶은 욕구가 든다.