TypeScript联合类型与交叉类型应用剖析

联合类型基础概念

在TypeScript中，联合类型（Union Types）允许我们表示一个值可以是多种类型中的一种。联合类型通过使用竖线 | 来分隔不同的类型。例如，我们有一个函数，它可以接受字符串或者数字作为参数，我们就可以使用联合类型来定义这个参数的类型。

function printValue(value: string | number) {
    console.log(value);
}

printValue('Hello');
printValue(42);

在上述代码中，printValue 函数的参数 value 可以是 string 类型或者 number 类型。这就是联合类型最基本的应用场景，它为函数参数或者变量提供了更灵活的类型定义。

联合类型在函数返回值中的应用

联合类型不仅可以用于函数参数，还可以用于函数的返回值。比如，我们有一个函数，它可能返回一个成功的数据（类型为 string），也可能返回一个错误信息（类型为 Error）。

function fetchData(): string | Error {
    // 模拟一些异步操作
    const success = Math.random() > 0.5;
    if (success) {
        return 'Data fetched successfully';
    } else {
        return new Error('Failed to fetch data');
    }
}

const result = fetchData();
if (result instanceof Error) {
    console.error(result.message);
} else {
    console.log(result);
}

在这个例子中，fetchData 函数的返回值类型是 string | Error。调用这个函数后，我们需要通过类型判断（这里使用 instanceof）来确定返回值的具体类型，以便进行相应的处理。

联合类型与类型保护

类型保护（Type Guards）是一种在运行时检查值的类型的机制，它可以帮助我们在使用联合类型时，更准确地处理不同类型的值。TypeScript提供了一些内置的类型保护，比如 typeof、instanceof 等。

typeof 类型保护

typeof 类型保护常用于检查基本类型。例如，我们有一个函数，它接受一个 string | number 类型的参数，我们想根据参数的类型进行不同的操作。

function formatValue(value: string | number) {
    if (typeof value ==='string') {
        return value.toUpperCase();
    } else {
        return value.toFixed(2);
    }
}

console.log(formatValue('hello'));
console.log(formatValue(42.567));

在 formatValue 函数中，通过 typeof 类型保护，我们可以在运行时确定 value 的具体类型，然后执行相应的操作。

instanceof 类型保护

instanceof 类型保护主要用于检查对象的类型。前面我们提到的 fetchData 函数返回值类型为 string | Error，在处理返回值时就用到了 instanceof 类型保护。

联合类型的属性访问

当我们使用联合类型时，访问属性可能会遇到一些问题。因为联合类型中的不同类型可能具有不同的属性。例如，我们有一个联合类型 Dog | Cat，Dog 有 bark 方法，Cat 有 meow 方法。

interface Dog {
    bark(): void;
}

interface Cat {
    meow(): void;
}

function makeSound(animal: Dog | Cat) {
    // 以下代码会报错，因为TypeScript不知道animal具体是Dog还是Cat
    // animal.bark(); 
    // animal.meow(); 
}

为了解决这个问题，我们需要使用类型保护。

function makeSound(animal: Dog | Cat) {
    if ('bark' in animal) {
        animal.bark();
    } else {
        animal.meow();
    }
}

const dog: Dog = {
    bark() {
        console.log('Woof!');
    }
};

const cat: Cat = {
    meow() {
        console.log('Meow!');
    }
};

makeSound(dog);
makeSound(cat);

在 makeSound 函数中，通过 'bark' in animal 这样的类型保护，我们可以安全地访问相应类型的属性。

联合类型与数组

联合类型也可以用于数组。例如，我们有一个数组，它的元素可以是 string 或者 number。

const mixedArray: (string | number)[] = ['hello', 42];

for (const item of mixedArray) {
    if (typeof item ==='string') {
        console.log(item.toUpperCase());
    } else {
        console.log(item.toFixed(2));
    }
}

在这个数组中，我们可以存放 string 类型或者 number 类型的元素。在遍历数组时，我们通过 typeof 类型保护来处理不同类型的元素。

