TypeScript接口函数两种定义方式引发类型报错的原因解析

现有两个处理器函数，分别处理共享Base接口的不同类型对象，需要创建EventType枚举与处理器的映射。当GenericHandlerInterface的handle定义为箭头函数属性时，代码编译报错（映射处提示“Type 'EventType' is not assignable to type 'EventType.A'”），但将其改为普通方法定义即可解决问题。完整示例代码如下：

enum EventType {
    A = 'A',
    B = 'B',
}
interface Base {
    type: EventType;
}

interface A extends Base {
    type: EventType.A;
}

interface B extends Base {
    type: EventType.B;
}

const aHandlerInterface: GenericHandlerInterface<A> = {
    handle: ({ event }) => {
        console.log(event);
    },
};
const bHandlerInterface: GenericHandlerInterface<B> = {
    handle: ({ event }) => {
        console.log(event);
    },
};

const handlerMappingInterface: { [key in EventType]: GenericHandlerInterface } = {
    [EventType.A]: aHandlerInterface,
    [EventType.B]: bHandlerInterface,
};

interface GenericHandlerInterface<T extends Base = Base> {
    handle: (args: { event: T }) => void;
}

核心是TypeScript对接口中方法和函数类型属性采用了完全不同的类型兼容性规则：

• 方法遵循双向协变：参数类型既可以放宽（协变）也可以收紧（逆变），这是为了兼容JavaScript里的常见写法，比如子类方法覆盖父类方法时参数更宽泛的场景。
• 函数类型属性遵循逆变：参数类型只能收紧不能放宽，这是更严格的类型安全检查规则。

回到你的代码场景：

1. 当handle是箭头函数属性时，GenericHandlerInterface<A>的handle要求参数是{ event: A }，而你定义的handlerMappingInterface中值的类型是默认的GenericHandlerInterface<Base>（因为没显式传泛型参数，用了默认的Base），它的handle参数是{ event: Base }。由于函数属性是逆变的，Base是A的父类型，不能赋值给要求A的参数位置，导致整体类型不兼容。TypeScript的错误提示有时会出现关联偏差，这里实际是函数参数的兼容性问题，却抛出了EventType相关的错误。
2. 当把handle改成普通方法定义（handle(args: { event: T }): void;），方法的双向协变规则允许GenericHandlerInterface<A>赋值给GenericHandlerInterface<Base>——因为参数类型可以放宽，所以映射的类型检查能顺利通过，不会报错。

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