接口联合与联合接口在TypeScript中的选择

接口联合（Intersection of Interfaces）

在 TypeScript 中，接口联合是一种将多个接口组合在一起形成一个新接口的方式。新接口包含了所有联合接口的成员。

语法

接口联合使用 & 符号来连接多个接口。例如：

interface A {
    a: string;
}

interface B {
    b: number;
}

let ab: A & B = {
    a: 'hello',
    b: 42
};

在上述代码中，A & B 创建了一个新的接口类型，它要求对象同时拥有 a（类型为 string）和 b（类型为 number）属性。

用途

1. 组合功能：假设你有两个不同功能的接口，比如一个用于用户基本信息，另一个用于用户权限。通过接口联合可以创建一个同时包含基本信息和权限的接口。

interface UserInfo {
    name: string;
    age: number;
}

interface UserPermissions {
    canRead: boolean;
    canWrite: boolean;
}

interface CompleteUser extends UserInfo & UserPermissions {}

let user: CompleteUser = {
    name: 'John',
    age: 30,
    canRead: true,
    canWrite: false
};

2. 扩展现有接口：如果你想在不修改原始接口的情况下为其添加更多属性，可以使用接口联合。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

interface ColoredSquare extends Square & {
    borderWidth: number;
} {}

let cs: ColoredSquare = {
    color: 'blue',
    sideLength: 5,
    borderWidth: 2
};

类型兼容性

当涉及到接口联合的类型兼容性时，一个对象要兼容联合接口，它必须兼容联合接口中的每一个接口。例如：

interface X {
    x: string;
}

interface Y {
    y: number;
}

let xy: X & Y;
let xOnly: X = { x: 'test' };
let yOnly: Y = { y: 10 };

// 以下赋值会报错，因为 xOnly 不兼容 Y，yOnly 不兼容 X
// xy = xOnly; 
// xy = yOnly; 

let both: X & Y = {
    x: 'test',
    y: 10
};
xy = both;

联合接口（Union of Interfaces）

联合接口则是指一个类型可以是多个接口类型中的任意一种。

语法

联合接口使用 | 符号来连接多个接口。例如：

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

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

let shape: Circle | Square;
shape = { kind: 'circle', radius: 5 };
shape = { kind:'square', sideLength: 4 };

在上述代码中，shape 变量可以是 Circle 类型或者 Square 类型。

用途

1. 表示多种可能的类型：在函数参数或者返回值中，当一个值可能是多种不同类型之一时，可以使用联合接口。

interface SuccessResponse {
    status: 'ok';
    data: any;
}

interface ErrorResponse {
    status: 'error';
    message: string;
}

function processResponse(response: SuccessResponse | ErrorResponse) {
    if (response.status === 'ok') {
        console.log('Data:', response.data);
    } else {
        console.log('Error:', response.message);
    }
}

let success: SuccessResponse = { status: 'ok', data: { key: 'value' } };
let error: ErrorResponse = { status: 'error', message: 'Something went wrong' };

processResponse(success);
processResponse(error);

2. 处理不同的对象结构：当一个函数需要处理不同结构的对象，但这些对象有一些共同的行为或属性时，可以使用联合接口。

interface Animal {
    name: string;
}

interface Dog extends Animal {
    bark(): void;
}

interface Cat extends Animal {
    meow(): void;
}

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

let dog: Dog = { name: 'Buddy', bark: () => console.log('Woof!') };
let cat: Cat = { name: 'Whiskers', meow: () => console.log('Meow!') };

makeSound(dog);
makeSound(cat);

类型兼容性

对于联合接口，一个对象只要兼容联合接口中的某一个接口，就可以赋值给联合接口类型的变量。例如：

interface P {
    p: string;
}

interface Q {
    q: number;
}

let pq: P | Q;
let pOnly: P = { p: 'test' };
let qOnly: Q = { q: 10 };

pq = pOnly;
pq = qOnly;

选择接口联合还是联合接口

1. 需求分析：如果需要一个对象同时具备多个接口的所有属性和方法，那么接口联合是合适的选择。例如，当你创建一个复杂的业务对象，它需要融合多个不同功能模块的属性时。而当一个值可能是多种不同类型中的一种，并且这些类型之间没有必然的共同属性（除了可能有的判别式属性，如前面 Circle 和 Square 例子中的 kind 属性），联合接口更合适。比如在处理不同类型的响应或者不同类型的对象时。
2. 类型检查和使用：接口联合要求对象严格满足所有联合接口的要求，这在类型检查时会更加严格。在使用联合接口时，需要通过类型守卫（如 in 操作符、instanceof 等）来确定实际的类型，以确保安全地访问对象的属性和方法。
3. 代码结构和可维护性：从代码结构上看，接口联合有助于创建一个统一的、包含所有必要信息的接口，使代码在表示复杂对象时更加紧凑和清晰。联合接口则在处理多种可能类型的情况下，使代码更具灵活性，能够清晰地表示不同类型的可能性。但如果联合接口中的类型过多，可能会使代码的维护变得复杂，需要仔细管理类型守卫和不同类型的处理逻辑。
4. 示例对比：

