Narrowing with typeof and optional chaining does not work specifically with a union containing boolean unless wrapped in parentheses

[MichaelMitchell-at]

Bug Report

🔎 Search Terms

typeof boolean narrow optional chaining

🕗 Version & Regression Information

• This changed between versions 4.8.4 and 4.9.3

⏯ Playground Link

Playground link with relevant code

💻 Code

type WrappedStringOr<T> = {value?: string} | {value?: T};

function numberOk(wrapped: WrappedStringOr<number> | null) {
  if (typeof wrapped?.value !== 'string') {
    return null;
  }
  return wrapped.value;
}

function booleanBad(wrapped: WrappedStringOr<boolean> | null) {
  if (typeof wrapped?.value !== 'string') {
    return null;
  }
  // @ts-expect-error Unexpected type error here
  return wrapped.value;
}

function booleanFixed(wrapped: WrappedStringOr<boolean> | null) {
  // This is semantically equivalent to above format (and gets auto-fixed to the above by formatters like Prettier).
  if (typeof (wrapped?.value) !== 'string') {
    return null;
  }
  // No type error here
  return wrapped.value;
}

🙁 Actual behavior

The type of wrapped is narrowed to exclude the {value?: boolean} case, but doesn't exclude the null case.

🙂 Expected behavior

The type of of wrapped is narrowed to both exclude the {value?: boolean} case and also exclude the null case.

[ahejlsberg]

@typescript-bot bisect good v4.8.4 bad v4.9.3

[ahejlsberg]

Looks like this was broken by #50344.

[ahejlsberg]

Shorter repro:

function foo(obj: { kind: 'a', data: string } | { kind: 1, data: number } | undefined) {
    if (typeof obj?.kind === "string") {
        obj;  // { kind: 'a', data: string } | undefined, but shouldn't include undefined
    }
    else {
        obj;  // { kind: 1, data: number } | undefined
    }
}