Angular14迁移遇TypeScript类型分配错误：参数类型不兼容

错误原因 #

这个错误源于TypeScript严格的类型检查逻辑：

• 参数e的类型是WorkflowNode | WorkflowConnection联合类型
• WorkflowNode的click方法要求传入WorkflowNode类型参数，WorkflowConnection的click方法要求传入WorkflowConnection类型参数
• 当直接调用e.click(e)时，TypeScript会要求参数必须同时满足两种类型的交集（即WorkflowNode & WorkflowConnection），但WorkflowNode缺少WorkflowConnection的from、to属性，因此触发类型不匹配报错。

解决方法 #

方法1：类型守卫（最安全推荐） #

通过instanceof判断e的具体类型，分别匹配对应click方法的参数要求：

getClickEvent(e: WorkflowConnection | WorkflowNode) {
    if (e.click) {
        if (e instanceof WorkflowNode) {
            return e.click(e);
        } else {
            return e.click(e);
        }
    }
    return () => {};
}

方法2：类型断言（快速临时修复） #

若能明确当前场景下e的具体类型，可通过类型断言强制告诉TypeScript参数类型：

getClickEvent(e: WorkflowConnection | WorkflowNode) {
    if (e.click) {
        return (e.click as (arg: typeof e) => void)(e);
    }
    return () => {};
}

注意：这种方式跳过了TypeScript的类型检查，如果实际运行时类型不匹配，会引发报错。

方法3：重构类型定义（长期维护优化） #

定义通用接口统一click方法的参数类型，减少类型歧义：

// 定义通用基础接口
interface WorkflowItem<T> {
    click?: (item: T) => void;
}

// 修改WorkflowNode实现接口
export class WorkflowNode implements WorkflowItem<WorkflowNode> {
    id?: number | string;
    title: string;
    x?: number;
    y?: number;
    click?: (node: WorkflowNode) => void;

    constructor(title: string, id: number | string = '', x?: number, y?: number) {
        this.title = title;
        this.id = id;
        this.x = x;
        this.y = y;
    }
}

// 修改WorkflowConnection实现接口
export class WorkflowConnection implements WorkflowItem<WorkflowConnection> {
    from!: WorkflowNode;
    to!: WorkflowNode;
    title?: string;
    fromSide?: 'top' | 'left' | 'bottom' | 'right' = 'right';
    toSide?: 'top' | 'left' | 'bottom' | 'right' = 'left';
    color?: string;
    click?: (connection: WorkflowConnection) => void;
}

// 调整getClickEvent方法的类型约束
getClickEvent<T extends WorkflowItem<T>>(e: T) {
    if (e.click) {
        return e.click(e);
    }
    return () => {};
}

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