TypeScript type narrowing not working for union type

Why is type narrowing not working in these snippets?

const xyz: { num: number } | { str: string }
if ("num" in xyz) {
	xyz // { num: number; } | { str: string; }
}

I even tried adding a type discriminant:

const xyz: { type: "num", num: number } | { type: "str", str: string }
if (xyz.type === "num") {
	xyz // { type: "num", num: number } | { type: "str", str: string }
}

I'm using Typescript version 5.0.2

It seems when the Typescript type-checker complains about prior errors or warnings, then that can throw off proper type narrowing.

In my case, the solution was to fix (or silence) the use of the un-initialized variable xyz (and other prior type errors), and type narrowing worked properly again.

TL;DR Seemingly unrelated type errors can put the type-checker in a bad state; Ensure simple errors are fixed first before tackling any weird errors.

Type narrowing is not working in your examples because the type union of { num: number } | { str: string } and { type: "num", num: number } | { type: "str", str: string } are not mutually exclusive, meaning that a variable of this type can have a property that belongs to both union members.

In the first example, even though you checked that "num" in xyz, xyz can still be of type { str: string }. This is because xyz can have the property str: string which is a member of the second union member.

Similarly, in the second example, checking xyz.type === "num" only narrows down the type to { type: "num", num: number } | { type: "str", str: string }, but not to a specific type. Therefore, xyz can still have the property str: string.

To make type narrowing work in these examples, you need to use a type guard that can narrow down the type to a specific member of the union. For example, you can define a custom type guard function like this:

function isNum(obj: { num?: unknown }): obj is { num: number } {
  return typeof obj.num === "number";
}

Then you can use this type guard in your code to narrow down the type of xyz:

const xyz: { num: number } | { str: string } = { num: 42 };
if (isNum(xyz)) {
  xyz // { num: number }
}

Similarly, for the second example, you can define a type guard function like this:

function isNum(obj: { type?: unknown }): obj is { type: "num", num: number } {
  return obj.type === "num";
}

Then you can use this type guard in your code to narrow down the type of xyz:

const xyz: { type: "num", num: number } | { type: "str", str: string } = { type: "num", num: 42 };
if (isNum(xyz)) {
  xyz // { type: "num", num: number }
}