【TypeScrpt】Types of property 〇〇 are incompatible.エラーに対応する方法
TypeScript

【TypeScrpt】Types of property 〇〇 are incompatible.エラーに対応する方法

作成日:2022年05月19日
更新日:2022年05月19日

例えば、食料の価格を表示させたいとして、以下のコードを作成しました。

tsx
type Fluits = {
name: "バナナ" | "みかん" | "リンゴ";
price: number;
};
function App() {
const grocery = (fluits: Fluits) => {
return `${fluits.name}は、${fluits.price}円です。`;
};
const fluit = {
name: "バナナ",
price: 138,
};
return <>{grocery(fluit)}</>;
}
export default App;

すると、grocery(fluit)で『Argument of type '{ name: string; price: number; }' is not assignable to parameter of type 'Fluits'.  Types of property 'name' are incompatible.』というコンパイルエラーが発生しました。

image2

これは、Fluits 型の name は、"バナナ" | "みかん" | "リンゴ”の文字列型なのに対し、fluit の name は string 型なので互換性がないからです。

この場合、fluit の name が固有の型であることを指定します。

方法は、name の”バナナ”の後にas constを追加します。

tsx
const fluit = {
name: "バナナ" as const,
price: 138,
};

これで、バナナが string 型ではなく、固有の型であると推測してくれました。

image3

ブラウザで確認すると、

image4

意図した内容で表示されました。

ちなみにバナナをいちごに変えると

image5

いちごは固有の型の一覧にないのでコンパイルエラーが発生しました。

© 2024あずきぱんウェブスタジオ