交叉类型基础概念

交叉类型（Intersection Types）与联合类型不同，它允许我们将多个类型合并为一个类型。这个合并后的类型包含了所有参与交叉的类型的特性。交叉类型使用 & 符号来表示。例如，我们有两个接口 A 和 B，我们可以创建一个交叉类型 A & B。

interface A {
    name: string;
}

interface B {
    age: number;
}

const person: A & B = {
    name: 'John',
    age: 30
};

在上述代码中，person 的类型是 A & B，它必须同时满足 A 和 B 接口的要求，即必须有 name 属性（类型为 string）和 age 属性（类型为 number）。

交叉类型在对象扩展中的应用

交叉类型在对象扩展方面非常有用。假设我们有一个基础的用户接口 UserBase，然后我们想通过交叉类型来创建不同类型的用户，比如管理员用户。

interface UserBase {
    name: string;
    email: string;
}

interface Admin extends UserBase {
    isAdmin: boolean;
}

const admin: UserBase & { isAdmin: boolean } = {
    name: 'Admin User',
    email: 'admin@example.com',
    isAdmin: true
};

这里我们通过 UserBase & { isAdmin: boolean } 这种交叉类型的方式创建了一个具有管理员特性的用户对象。它既包含了 UserBase 的属性，又有 isAdmin 这个额外的属性。

交叉类型与函数重载

交叉类型也可以与函数重载结合使用。函数重载允许我们为同一个函数提供多个不同的函数类型定义。例如，我们有一个函数 combine，它可以接受两个字符串并返回它们的拼接结果，也可以接受两个数字并返回它们的和。

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: string | number, b: string | number): string | number {
    if (typeof a ==='string' && typeof b ==='string') {
        return a + b;
    } else if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    throw new Error('Invalid types');
}

console.log(combine('Hello, ', 'world!'));
console.log(combine(5, 3));

在这个例子中，我们通过函数重载定义了 combine 函数的两种不同行为。而交叉类型在这里虽然没有直接使用，但函数重载的参数和返回值类型的组合其实体现了类似交叉类型的概念，即不同类型组合下函数的不同行为。

交叉类型的深层次理解

交叉类型不仅仅是简单的属性合并。当我们有复杂的类型结构时，交叉类型会对类型的各个部分进行合并。例如，我们有两个接口，其中一个接口有方法，另一个接口有属性。

interface Action1 {
    execute(): void;
}

interface Action2 {
    data: string;
}

const combinedAction: Action1 & Action2 = {
    execute() {
        console.log(`Executing with data: ${this.data}`);
    },
    data: 'Some data'
};

combinedAction.execute();

在这个例子中，combinedAction 的类型是 Action1 & Action2，它既包含了 execute 方法，又包含了 data 属性。这体现了交叉类型对复杂类型结构的深度合并。

联合类型与交叉类型的对比

语义上的区别

联合类型表示一个值可以是多种类型中的一种，它提供了灵活性，允许我们处理不同类型的值。而交叉类型表示一个值必须同时满足多种类型的要求，它用于合并不同类型的特性。

使用场景的区别

联合类型常用于函数参数或者返回值可能是多种类型的情况，比如前面提到的 printValue 函数和 fetchData 函数。而交叉类型常用于对象扩展，或者需要合并多个类型特性的场景，比如创建具有多种特性的用户对象。

类型兼容性

在类型兼容性方面，联合类型是宽松的，只要值的类型是联合类型中的一种，就符合要求。而交叉类型是严格的，值必须同时满足交叉类型中的所有类型要求。例如：

let value1: string | number;
value1 = 'Hello'; // 合法
value1 = 42; // 合法

let value2: { name: string } & { age: number };
value2 = { name: 'John' }; // 不合法，缺少age属性
value2 = { age: 30 }; // 不合法，缺少name属性
value2 = { name: 'John', age: 30 }; // 合法

从上述代码可以看出联合类型和交叉类型在类型兼容性上的明显区别。

联合类型与交叉类型的复杂应用

