TypeScript的联合类型和交叉类型

TypeScript的联合类型和交叉类型

引用

CSDN

1.

https://blog.csdn.net/yusirxiaer/article/details/136480897

联合类型

在 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);