TypeScript中如何访问合并接口的差异成员？

当你把两个接口A和B合并为联合类型C = A | B时，直接访问from或to这类差异成员会报错——这是因为TypeScript的类型检查机制：联合类型的变量，只能安全访问所有分支共有的属性（比如这里的items），因为TypeScript无法确定当前变量到底是A还是B类型。

原问题代码 #

interface A {
    from: string,
    items: number[],
}

interface B {
    to: string,
    items: number[],
}

type C = A | B;

function foo(fromOrTo: C) {
    const result = fromOrTo.from || fromOrTo.to
    // 报错：“from”或“to”在C中不存在
}

可行解决方案 #

方案1：定义含可选属性的接口（你提到的实现方式）

把C定义为包含可选from和to的接口，这样TypeScript会允许访问这两个属性，同时强制要求items存在。这种方式简单直接，但缺点是无法严格区分A和B的结构（比如允许同时传入from和to，或者都不传）。

interface C {
    from?: string,
    to?: string,
    items: number[],
}

function foo(fromOrTo: C) {
    const result = fromOrTo.from || fromOrTo.to;
}

方案2：使用in操作符类型守卫

通过in操作符判断属性是否存在，TypeScript会自动缩小变量的类型范围，此时就能安全访问对应属性。这种方式能严格区分A和B的类型，保证类型安全。

type C = A | B;

function foo(fromOrTo: C) {
    let result: string;
    if ('from' in fromOrTo) {
        // 这里TypeScript知道fromOrTo是A类型
        result = fromOrTo.from;
    } else {
        // 这里TypeScript知道fromOrTo是B类型
        result = fromOrTo.to;
    }
}

方案3：类型断言

如果你能明确确定当前变量的类型，可以用类型断言强制指定类型。这种方式灵活性高，但需要你自己保证类型的正确性，否则可能引发运行时错误。

type C = A | B;

function foo(fromOrTo: C) {
    const result = (fromOrTo as A).from || (fromOrTo as B).to;
}

方案4：自定义类型守卫函数

对于复杂的类型判断场景，可以封装自定义类型守卫函数，复用类型检查逻辑，让代码更清晰。

type C = A | B;

// 自定义类型守卫，判断是否为A类型
function isA(obj: C): obj is A {
    return 'from' in obj;
}

function foo(fromOrTo: C) {
    const result = isA(fromOrTo) ? fromOrTo.from : fromOrTo.to;
}

方案选择建议 #

• 若不需要严格区分A/B结构，优先选方案1；
• 简单类型判断场景，用方案2最安全简洁；
• 能明确变量类型时，可选方案3；
• 复杂或需要复用类型判断逻辑时，用方案4。

内容的提问来源于stack exchange，提问作者Chouzz