联合类型与交叉类型的嵌套

在实际开发中，我们可能会遇到联合类型与交叉类型嵌套的情况。例如，我们有一个函数，它接受一个参数，这个参数可以是 { name: string } & { age: number } 类型（即一个同时具有 name 和 age 属性的对象），也可以是 { title: string } 类型。

function processObject(obj: ({ name: string } & { age: number }) | { title: string }) {
    if ('name' in obj && 'age' in obj) {
        console.log(`Name: ${obj.name}, Age: ${obj.age}`);
    } else if ('title' in obj) {
        console.log(`Title: ${obj.title}`);
    }
}

const personObj: { name: string } & { age: number } = { name: 'Alice', age: 25 };
const titleObj: { title: string } = { title: 'Manager' };

processObject(personObj);
processObject(titleObj);

在这个例子中，processObject 函数的参数是一个联合类型，其中联合类型的一个成员又是交叉类型。通过合理使用类型保护，我们可以处理这种复杂的类型结构。

在泛型中的应用

联合类型和交叉类型在泛型中也有广泛应用。例如，我们有一个泛型函数，它接受一个数组，数组的元素类型可以是多种类型的联合，并且我们可以对这些元素进行一些操作。

function processArray<T>(arr: T[]) {
    for (const item of arr) {
        if (typeof item ==='string') {
            console.log(item.toUpperCase());
        } else if (typeof item === 'number') {
            console.log(item.toFixed(2));
        }
    }
}

const mixedArr: (string | number)[] = ['hello', 42];
processArray(mixedArr);

在这个泛型函数 processArray 中，我们可以传入一个包含联合类型元素的数组。泛型 T 在这里可以代表 string | number 这样的联合类型。

再看交叉类型在泛型中的应用。假设我们有一个泛型接口，它结合了多个接口的特性。

interface BaseInterface {
    id: number;
}

interface AdditionalInterface {
    name: string;
}

interface CombinedInterface<T extends BaseInterface & AdditionalInterface> {
    data: T;
}

const data: BaseInterface & AdditionalInterface = {
    id: 1,
    name: 'Example'
};

const combined: CombinedInterface<BaseInterface & AdditionalInterface> = {
    data: data
};

在这个例子中，CombinedInterface 是一个泛型接口，它的类型参数 T 必须是 BaseInterface & AdditionalInterface 这种交叉类型。这展示了交叉类型在泛型接口中的应用，使得接口可以同时具备多个接口的特性。

联合类型与交叉类型在实际项目中的考量

代码可读性

使用联合类型和交叉类型时，要注意代码的可读性。如果联合类型或交叉类型过于复杂，可能会使代码难以理解。例如，一个联合类型包含过多的类型，或者交叉类型嵌套过深，都会增加代码的阅读难度。在这种情况下，适当使用类型别名或者接口来简化类型定义是很有必要的。

维护成本

随着项目的发展，联合类型和交叉类型可能需要不断调整。如果类型定义不清晰，维护成本会显著增加。比如，在联合类型中添加或删除一个类型，可能会影响到多个使用该联合类型的地方。因此，在设计联合类型和交叉类型时，要充分考虑未来的扩展性和维护性。

性能影响

虽然TypeScript是在编译时进行类型检查，运行时不会产生额外的性能开销，但复杂的联合类型和交叉类型可能会增加编译时间。尤其是在大型项目中，过多复杂的类型定义可能会导致编译速度变慢。所以在保证类型安全的前提下，尽量避免过度复杂的类型定义。

在实际项目中，联合类型和交叉类型是非常强大的工具，但我们需要谨慎使用，充分考虑代码的可读性、维护成本和性能影响等因素，以确保项目的顺利开发和长期维护。通过合理运用联合类型和交叉类型，我们可以编写出更健壮、更灵活的TypeScript代码。无论是处理函数参数、对象扩展，还是在泛型中应用，它们都为我们提供了丰富的类型表达能力，帮助我们更好地管理代码中的类型系统。