Dependent typescript

script.ts

type FooOrBar = "foo" | "bar"

type Box<T extends FooOrBar> = {
  x: T
  y: MaybeFoo<T>
}

type MaybeFoo<T extends FooOrBar> = T extends "foo" ? number : {}

// below does not compile

function either(f: Box<"foo" | "bar">): Box<"foo"> | Box<"bar"> {
  if (f.x == "foo") return f //Type 'Box<"foo" | "bar">' is not assignable to type 'Box<"foo"> | Box<"bar">'
  else return f
}

function foo(f: Box<FooOrBar>): number {
  if (f.x == "foo") return f.y //Type 'number | {}' is not assignable to type 'number'
  else return 4
}