例えば、以下のコードのように徒歩と車の型があり、プロパティの内容によって表示方法を変えたい場合があるとします。

type Walk = {
  onFoot: number
}

type Car = {
  transfer: number
}

type Move = Walk | Car

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

  return <>{speed}</>
}

export default App

in 演算子を使ってプロパティを指定した場合、TypeScript では、Walk か Car かの型を自動で判別してくれます。

if 分の中の${move.onFoot}で型推論を確認します。

image2

通常、moveは、onFoottransferの型推論が表示されるはず。

しかし、in 演算子でonFootの場合と指定しているため、型推論はonFootのみ表示されます。

反対に、in 演算子でtransferを指定しているところは、型推論がtransferのみ表示されます。

image3

ちなみにブラウザで確認すると、

image4

onFootを指定しているので、徒歩が表示されました。

ブログ一覧