以下のユニオン型があるとします。

type Walk = {
  type: "onFoot"
  walkSpeed: number
}

type Car = {
  type: "transfer"
  carSpeed: number
}

type Move = Walk | Car

内容によって表示内容を変えたい場合、move.typeで条件分けしようとすると、型推論が効いていることがわかります。

function App() {
  const transportation = (move: Move) => {
    if (move.type === "") {
      return `徒歩は、時速${move.walkSpeed}kmです`
    }
  }

  return <></>
}

image2

さらに、時速の内容を入力すると、Car の型は表示されず、Walk の型推論ができます。

if (move.type === "") {
  return `徒歩は、時速${move.}kmです`;
}

image3

transportation関数に値を代入する際、typeを onFoot にすると、型推論では、wolkSpeed 飲み表示されます。

function App() {
  const transportation = (move: Move) => {
    if (move.type === "onFoot") {
      return `徒歩は、時速${move.walkSpeed}kmです`
    }
    if (move.type === "transfer") {
      return `車は、時速${move.carSpeed}kmです`
    }
  }
  const speed = transportation({ type: "onFoot" })

  return <>{speed}</>
}

image4

ちなみに、ブラウザで確認すると、意図した内容が表示されました。

type Walk = {
  type: "onFoot"
  walkSpeed: number
}

type Car = {
  type: "transfer"
  carSpeed: number
}

type Move = Walk | Car

function App() {
  const transportation = (move: Move) => {
    if (move.type === "onFoot") {
      return `徒歩は、時速${move.walkSpeed}kmです`
    }
    if (move.type === "transfer") {
      return `車は、時速${move.carSpeed}kmです`
    }
  }
  const speed = transportation({ type: "onFoot", walkSpeed: 4 })

  return <>{speed}</>
}

export default App

image5

ブログ一覧