Typescript的联合类型和交叉类型

联合类型

在 TypeScript 中，可以使用联合类型来定义对象接口，从而表示一个对象可以具有多种不同结构的类型。联合类型是或的关系!!!

interface Circle {
    kind: "circle";
    radius: number;
}

interface Square {
    kind: "square";
    sideLength: number;
}

type Shape = Circle | Square;

const circle: Shape = { kind: "circle", radius: 5 };
const square: Shape = { kind: "square", sideLength: 4 };

如果如下方错误写法,为什么会报错呢?

const circle: Shape = { kind: "circle", radius: 5 , sideLength: 4};
circle.kind// 可以访问
circle.radius// 会报错
circle.sideLength // 会报错

circle.kind// 可以访问
circle.radius// 会报错
circle.sideLength // 会报错

在 TypeScript 中，当使用联合类型时，一个对象只能包含联合类型中共有的属性。在你的示例中，Circle接口有属性 kind和 radius，而 Square 接口有属性 kind和 sideLength 。

因此，当你将它们组合成联合类型 Shape时，对象只能是{
    kind: "circle";
    radius: number;
}，或者{
    kind: "square";
    sideLength: number;
}。

在这种情况下，circle对象可以包含 kind 属性，但它不能同时包含 radius 和 sideLength 属性。因此，当你尝试访问 circle.radius 时会报错，因为 radius 属性并不属于 circle对象。

如果你希望创建一个对象同时包含 kind、radius 和sideLength 属性，你需要使用交叉类型（&）而不是联合类型（|）。

交叉类型

在 TypeScript 中，使用交叉类型创建新类型时，对象必须包含交叉类型中所有属性。

交叉类型&是与的关系是并集!!!

interface Animal {
    name: string;
}

interface Mammal {
    hasFur: boolean;
    numberOfLegs: number;
}

// 使用交叉类型组合 Animal 和 Mammal 接口
type MammalAnimal = Animal & Mammal;

const dog: MammalAnimal = {
    name: "Dog",
    hasFur: true,
    numberOfLegs: 4
};

console.log(dog);