TypeScript联合类型疑问：为何允许声明所有分支属性？

先看你定义的联合类型：

type A = {
    prop2: string;
    prop1: string;
} | {
    prop3: string;
    prop1: string;
}

1. 为什么允许声明包含所有三个属性的变量？ #

TypeScript判断值是否能赋值给联合类型，只要求该值满足联合类型中至少一个分支的类型约束。你声明的{prop1: '', prop2: '', prop3: ''}同时符合两个分支的要求：

• 它包含prop1和prop2，符合第一个分支；
• 也包含prop1和prop3，符合第二个分支。
  所以这个值可以合法赋值给A类型的变量。

2. 为什么使用时必须校验属性才能访问？ #

联合类型在未做类型窄化时，TypeScript只能保证所有分支共享的属性（这里是prop1）一定存在。对于非共享的prop2和prop3，TypeScript无法确定当前变量到底属于联合类型的哪一个分支——如果直接访问a.prop2，万一a实际是第二个分支的对象（只有prop1和prop3），就会出现运行时错误。

通过'prop2' in a这种类型守卫，TypeScript可以将变量的类型窄化到包含prop2的分支，此时就能安全访问该属性了。

3. 为什么无法添加prop4？ #

这是因为TypeScript的额外属性检查机制：当你把一个包含额外属性（比如prop4）的对象赋值给联合类型时，TypeScript会检查这个额外属性是否属于联合类型中任意分支的已知属性。由于prop4不在A的任何一个分支里，额外属性检查会拦截这种赋值，所以无法添加。

对应React组件场景的意义 #

这种设计刚好适配你提到的React组件场景：允许外部传入覆盖所有分支的props（同时传prop2和prop3），但组件内部必须通过类型判断明确当前传入的props结构，避免错误访问不存在的属性，既保证了灵活性，又兼顾了类型安全。

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