TypeScript联合类型与交叉类型的全面解析
联合类型（Union Types）
在TypeScript中，联合类型是一种特殊的类型，它允许一个变量或函数参数接受多种类型的值。联合类型使用竖线（|）分隔不同的类型。这在处理可能是多种类型之一的数据时非常有用。
1. 基本语法与示例
假设我们正在创建一个函数，该函数可以接受字符串或数字类型的参数，并返回其长度或数值本身。在JavaScript中，我们可能会这样写：
function printLengthOrValue(arg) {
if (typeof arg ==='string') {
return arg.length;
} else {
return arg;
}
}
在TypeScript中，我们可以使用联合类型来明确参数的类型：
function printLengthOrValue(arg: string | number): number | string {
if (typeof arg ==='string') {
return arg.length;
} else {
return arg;
}
}
let result1 = printLengthOrValue('hello');
let result2 = printLengthOrValue(10);
这里arg参数的类型被定义为string | number，表示它可以接受字符串或数字。函数的返回类型也是number | string，因为返回值取决于传入参数的类型。
2. 联合类型与类型保护（Type Guards）
当使用联合类型时，经常需要根据实际的类型执行不同的操作。这就需要使用类型保护。类型保护是一种运行时检查，用于缩小联合类型中的类型范围。
typeof类型保护：最常见的类型保护是typeof操作符。在上面的printLengthOrValue函数中，我们已经使用了typeof arg ==='string'来判断arg是否为字符串类型。这使得TypeScript能够在if块内知道arg的类型为string，从而可以安全地访问length属性。
instanceof类型保护：当联合类型包含类类型时，可以使用instanceof进行类型保护。假设我们有两个类Dog和Cat：
class Dog {
bark() {
return 'woof';
}
}
class Cat {
meow() {
return'meow';
}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
return animal.bark();
} else {
return animal.meow();
}
}
let dog = new Dog();
let cat = new Cat();
let sound1 = makeSound(dog);
let sound2 = makeSound(cat);
在makeSound函数中，通过instanceof检查animal的实际类型，从而调用正确的方法。
自定义类型保护函数：除了typeof和instanceof，我们还可以定义自己的类型保护函数。自定义类型保护函数需要返回一个类型谓词（type predicate）。类型谓词的形式为parameterName is Type，其中parameterName是函数参数名，Type是要判断的类型。
function isString(value: string | number): value is string {
return typeof value ==='string';
}
function processValue(value: string | number) {
if (isString(value)) {
return value.length;
} else {
return value;
}
}
在isString函数中，返回value is string作为类型谓词。这使得在processValue函数中，当isString(value)为true时，TypeScript知道value的类型为string。
3. 联合类型中的属性访问
当一个变量是联合类型时，只有联合类型中所有类型都共有的属性才能被安全访问。例如：
let value: string | number;
// 下面这行代码会报错，因为number类型没有length属性
// console.log(value.length);
如果要访问特定类型的属性，需要通过类型保护：
function logLengthOrValue(value: string | number) {
if (typeof value ==='string') {
console.log(value.length);
} else {
console.log(value);
}
}
4. 联合类型数组
联合类型也可以用于数组。例如，我们可以创建一个数组，其中的元素可以是字符串或数字：
let mixedArray: (string | number)[] = ['hello', 10];
在遍历这样的数组时，同样需要使用类型保护：
function printArrayElements(arr: (string | number)[]) {
arr.forEach((element) => {
if (typeof element ==='string') {
console.log(element.length);
} else {
console.log(element);
}
});
}
printArrayElements(mixedArray);
5. 联合类型与函数重载
函数重载是指在同一个作用域内，可以有多个同名函数，但它们的参数列表或返回类型不同。联合类型经常与函数重载一起使用。
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
if (typeof a === 'number' && typeof b === 'number') {
return a + b;
} else if (typeof a ==='string' && typeof b ==='string') {
return a + b;
}
return null;
}
let numResult = add(1, 2);
let strResult = add('hello', 'world');
这里我们定义了两个函数签名，一个接受两个数字并返回数字，另一个接受两个字符串并返回字符串。实际的实现函数会根据参数的类型进行相应的操作。
交叉类型（Intersection Types）
交叉类型是将多个类型合并为一个类型。它包含了所有类型的特性。交叉类型使用&符号。
1. 基本语法与示例
假设我们有两个接口A和B：
interface A {
name: string;
}
interface B {
age: number;
}
let person: A & B = { name: 'John', age: 30 };
这里person的类型是A & B，表示它必须同时满足A和B接口的要求，即同时具有name属性（字符串类型）和age属性（数字类型）。
2. 交叉类型在对象合并中的应用
交叉类型在对象合并场景中非常有用。例如，我们有两个对象字面量，想要合并它们的属性：
let obj1 = { name: 'Alice' };
let obj2 = { age: 25 };
let merged: { name: string } & { age: number } = {...obj1,...obj2 };
这里merged的类型是{ name: string } & { age: number }，通过对象展开运算符将obj1和obj2的属性合并到merged中。
3. 交叉类型与继承
交叉类型可以模拟多重继承的行为。在TypeScript中，类只能继承一个父类，但可以实现多个接口。通过交叉类型，可以创建一个具有多个类型特性的新类型。
class Animal {
eat() {
console.log('eating');
}
}
class Flyable {
fly() {
console.log('flying');
}
}
// 这里Bird同时具有Animal和Flyable的特性
let bird: Animal & Flyable = {
eat() {
console.log('bird eating');
},
fly() {
console.log('bird flying');
}
};
虽然这不是真正的多重继承（因为没有继承的层级结构），但在类型层面上，bird具有Animal和Flyable的方法。
4. 交叉类型中的属性冲突
当交叉类型中的类型具有相同名称的属性，但类型不同时，会产生属性冲突。例如：
interface X {
id: string;
}
interface Y {
id: number;
}
// 下面这行代码会报错，因为id属性类型冲突
// let conflict: X & Y = { id: '1' };
解决属性冲突的方法通常是通过类型断言或重新设计类型结构，以避免这种冲突。
5. 交叉类型在函数参数中的应用
在函数参数中使用交叉类型，可以要求参数同时满足多个类型的条件。
function printDetails(person: { name: string } & { age: number }) {
console.log(`Name: ${person.name}, Age: ${person.age}`);
}
let user = { name: 'Bob', age: 40 };
printDetails(user);
这里printDetails函数的参数要求同时具有name（字符串类型）和age（数字类型）属性。
联合类型与交叉类型的对比
1. 概念对比
联合类型表示一个值可以是多种类型中的一种，它是“或”的关系。例如string | number表示值要么是字符串，要么是数字。
交叉类型表示一个值必须同时满足多种类型的要求，它是“与”的关系。例如{ name: string } & { age: number }表示值必须同时具有name（字符串类型）和age（数字类型）属性。
2. 使用场景对比
联合类型的场景：
- 处理可能是不同类型的数据，如上述的
printLengthOrValue函数，参数可能是字符串或数字。 - 处理可能是多种类型之一的函数参数，例如一个函数可以接受字符串或数组作为参数。
交叉类型的场景：
- 合并多个类型的属性，如对象合并时，希望新对象同时具有多个对象的属性。
- 模拟多重继承，使一个类型具有多个其他类型的特性。
3. 类型推导与兼容性
在类型推导方面，联合类型会根据具体使用场景进行类型缩小，通过类型保护来确定实际类型。例如，在if (typeof value ==='string')块内，value的类型被推导为string。
交叉类型在推导时要求所有类型的属性都必须存在且类型匹配。例如A & B，如果A有属性propA，B有属性propB，那么推导后的类型必须同时有propA和propB且类型符合A和B的定义。
在兼容性方面，联合类型中只要值的类型匹配联合类型中的某一种类型，就是兼容的。而交叉类型要求值必须满足所有交叉类型的要求才是兼容的。
联合类型和交叉类型的高级应用
1. 联合类型在泛型中的应用
泛型是TypeScript中非常强大的特性，联合类型在泛型中也有广泛应用。例如，我们可以创建一个泛型函数，它可以接受多种类型的数组，并返回数组的第一个元素：
function getFirst<T>(arr: T[]): T | undefined {
return arr.length > 0? arr[0] : undefined;
}
let numArray = [1, 2, 3];
let numFirst = getFirst(numArray);
let strArray = ['a', 'b', 'c'];
let strFirst = getFirst(strArray);
这里T可以是任何类型，函数返回值的类型是T | undefined，表示可能返回数组的第一个元素（类型为T），也可能返回undefined（当数组为空时）。
2. 交叉类型在高阶类型中的应用
高阶类型是指接受类型作为参数并返回新类型的类型。交叉类型在高阶类型中可以用于创建更复杂的类型组合。例如，我们可以定义一个高阶类型Merge，它将两个类型合并为一个交叉类型：
type Merge<T, U> = T & U;
interface User {
name: string;
}
interface Role {
role: string;
}
type UserWithRole = Merge<User, Role>;
let userWithRole: UserWithRole = { name: 'Eve', role: 'admin' };
这里Merge类型接受两个类型参数T和U，并返回它们的交叉类型。
3. 联合类型和交叉类型的嵌套使用
联合类型和交叉类型可以嵌套使用，以创建非常复杂的类型。例如：
interface Shape {
kind:'square' | 'circle';
}
interface Square extends Shape {
kind:'square';
sideLength: number;
}
interface Circle extends Shape {
kind: 'circle';
radius: number;
}
function draw(shape: Square | Circle) {
if (shape.kind ==='square') {
console.log(`Drawing a square with side length ${shape.sideLength}`);
} else {
console.log(`Drawing a circle with radius ${shape.radius}`);
}
}
let square: Square = { kind:'square', sideLength: 5 };
let circle: Circle = { kind: 'circle', radius: 3 };
draw(square);
draw(circle);
这里Shape接口定义了一个联合类型的kind属性，Square和Circle接口继承自Shape并分别扩展了自己特有的属性。draw函数接受Square或Circle类型的参数，并根据kind属性进行不同的绘制操作。
同时，我们还可以有更复杂的嵌套，比如交叉类型中包含联合类型，或者联合类型中包含交叉类型：
interface A {
a: string;
}
interface B {
b: number;
}
interface C {
c: boolean;
}
type ComplexType = (A & B) | (B & C);
let value1: ComplexType = { a: 'test', b: 10 };
let value2: ComplexType = { b: 20, c: true };
这里ComplexType是一个联合类型，其中每个成员又是交叉类型。
联合类型和交叉类型在前端框架中的应用
1. React中的应用
在React中，联合类型和交叉类型常用于定义组件的props类型。例如，一个按钮组件可能有不同的样式类型：
import React from'react';
type ButtonStyle = 'primary' |'secondary' | 'danger';
interface ButtonProps {
text: string;
style: ButtonStyle;
onClick?: () => void;
}
const Button: React.FC<ButtonProps> = ({ text, style, onClick }) => {
let className = `button-${style}`;
return (
<button className={className} onClick={onClick}>
{text}
</button>
);
};
export default Button;
这里ButtonStyle是一个联合类型，表示按钮可能的样式。ButtonProps接口定义了按钮组件的props类型，其中style属性使用了联合类型。
对于一些通用的组件，可能需要同时满足多个接口的props。例如，一个可点击且有提示信息的组件：
interface Clickable {
onClick: () => void;
}
interface Tooltipable {
tooltip: string;
}
interface ClickableTooltipProps extends Clickable, Tooltipable {
text: string;
}
const ClickableTooltip: React.FC<ClickableTooltipProps> = ({ text, onClick, tooltip }) => {
return (
<div>
<span>{text}</span>
<span className="tooltip">{tooltip}</span>
</div>
);
};
这里ClickableTooltipProps通过交叉类型（通过extends实现类似交叉的效果），同时包含了Clickable和Tooltipable接口的属性，使得组件既可以点击又有提示信息。
2. Vue中的应用
在Vue中，也可以使用联合类型和交叉类型来定义组件的数据和props类型。例如，定义一个可以接受不同类型数据的组件：
import { defineComponent } from 'vue';
type DataValue = string | number;
interface DataProps {
value: DataValue;
}
export default defineComponent({
props: {
value: {
type: [String, Number] as unknown as DataValue,
required: true
}
},
setup(props) {
return {
displayValue: () => {
return typeof props.value ==='string'? `Text: ${props.value}` : `Number: ${props.value}`;
}
};
}
});
这里DataValue是一个联合类型，表示value属性可以是字符串或数字。在props定义中，通过type: [String, Number]来接受这两种类型的值。
对于需要合并多个特性的组件，可以使用交叉类型。假设我们有一个可排序且可过滤的表格组件：
interface Sortable {
sortBy: string;
onSort: (field: string) => void;
}
interface Filterable {
filter: string;
onFilter: (value: string) => void;
}
interface TableProps extends Sortable, Filterable {
data: any[];
}
export default defineComponent({
props: {
sortBy: {
type: String,
required: true
},
onSort: {
type: Function as () => void,
required: true
},
filter: {
type: String,
required: true
},
onFilter: {
type: Function as () => void,
required: true
},
data: {
type: Array,
required: true
}
}
});
这里TableProps通过交叉类型（通过extends），同时具备了Sortable和Filterable的特性，使得表格组件既可以排序又可以过滤。
联合类型和交叉类型在代码维护与扩展性方面的作用
1. 提高代码可读性
通过使用联合类型和交叉类型，可以明确地表示变量、参数或返回值可能的类型。这使得代码的意图更加清晰，对于阅读和理解代码的人来说，能够快速了解数据的可能形态。例如，在函数定义中使用联合类型明确参数类型，就避免了猜测参数可能的取值类型，从而提高了代码的可读性。
2. 增强代码健壮性
联合类型和交叉类型能够在编译时捕获类型错误。例如，当一个函数期望的参数是特定的联合类型，如果传入了不匹配的类型，TypeScript编译器会报错。同样，交叉类型要求对象必须满足所有类型的属性要求，这也能在编译时发现属性缺失或类型不匹配的问题，从而减少运行时错误，增强代码的健壮性。
3. 方便代码扩展
在项目的演进过程中，经常需要对现有功能进行扩展。联合类型和交叉类型使得代码扩展更加容易。例如，如果一个函数原本只接受一种类型的参数，现在需要接受另一种类型的参数，可以通过添加联合类型来实现，而不需要大幅修改函数的逻辑。对于交叉类型，如果需要给一个对象添加新的特性，只需要将新特性的类型与原类型进行交叉即可。
联合类型和交叉类型的陷阱与注意事项
1. 类型复杂性
随着联合类型和交叉类型的嵌套使用，类型会变得非常复杂，难以理解和维护。例如，多层嵌套的联合类型和交叉类型可能会导致类型推导变得困难，甚至出现难以预料的类型错误。在使用时应尽量保持类型的简洁性，避免过度嵌套。
2. 属性冲突
如前文所述，交叉类型中如果出现相同属性名但不同类型的情况，会导致属性冲突。这需要在设计类型时仔细考虑，避免出现这种情况。如果无法避免，可以通过类型断言或重新设计类型结构来解决。
3. 类型保护的复杂性
在联合类型中使用类型保护时，随着联合类型中类型数量的增加，类型保护的逻辑可能会变得复杂。需要确保类型保护的逻辑能够正确地缩小类型范围，避免出现类型错误。同时，在自定义类型保护函数时，要确保类型谓词的正确性。
在实际开发中，合理使用联合类型和交叉类型可以极大地提高代码的质量和可维护性，但也要注意避免上述陷阱，以确保代码的稳健运行。