联合类型
在 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);