// 接口联合示例
interface EmployeeBase {
    name: string;
    age: number;
}

interface Manager extends EmployeeBase {
    department: string;
    manage(): void;
}

interface Developer extends EmployeeBase {
    programmingLanguage: string;
    code(): void;
}

// 假设我们有一个需要同时具备经理和开发者属性的特殊角色
interface TechManager extends Manager & Developer {}

let techManager: TechManager = {
    name: 'Alice',
    age: 35,
    department: 'Engineering',
    manage: () => console.log('Managing team'),
    programmingLanguage: 'TypeScript',
    code: () => console.log('Writing code')
};

// 联合接口示例
interface Document {
    title: string;
}

interface Image extends Document {
    width: number;
    height: number;
}

interface Text extends Document {
    content: string;
}

function display(doc: Image | Text) {
    if ('width' in doc) {
        console.log(`Displaying image: ${doc.title}, ${doc.width}x${doc.height}`);
    } else {
        console.log(`Displaying text: ${doc.title}, ${doc.content}`);
    }
}

let image: Image = { title: 'My Image', width: 800, height: 600 };
let text: Text = { title: 'My Text', content: 'This is some text' };

display(image);
display(text);

在上述示例中，TechManager 使用接口联合，因为它需要同时具备 Manager 和 Developer 的所有属性和方法。而 display 函数使用联合接口，因为它需要处理 Image 或者 Text 类型的文档，这两种类型是不同的，只通过 Document 接口有一些共同属性。

5. 实际项目场景：在企业级应用开发中，当构建用户对象时，如果用户可能有不同的角色，且每个角色有不同的权限和属性，可能会使用接口联合来创建一个完整的用户接口。例如，一个用户可能既是普通用户，又有管理员权限，这时可以通过接口联合将普通用户接口和管理员接口合并。而在处理 API 响应时，如果 API 可能返回不同类型的数据结构，如成功时返回一种结构，失败时返回另一种结构，就会使用联合接口来处理这种情况。
6. 性能考虑：从性能角度看，接口联合在编译时会进行严格的类型检查，确保对象满足所有联合接口的要求，这可能会稍微增加编译时间。联合接口在运行时需要通过类型守卫来确定实际类型，这可能会带来一些额外的运行时开销。但在现代 JavaScript 运行环境和 TypeScript 编译器的优化下，这些性能影响通常是可以忽略不计的，除非在非常大规模的项目或者对性能极其敏感的场景下。
7. 扩展性：接口联合在扩展时，如果需要添加新的功能或属性，可能需要同时修改多个联合的接口，然后更新使用该联合接口的地方。联合接口在扩展时相对灵活，只需要在联合类型中添加新的接口类型即可，对现有代码的影响较小。例如，如果我们有一个处理不同类型图形的联合接口，当需要添加新的图形类型时，只需要定义新的图形接口并添加到联合接口中，而不需要修改其他图形类型的处理逻辑。
8. 类型推导：TypeScript 的类型推导机制在处理接口联合和联合接口时有所不同。对于接口联合，类型推导会基于所有联合接口的属性进行推导。例如：

interface R {
    r: string;
}

interface S {
    s: number;
}

let rs: R & S = { r: 'test', s: 10 };
let rsAlias: typeof rs = { r: 'new test', s: 20 }; // 正确，类型推导基于 R & S

对于联合接口，类型推导会根据赋值的实际类型进行推导。例如：

interface T {
    t: string;
}

interface U {
    u: number;
}

let tu: T | U;
tu = { t: 'test' };
let tuAlias: typeof tu = { t: 'new test' }; // 正确，类型推导基于 T
tu = { u: 10 };
let tuAlias2: typeof tu = { u: 20 }; // 正确，类型推导基于 U

理解这种类型推导的差异对于正确使用接口联合和联合接口非常重要，尤其是在编写复杂的函数和泛型代码时。 9. 与泛型的结合使用：接口联合和联合接口都可以与泛型结合使用，但方式有所不同。接口联合与泛型结合时，通常用于创建具有多种功能的泛型类型。例如：

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

interface Sortable {
    compareTo(other: any): number;
}

// 创建一个既包含键值对又可排序的泛型接口
interface SortableKeyValuePair<K, V> extends KeyValuePair<K, V> & Sortable {}

let pair: SortableKeyValuePair<string, number> = {
    key: 'test',
    value: 10,
    compareTo: (other) => {
        if (typeof other === 'number') {
            return this.value - other;
        }
        return 0;
    }
};

联合接口与泛型结合时，常用于处理多种可能类型的泛型参数。例如：

interface A<T> {
    a: T;
}

interface B<T> {
    b: T;
}

