文字列テキストタイプの使用中にエラーが発生しました

問題の状況

右側では、タイプスクリプトのインターフェイスがオブジェクトのプロパティとプロパティのタイプを定義します.
次に、ImageCardコンポーネントをテストするために、データImageInfoオブジェクトをスタックしてpropsに渡すと、次のようなタイプの不一致エラーが発生しました.

ImageInfoのtypeプロパティでは、文字列文字タイプ(String literal types)を使用して「image/jpeg」または「video/mp 4」のみを許可します.
そこで私はそれを「image/jpeg」としてスタックデータimageInfoのtype属性に入れたところ、エラーが発生しました.

問題の原因

よく読むと、スタックデータimageInfoのtype属性に「image/jpeg」を配置するタイプはstringタイプであり、インタフェースImageInfoのtype属性に定義されるタイプは文字列文字タイプであることがわかります.

解決策

初回訪問(良い方法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でタイプブレークスルーとした.
タイプスクリプトでconstと宣言すると、「image/jpeg」自体がタイプと推定されるため、「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,
};