[ 공모전 ] Title Component - Required 3 / 5

문제가 또 다시 발생

저번 글에서 해결하기 위해 extends 문법을 사용해서 해결이 되는 줄 알았으나 또다른 에러가 나타났다.

hnull 은 JSX 문법에 존재하지 않는다는 에러였다.

이러한 type error가 발생하는 이유는 저번 코드 작성에서 본 사람들은 알겠지만

//type T_CVAProps = VariantProps<typeof STYLE_LEVEL>
type T_CVAProps = {
    level?: 1 | 2 | 3 | 4 | 5 | null | undefined;
}                               

T_CVAProps 에서 optional 때문에 생긴 undefined와 null 때문에 h1~h5로 "만" 지정하려는 내 의도와 다른 변수가 생긴 것이다.

조금더 자세히 내 코드를 보면

const Title: FunctionComponent<I_TitleProps> = ({ className, level, text }) => {
  const Tag = `h${level}` as const; // 이 로직이 원이으로 에러가 뜬다 
  //e.g) 'h'+ 'null'은 없잖냐
  
  //... 생략

해결을 하기 위해선...

type 문제를 해결하기 위해선

• optional
• null
  이 2가지를 제거해줘야 한다.

여기서 잠깐 optional 이란..

optional이라 함은 객체 타입의 key 의 형태에서 ?를 붙이면 value 값에 undefined가 붙는데,
값이 들어갈 수도 정의 되지 않을 수도 있어요~~~ 라고 알려주는것과 똑같다.

//e.g
interface I_Sample {
      key?: string
}

// Result
(property) I_Sample.key?: string | undefined

다시 돌아와서 , 정리하자면 객체형태의 타입에서 ?를 삭제하고, value 값의 null을 삭제해주면 된다.

---

Required

typescript에서 지원하는 utility인 Required를 사용하면 optional을 없앨 수 있다.
Required의 용법은

//e.g
interface I_Sample {
      key?: string
}

type T_RemoveOptionalType = Required<I_Sample> // Required<T>

// 
type T_RemoveOptionalType = {
    key: string; // 이렇게 `?` 가 사라졌다. 
}

따라서 적용해보면

type T_CVAProps = VariantProps<typeof style>
type T_RemoveOptionalType = Required<T_CVAProps>
                               
// Result
type T_RemoveOptionalType = {
    level: 1 | 2 | 3 | 4 | 5 | null;
}

optional 연산자가 사라지면서 자동으로 undefined 가 사라진다.

이제 value값의 null을 없애줘보자