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

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を追加します。

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

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

image3

ブラウザで確認すると、

image4

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

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

image5

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

ブログ一覧