联合类型（Union Types）和交叉类型（Intersection Types）的区别

联合类型（Union Types）和交叉类型（Intersection Types）的区别：

在TypeScript中，| 和 & 分别代表了联合类型（Union Types）和交叉类型（Intersection Types），它们用于组合类型，但是它们的行为和含义是不同的。

对于您给出的两个接口定义：

interface IContext {
  userInfo: {
    name: string;
  } | IUserInfo;
}

这里使用了联合类型（Union Type），表示userInfo属性可以是一个对象，包含有一个名为name的string类型的属性，或者是IUserInfo类型。这意味着userInfo可以是两者之一，但不能同时拥有两种类型的属性。

而第二个接口定义：

interface IContext {
  userInfo: {
    name: string;
  } & IUserInfo; 
}

这里使用的是交叉类型（Intersection Type），表示userInfo属性必须同时满足{ name: string; }这个类型，以及IUserInfo类型的所有属性要求。userInfo将包括name属性，并且加上IUserInfo接口中定义的所有其他属性。

总结一下区别：

- 联合类型 (|)：userInfo 可以是 { name: string; } 或 IUserInfo，但不要求同时拥有两者的属性。

- 交叉类型 (&)：userInfo 必须同时是 { name: string; } 和 IUserInfo 的合集，即拥有两者的所有属性。