如何从TypeScript联合类型中获取「可选」属性？

这个问题我碰到过不少次，TypeScript对联合类型的属性访问有严格的检查规则——只有所有联合成员都存在的属性才能直接访问，而z只属于Point3d，所以直接访问p.z会触发类型错误。下面给你几个实用的解决办法：

1. 使用类型守卫（Type Guard）缩小类型范围 #

TypeScript支持通过类型守卫精准判断变量的具体类型，之后在对应的代码块里就能安全访问专属属性了。

方法A：用in操作符做类型守卫 #

这是最简单的方式，直接检查属性是否存在：

interface Point2d { x: number; y: number; }
interface Point3d { x: number; y: number; z: number; }
type Point = Point2d | Point3d;

function getPoint(): Point {
  // 示例返回逻辑
  return Math.random() > 0.5 ? {x: 1, y: 2} : {x: 3, y: 4, z: 5};
}

const p: Point = getPoint();
let z: number | undefined;

if ('z' in p) {
  // 这里TS能确定p是Point3d，安全访问z
  z = p.z;
} else {
  z = undefined;
}

方法B：自定义类型守卫函数 #

如果需要更复杂的判断逻辑，可以写一个自定义守卫函数：

function isPoint3d(point: Point): point is Point3d {
  // 这里可以根据实际需求添加更严谨的判断
  return typeof (point as Point3d).z === 'number';
}

const p: Point = getPoint();
const z: number | undefined = isPoint3d(p) ? p.z : undefined;

2. 用可选链操作符快速安全取值 #

如果你只是想简洁地获取z的值（不存在时返回undefined），可选链?.是最省心的方案，它会自动处理属性不存在的情况，同时让TypeScript认可这个类型：

const p: Point = getPoint();
const z: number | undefined = p?.z; // 不会报错，类型完全匹配

3. 类型断言（谨慎使用） #

如果你100%确定当前的p一定是Point3d类型，可以用类型断言跳过检查，但这种方式不安全——如果运行时p实际是Point2d，你会得到undefined，可能引发后续问题：

const p: Point = getPoint();
const z: number | undefined = (p as Point3d).z;

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