扩展接口联合类型访问报错：无法读取独有属性

问题核心：当payload是IRefundPayload | IDuplicatePayload联合类型时，TypeScript仅允许访问两个类型共有的属性，comment是IRefundPayload独有的，直接访问会触发类型检查报错。

以下是三种可行的解决办法：

1. 使用in操作符做类型窄化 #

通过判断属性是否存在，让TypeScript自动推断当前payload的具体类型：

const Footer = ({ payload }: IFooterProps) => {
    if ('comment' in payload) {
        // 此时TypeScript自动推断payload为IRefundPayload，可安全访问comment
        console.log(payload.comment);
    } else {
        // 自动推断为IDuplicatePayload，可访问notes
        console.log(payload.notes);
    }
}

2. 自定义类型守卫函数 #

如果需要更清晰的逻辑判断，可以写一个自定义函数明确类型：

// 自定义类型守卫，返回值`payload is IRefundPayload`是类型推断的关键
function isRefundPayload(payload: IRefundPayload | IDuplicatePayload): payload is IRefundPayload {
    return (payload as IRefundPayload).comment !== undefined;
}

const Footer = ({ payload }: IFooterProps) => {
    if (isRefundPayload(payload)) {
        console.log(payload.comment);
    } else {
        console.log(payload.notes);
    }
}

3. 添加区分字段（推荐） #

给两个接口添加唯一的区分字段（Discriminated Union），这是TypeScript处理联合类型最规范的方式：

// 修改接口，添加type区分字段
interface IDefaultPayload {
    orderTokenValue: string;
    items: IActionLineItem;
}

export interface IRefundPayload extends IDefaultPayload {
    type: 'refund';
    isFullShipmentRefund: boolean;
    comment: string;
}

export interface IDuplicatePayload extends IDefaultPayload {
    type: 'duplicate';
    notes: string;
}

// 组件中通过switch判断类型
const Footer = ({ payload }: IFooterProps) => {
    switch (payload.type) {
        case 'refund':
            console.log(payload.comment);
            break;
        case 'duplicate':
            console.log(payload.notes);
            break;
    }
}

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