let ab: A<string> | B<number>;
ab = { a: 'test' };
ab = { b: 10 };

在泛型代码中，选择接口联合还是联合接口取决于具体的需求，是需要一个统一的、具有多种功能的泛型类型，还是需要处理多种可能类型的泛型参数。 10. 错误处理和调试：在使用接口联合时，如果对象不满足所有联合接口的要求，TypeScript 编译器会明确指出错误，这有助于在开发阶段发现问题。而在使用联合接口时，由于需要运行时的类型守卫，如果类型守卫逻辑有误，可能会导致运行时错误，如访问不存在的属性。因此，在调试联合接口相关代码时，需要仔细检查类型守卫的逻辑。例如：

// 接口联合错误示例
interface M {
    m: string;
}

interface N {
    n: number;
}

let mn: M & N;
// 以下赋值会报错，因为对象缺少 n 属性
// mn = { m: 'test' }; 

// 联合接口错误示例
interface O {
    o: string;
}

interface P {
    p: number;
}

function handleObject(obj: O | P) {
    // 错误的类型守卫，会导致运行时错误
    if ('o' in obj) {
        console.log(obj.p); 
    } else {
        console.log(obj.o); 
    }
}

let o: O = { o: 'test' };
handleObject(o);

在实际开发中，要根据项目的特点和需求，权衡接口联合和联合接口在错误处理和调试方面的差异，选择更合适的方式。 11. 与其他 TypeScript 特性的配合：接口联合和联合接口与 TypeScript 的其他特性如类型别名、条件类型等也有不同的配合方式。例如，类型别名可以用于简化接口联合和联合接口的使用。

// 接口联合与类型别名
interface X1 {
    x1: string;
}

interface Y1 {
    y1: number;
}

type XY1 = X1 & Y1;
let xy1: XY1 = { x1: 'test', y1: 10 };

// 联合接口与类型别名
interface A1 {
    a1: string;
}

interface B1 {
    b1: number;
}

type AB1 = A1 | B1;
let ab1: AB1;
ab1 = { a1: 'test' };
ab1 = { b1: 10 };

条件类型也可以与接口联合和联合接口结合，实现更复杂的类型转换和推导。例如：

// 联合接口与条件类型
interface C {
    c: string;
}

interface D {
    d: number;
}

type UnionToIntersection<U> = 
    (U extends any? (k: U) => void : never) extends ((k: infer I) => void)? I : never;

type CDIntersection = UnionToIntersection<C | D>; 
// CDIntersection 会是 never，因为 C 和 D 没有共同属性

理解这些特性之间的配合，可以让开发者在 TypeScript 中更灵活地构建复杂的类型系统。 12. 文档和代码可读性：从文档和代码可读性角度来看，接口联合可以清晰地展示一个对象需要具备的所有属性和方法，使得代码的意图一目了然。联合接口在表示多种可能类型时，也能让代码的使用者清楚地知道可能出现的情况。然而，如果联合接口中的类型过多或者接口联合中的接口过于复杂，可能会影响代码的可读性。在这种情况下，合理地使用类型别名、注释等方式可以提高代码的可读性和可维护性。例如：

// 复杂接口联合示例
interface E {
    e1: string;
    e2: number;
}

interface F {
    f1: boolean;
    f2: string[];
}

interface G {
    g1: { subProp: number };
    g2: () => void;
}

// 使用类型别名和注释提高可读性
// 表示同时具备 E、F、G 接口属性的复杂对象
type ComplexObject = E & F & G;
/**
 * 创建一个同时具备 E、F、G 接口属性的对象
 */
let complex: ComplexObject = {
    e1: 'test',
    e2: 10,
    f1: true,
    f2: ['item1', 'item2'],
    g1: { subProp: 5 },
    g2: () => console.log('Function')
};

// 复杂联合接口示例
interface H {
    h1: string;
}

interface I {
    i1: number;
    i2: boolean;
}

interface J {
    j1: { nestedProp: string };
    j2: () => string;
}

// 使用类型别名和注释提高可读性
// 表示可能是 H、I、J 中任意一种类型的对象
type ComplexUnion = H | I | J;
/**
 * 处理可能是 H、I、J 中任意一种类型的对象
 */
function handleComplex(union: ComplexUnion) {
    if ('h1' in union) {
        console.log(union.h1);
    } else if ('i1' in union) {
        console.log(union.i1, union.i2);
    } else {
        console.log(union.j1.nestedProp, union.j2());
    }
}

通过这种方式，可以在使用复杂的接口联合和联合接口时，保持代码的清晰和可维护。

综上所述，在 TypeScript 中选择接口联合还是联合接口，需要综合考虑需求、类型检查、代码结构、性能、扩展性、类型推导、与其他特性的配合以及文档和可读性等多个方面。只有深入理解它们的本质和差异，才能在实际项目中做出正确的选择，编写出高质量、可维护的代码。