基于属性收窄TypeScript联合类型时遇到类型判断异常问题

问题原因分析 #

1. 直接访问user.id报错：因为CreateUser类型没有id属性，TypeScript不允许访问联合类型中并非所有成员都具备的属性。
2. 使用"id" in user时出现never类型错误：大概率是代码逻辑冲突或TypeScript版本过低导致的类型推断异常，标准写法下"id" in user应该能正确将类型收窄为User。

解决方案 #

方案1：使用in操作符作为类型守卫

这是TypeScript内置的类型守卫方式，能直接基于属性存在性收窄类型：

type User = {
  id: number;
  name: string;
}

type CreateUser = {
  name?: string;
}

const user: User | CreateUser = { name: "Foo Bar" };

// 通过"id" in user判断，TypeScript会自动将user收窄为User类型
if ("id" in user) {
  // 此处user的类型确定为User，name是必选的string类型
  console.log(`Hello ${user.name}`);
} else {
  // 此处user的类型为CreateUser，name是可选的string | undefined
  console.log(`Hello ${user.name ?? "Guest"}`);
}

方案2：自定义类型守卫函数

如果需要更复杂的类型判断逻辑（比如验证id的类型），可以写一个自定义类型守卫：

type User = {
  id: number;
  name: string;
}

type CreateUser = {
  name?: string;
}

const user: User | CreateUser = { name: "Foo Bar" };

// 自定义类型守卫，明确返回值类型为`u is User`
function isUser(u: User | CreateUser): u is User {
  return "id" in u && typeof u.id === "number";
}

if (isUser(user)) {
  console.log(`Hello ${user.name}`);
} else {
  console.log(`Hello ${user.name ?? "Guest"}`);
}

额外说明 #

• 联合类型的属性访问规则：只能安全访问所有成员都拥有的公共属性，name虽然在两个类型中都存在，但CreateUser里是可选属性，所以直接访问user.name会得到string | undefined类型。
• 如果仍然遇到never类型错误，建议检查代码中是否存在其他类型守卫导致类型被过度收窄，或者升级TypeScript到4.0+版本以获得更准确的类型推断能力。

内容的提问来源于stack exchange，提问作者Kevin Renskers