[Issue] 문자열 리터럴 타입(String Literal Types) 사용 시 에러

문제 상황

오른쪽에서 타입스크립트의 인터페이스(interface)로 객체의 속성과 속성의 타입을 정의했다.
그리고 ImageCard 컴포넌트 테스트를 위해 더미데이터인 imageInfo 객체를 만들어 props로 넘겨줬더니 아래와 같이 타입이 일치하지 않다는 오류가 발생했다.

ImageInfo의 type 속성의 경우 문자열 리터럴 타입(string literal types)을 이용해 'image/jpeg' 혹은 'video/mp4'만을 허용한다.
그래서 더미데이터인 imageInfo의 type 속성에 'image/jpeg'로 넣어줬는데 오류가 발생한 것이다.

문제 이유

자세히 읽어보니, 더미데이터인 imageInfo의 type 속성에 넣어준 'image/jpeg'는 string 타입이고, 인터페이스인 ImageInfo의 type 속성에 정의된 타입은 문자열 리터럴 타입(string literal types)이기 때문이었다.

해결 방법

처음 접근(좋은 방법X)

처음엔 더미데이터인 imageInfo의 type 속성에 'image/jpeg'를 그냥 넣어줬더니 타입스크립트가 string으로 타입추론을 해서 문제가 되었다고 판단했다.

const imageInfo = {
  id: 'id1234';
  description: 'null';
  type: 'image/jpeg' as const;
  hasSound: false;
  imageWidth: 100;
  imageHeight: 300;
  bandWidth: 400;
} 

그래서 타입 추론을 'image/jpeg'라는 리터럴 타입을 가지도록 as const로 타입 단언(type assertion)을 해주었다.
타입스트립트에서 const로 선언한 경우, 리터럴 자체로 타입을 추론하기 때문에 'image/jpeg'는 string 타입이 아닌 'image/jpeg'라는 리터럴 타입으로 추론이 되게 된다.

적절한 방법

위의 방법으로 오류는 해결할 수 있지만, 임시방편일 뿐이다.
데미데이터인 imageInfo의 type 속성만이 아니라 다른 속성들도 ImageInfo 인터페이스 타입을 만족해야하는 상황이므로, 데미데이터인 imageInfo의 타입 자체를 imageInfo 인터페이스 타입임을 명시하는 것이 적절하다.

const imageInfo: ImageInfo = {
  id: 'id1234',
  description: 'null',
  type: 'image/jpeg',
  hasSound: false,
  imageWidth: 100,
  imageHeight: 300,
  bandWidth: 400,
};