TypeScript如何允许访问联合类型可能不存在的属性不报错

TS 对联合类型的属性访问有默认约束：只有当属性在联合类型的所有分支中都存在时，才允许直接通过点运算符访问，因此直接在依赖数组中读取props.foo、props.bar会触发编译报错。在不修改原Props类型定义、不添加可选修饰符避免误导使用者的前提下，可通过以下方案解决：

方案1：访问点局部类型断言（最简洁） #

仅在属性访问的位置做临时类型断言，不改动任何全局类型定义，不影响原有类型守卫逻辑和对外类型约束：

useEffect(() => {
  // 原有业务逻辑保持不变
}, [
  (props as { foo?: boolean; bar?: boolean }).foo,
  (props as { foo?: boolean; bar?: boolean }).bar
]);

该断言仅在当前代码行生效，本质是告诉TS：我确认当前访问的属性如果不存在，返回值为undefined是符合预期的合法情况，不需要抛出错误。

方案2：抽离专用读取类型（适合多场景复用） #

如果项目中多处需要读取这两个跨联合分支的属性，可以单独抽离一个仅用于属性读取的辅助类型，避免重复书写断言逻辑：

// 该类型仅用于内部读取属性使用，不要对外暴露
type PropsReadable = Props & {
  foo?: boolean;
  bar?: boolean;
};

const readableProps = props as PropsReadable;
useEffect(() => {
  // 原有业务逻辑保持不变
}, [readableProps.foo, readableProps.bar]);

注意：所有对外传参、类型暴露的场景依然使用原Props类型，不会给类型使用者造成「属性可选传入」的误导。

方案3：显式类型收窄（无类型断言，类型安全性最高） #

如果不想使用任何类型断言，完全遵循TS类型系统的检查规则，可以先通过in运算符做属性存在性判断，提取出对应值后再放入依赖数组：

// 显式收窄提取值，不存在时直接赋值undefined
const depFoo = 'foo' in props ? props.foo : undefined;
const depBar = 'bar' in props ? props.bar : undefined;

useEffect(() => {
  // 原有业务逻辑，需要用到对应值时可直接使用depFoo、depBar
}, [depFoo, depBar]);

该方案完全没有绕过TS的类型检查，提取出的依赖值和预期的「属性存在为boolean，不存在为undefined」的逻辑完全一致，依赖变化检测的效果和直接访问属性完全相同。

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