👨‍💻 사건

서버에 이미지를 저장하고, 그 이미지의 명을 타입지정으로 한번 판단할수있게 기존에 설정을 해 두었다. 그러나, 추후에 이미지가 수정이 되는일이있으면 타입을 다시 수정하고 배포해야하는 번거로움이 있을것이라 판단하였다.
그래서 사용한 것이, string 으로 타입을 지정해두었다.

이렇게 하다보니, 실제 우리가 만든 디자인시스템을 사용하는 사용자가 자동완성이 안되어서 오타를 발생할수있다는 생각이 들었다. 그래서 or (|) 을 사용하여, '지정한타입 | string' 이런식으로 타입을 지정해두었다.

export interface IIcon {
  name: IconName | string;
  name: string;
  ...
type IconName =
  | 'notice'
  | 'search'
  | 'close'
	...

그렇지만, string이 더욱 넓은 범위라 자동완성의 우선순위가 string 으로 설정되어서 자동완성이 되지않았다.

✅ 해결

근본적인 해결방법은 될수없으나, 그래도 하나의 방법을 찾게되었다.
지정된 타입을 값으로 가지는 인터페이스와, string을 값으로 가지는 인터페이스를 생성한다.

interface IIconStrict {
  name: IconName;
  extension?: string;
  height?: number;
  width?: number;
}

interface IIconGeneral {
  name: string;
  extension?: string;
  height?: number;
  width?: number;
}

그후 export 타입을 하는데 그 타입은 아래와 같이 설정한다.

export type IIcon = IIconStrict | IIconGeneral;

이렇게 설정하고, 한번 테스트 해보니, 자동완성이 잘 적용된 모습을 확인할 수 있었다.

이때, 꼭 props 의 값을 넣을때는 아래와 같이 해줘야한다.

<Fnd.IconStyles name={} />

에서 {} 안에 '' 을 넣는순간, 자동완성이 작동될것이다.

💭 개선

• 근본적인 해결방법은 아니고 약간 편법? 을 쓰는 방법이라고 생각한다. 원초적으로는 string 이 큰 범위라 먼저 탐색을 하지만, 강제적으로 IconName 부터 탐색하도록 타입을 설정하는것이기 때문이다.
  다른 방법이 있다면 그 방법으로 사용하고싶다.